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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

LibertyLiberty

Универсальный html шаблон Liberty, созданный с уклоном на интерьер, на главной странице располагается адаптированы слайдер с комментариями к изображен...

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

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

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

Exterior DesignExterior Design

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

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с помощью...

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

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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