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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

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

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

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

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

Социальное меню с подписью на css3Социальное меню с подписью на css3

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

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

Горизонтальное меню на css3 с замечательным эффектом....

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

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

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

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

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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