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

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

ОБСУЖДЕНИЕ

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

Вертикальное меню аккардеон на css и JQuery
Просмотров: 3483  Скачан: 308 раз  Комментариев в теме: 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, главная особенность такого меню......

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

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

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

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

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

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

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

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

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

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

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

Креативное вертикальное меню на css3 и JQuery
Интересные публикации:

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

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

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

Шаблон Desire Night ClubШаблон Desire Night Club

HTML шаблон ночного клуба, на главной странице располагается привлекательный слайдер, есть галерея, видео проигрыватель, заготовлена контактная форма ...

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Mega Web Buttons PackMega Web Buttons Pack

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

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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