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

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

ОБСУЖДЕНИЕ

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

вертикальное меню аккордеон
Просмотров: 8348  Скачан: 536 раз  Комментариев в теме: 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>
Материалы по теме:

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

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

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

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

Красивое вертикальное меню, реализованное с помощью JavaScript...

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

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

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

Full галерея на jQueryFull галерея на jQuery

Отличная галерея созданная с помощью Jquery и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с......

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Горизонтальное мульти менюГоризонтальное мульти меню

Выпадающее мульти меню, как вариант вывода безграничного количества пунктов....
  • Текущий 1.80/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (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
Обновить