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

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

ОБСУЖДЕНИЕ

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

вертикальное меню аккордеон
Просмотров: 8102  Скачан: 526 раз  Комментариев в теме: 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 и JQueryСлайд меню с помощью css3 и JQuery

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

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

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

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

Неплохое фиксированное меню для вашего сайта, меню может быть горизонтальным и вертикальным......

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

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

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

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

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

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

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

Стильное вертикальное меню аккордеон.
Интересные публикации:

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

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

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

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

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

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

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

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

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

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
  • Текущий 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
Обновить