qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Вертикальное меню аккордеон

вертикальное меню аккордеон
Просмотров: 9216  Скачан: 582 раз  Комментариев в теме: 8

Вертикальное меню аккордеон на css, хорошо подойдёт для сайта информационного характера, очень удобно если на сайте много информации и надо показать пользователю её количество. Изменить вид меню под дизайн своего сайт, вы всегда можете в css стилях.

Шаг 1 - создание разметки

 

HTML

<div id="wrapper">
    <ul class="accordion">
        <li id="one" class="files">
            <a href="#" class="">Мои файлы<span>495</span></a>
            <ul class="sub-menu" style="display: none; ">
               <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
               <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>
               <li><a href="#"><em>03</em>FTP Сервер<span>366</span></a></li>
               <li><a href="#"><em>04</em>Google Drive<span>1</span></a></li>
               <li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>
            </ul>
        </li>
        <li id="two" class="mail">
            <a href="#" class="">Почта<span>26</span></a>
            <ul class="sub-menu" style="display: none; ">
               <li><a href="#"><em>01</em>Gmail<span>9</span></a></li>
               <li><a href="#"><em>02</em>Yandex<span>14</span></a></li>
            </ul>
        </li>
        <li id="three" class="cloud">
            <a href="#" class="">Работа<span>58</span></a>
            <ul class="sub-menu" style="display: none; ">
               <li><a href="#"><em>01</em>Отправка<span>12</span></a></li>
               <li><a href="#"><em>02</em>Сайты<span>19</span></a></li>
               <li><a href="#"><em>03</em>Сделать<span>27</span></a></li>
               <li><a href="#"><em>04</em>Пароли<span>12</span></a></li>
               <li><a href="#"><em>05</em>Профили<span>19</span></a></li>
               <li><a href="#"><em>06</em>Опции<span>27</span></a></li>
            </ul>
        </li>
        <li id="four" class="sign">
            <a href="#" class="active">Войти</a>
            <ul class="sub-menu" style="display: block; ">
               <li><a href="#"><em>01</em>Выход</a></li>
               <li><a href="#"><em>02</em>Удалить профиль</a></li>
               <li><a href="#"><em>03</em>Параметры</a></li>
            </ul>
        </li>
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<rel="stylesheet" href="css/style.css" type="text/css">

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var accordion_head = $('.accordion > li > a'),
        accordion_body = $('.accordion li > .sub-menu');
        accordion_head.first().addClass('active').next().slideDown('normal');
        accordion_head.on('click', function(event) {
        event.preventDefault();
        if ($(this).attr('class') != 'active'){
                accordion_body.slideUp('normal');
            $(this).next().stop(true,true).slideToggle('normal');
                accordion_head.removeClass('active');
            $(this).addClass('active');
        }
    });
});
</script>
Материалы по теме:

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...
Интересные публикации:

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......
  • Текущий 1.73/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.7/5( Голосов 11 )

Комментариев в теме: (8)
↑ 0 ↓
Руслан
когда удаляю скрипт

<script type="text/javascript">
$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
accordion_head.first().addClass('active') .next().slideDown('normal');
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('no rmal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
</script>

то ссылки при клике на нужный раздел меню ссылка открывается, но не подсвечивается открытый раздел
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Ответил вам ниже, сделайте как написано и ссылки будут открываться норм.

Ответить Ответ с цитатой
↑ 0 ↓
Руслан
Я из этого меню убрал подпункты из каждого раздела, т.е. оставил только главные категории. Подставил ссылки, но при клике на них естественно ничего не открывается. Я так понимаю нужно изменять в джаваскрипте ?

Хочу сделать так, чтобы находясь в категории "Новости" подсвечивалась именно эта категория, перейдя в др. скажем "Новости-2", выделялась эта категория.

Как это реализовать в данном меню, оставив только основные категории, в таком виде :

<div id="wrapper">
<ul class="accordion">
<li id="one" class="files">
<a href="#" class="active">Новости</a>
</li>

и т.д.
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Если я правильно понял, то вы хотите оставить только вкладки и поставить на них ссылки на другие страницы вашего сайта. Но, что бы после перехода на указанную страницу, подсвечивалась та категория на которую вы перешли?.
Если моя догадка верна, то вам стоит сделать несколько действий.
1. Заменить весь JS на вот этот
<script type="text/javascript">
$(document).ready(function() {
var accordion_head = $('.accordion > li > a');
accordion_head.first = $('#two > a').addClass('active').next().slideD own('normal');
});
</script>

2. Заменяем в JS коде id #two на любой другой id который у вас прописан в других категориях скажем id="one". Таким образом при переходе у вас будет подсвечиваться именно эта категория.

3. Уберите с разметки класс active, оставьте его просто пустым class="", как на других категориях.

Ответить Ответ с цитатой
↑ 0 ↓
Руслан
Да Вы правильно меня поняли. Сделал все как вы сказали, но все равно не работает (( Не подсвечивается категория.

Вот часть моего меню:

<div class="sb-block">
<div class="border-header">
<h4>Все категории</h4>
</div>
<div class="sb-block">
<div id="wrapper">
<ul class="accordion">
<li id="one" class="files-1">
<a href="/auto/" class="">Авто<span>0</span> </a>
</li>
<li id="two" class="files-2">
<a href="#" class="">Бизнес и аналитика<span>0</span></a>
</li>
<li id="three" class="files-3">
<a href="#" class="">Видеоигры<span>0</span> </a>
</li>
....................................... и т.д.

Вот я зашел в рубрику Авто, но но она в меню не подсвечивается.
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Вам нужно прописать id (в данном случае у вас id категории авто это one) именно в том js, который прописан на странице на которую вы попадете при переходе по ссылке.

P.S Если проблема не решиться, то я вам скину тестовую страницу.

Ответить Ответ с цитатой
↑ 0 ↓
Руслан
К сожалению я не понял где искать этот js. Сайт на DLE, тот скрипт который вы написали вчера я вставил в шаблон main.tpl перед </body>

<script type="text/javascript">
$(document).ready(function() {
var accordion_head = $('.accordion > li > a');
accordion_head.first = $('#one > a').addClass('active').next().slideD own('normal');
});
</script>

Я вот еще что подумал, а в css не надо дописать строчку, где будет указываться цвет этой самой акстивной страницы.

Скажите у вас есть скайп, было бы удобнее переписываться + я показал бы вам сайт, посмотрите сами... а так я чувствую проблема не решится (
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Ну тогда все понятно. С DLE я знаком мало, в шаблонах DLE у меня нет в данный момент времени разбираться, но скажу так.
У вас дублируется на всех страницах один и тот же скрипт (который я вам написал), потому и категории подсвечиваться не будут, так как id остаётся один и тот же на всех страницах.
Но хочу заметить один маленький нюанс, во всех комментариях изложенных выше имеется ошибка в коде, а именно в скрипте раздельно написан .slideD own('normal'), а должен быть цельным .slideDown('normal').
Если у вас так отображается, исправьте эту ошибку.
Вот вам ссылка на готовый пример.

Ответить Ответ с цитатой

Страницы: 1

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить