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

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

ОБСУЖДЕНИЕ

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

вертикальное меню аккордеон
Просмотров: 8907  Скачан: 573 раз  Комментариев в теме: 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 (Аккордеон)Вертикальное меню на css (Аккордеон)

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

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

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

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

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

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

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

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

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

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......
Интересные публикации:

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......
  • Текущий 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
Обновить