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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

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

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

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

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью JQuery...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

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

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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