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

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

ОБСУЖДЕНИЕ

Аккордеон для сайта на JQuery

Вертикальное меню аккардеон на css и JQuery
Просмотров: 3411  Скачан: 306 раз  Комментариев в теме: 2

Красивое вертикальное меню аккордеон на css, главное его отличие от себе подобных это простота и надёжность. Если вам под ваши потребности нужен именно меню аккордеон, то это один из достойных вариантов на данное время. Такое меню будет работать стабильно во всех браузерах включая IE6 и даже IE5. Данное вертикальное меню отлично подойдёт для сайта на html.

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

 

HTML

<div id="menu_pop">
    <ul id="accordion">
        <li><div class="first">CSS3<br>
            <span class="button_podtext">Основные возможности</span></div>
            <ul>
                <li><a href="#">Ссылка 1</a></li>
                <li><a href="#">Ссылка 2</a></li>
                <li><a href="#">Ссылка 3</a></li>
            </ul>
        </li>
        <li><div>HTML5<br>
            <span class="button_podtext">Продолжение или новая платформа?</span></div>
            <ul>
                <li><a href="#">Ссылка 1</a></li>
                <li><a href="#">Ссылка 2</a></li>
                <li><a href="#">Ссылка 3</a></li>
                <li><a href="#">Ссылка 4</a></li>
                <li><a href="#">Ссылка 5</a></li>
                <li><a href="#">Ссылка 6</a></li>
                <li><a href="#">Ссылка 7</a></li>
                <li><a href="#">Ссылка 8</a></li>
                <li><a href="#">Ссылка 9</a></li>
                <li><a href="#">Ссылка 10</a></li>
            </ul>
        </li>
        <li><div>WordPress<br>
            <span class="button_podtext">Новости в мире CMS</span></div>
            <ul>
                <li><a href="#">Ссылка 1</a></li>
                <li><a href="#">Ссылка 2</a></li>
                <li><a href="#">Ссылка 3</a></li>
            </ul>
        <li><div>Основное<br>
            <span class="button_podtext">Блог, Тесты, Форум</span></div>
            <ul>
                <li><a href="#">Ссылка 1</a></li>
                <li><a href="#">Ссылка 2</a></li>
                <li><a href="#">Ссылка 3</a></li>
            </ul>
        </li>
    </ul>
    <div class="menu_bottom"><i>Отличное меню</i></div>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript">
$("#accordion > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#accordion ul').slideUp(280);
    }
    $(this).next().slideToggle(280); 
});
$('#accordion ul:eq(0)').show();
</script>
Материалы по теме:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

Социальные иконки на css3Социальные иконки на css3

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

Таблица тарифных плановТаблица тарифных планов

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

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (2)
↑ 0 ↓
Дмитрий
Аккуратненько и лаконично!
воспользуюсь с Вашего любезного предложения  :) влом писать самому
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Целиком и полностью с вами согласен  :) меню довольно аккуратное да и кроссбраузерность на высоте.

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

Страницы: 1

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


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