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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

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

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

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

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

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

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

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

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

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

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

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

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......
  • Текущий 1.89/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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