РЕКЛАМА

  • Подробный видеокурс по Python

    Подробный видеокурс по Python

    Получи видеокурс по Python с упражнениями сейчас

    ПОДРОБНЕЕ

     

  • Как создаются сложные проекты на Java?

    Как создаются сложные проекты на Java?

    Узнай это в бесплатных видеоуроках

    ПОДРОБНЕЕ

     

  • Как открыть свою Web-студию?

    Как открыть свою Web-студию?

    Пошаговый Видеокурс с заданиями от владельца Web-студии

    ПОДРОБНЕЕ

     

  • Создание движка для сайта

    Создание движка для сайта

    Научись создавать профессиональные движки на PHP и MySQL!

    ПОДРОБНЕЕ

     

НОВИНКА+

Конструктор сайтов для бизнеса

Конструктор сайтов для бизнеса

Создайте сайт за 5 минут и начинайте продавать в интренете.

ПОДРОБНЕЕ

 

Английский Язык для Среднего Уровня

Английский Язык для Среднего Уровня

Научись говорить, понимать английский на слух. От профессиональных преподавателей на основе легендарных фильмов и песен.

ПОДРОБНЕЕ

 

Узнавайте о новостях по теме программирования

Вертикальный аккордеон на jQuery

Дата: 19.01.2014
Автор: Сергей
Источник: bulatlab.ru

Доброго времени  суток, друзья!

 

Продолжая тему вертикальных аккордеонных меню, затронутую в предыдущих статьях, сегодня я вновь хочу поделиться таким меню, но выполненном на более популярной javascript-библиотеке – jQuery. Данное меню очень простое, без использования навороченных плагинов, и основано на использовании стандартных эффектов анимации jQuery, а именно эффектов скольжения – slideDown и slideUp, которые посредством изменения высоты элементов плавно раскрывают и скрывают эти элементы (в нашем случае это список ссылок – подпунктов меню).

 

В разметке html-страницы, как обычно, ничего особенного нет. Сначала подключаем таблицу стилей, потом – jQuery, после этого следует небольшой скрипт для меню. В теле станицы – основная разметка. Это список пунктов, которые представлены тегами h3 и списки подпунктов – непосредственно ссылок на нужные страницы проекта. Единственное, на что хотелось бы обратить внимание, так это то, что для открытия необходимого пункта меню по умолчанию используется класс active. Данный класс может быть использован для сохранения информации об активном пункте меню в куке.

 

Меню вертикальное на jQuery и CSS3


 

Стилизация элементов зависит от общего дизайна проекта, и приведена здесь только в качестве примера:

 

* {margin: 0; padding: 0;}
body {font-family: Nunito, arial, verdana;}
#accordion > ul >li >ul {	height:250px;}		
#accordion li {	list-style-type: none;}
#accordion ul ul {display: none;}
#accordion li.active ul {display: block;}

#accordion {
	background: #fff;
	width: 250px;
	margin: 100px auto 0 auto;
	border: 1px solid #ccc;
}

#accordion h3 {
	color: #567;
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
}

#accordion h3:hover {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}

#accordion ul ul li a {
	color:#555;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 25px;
	transition: all 0.15s;
}

#accordion ul ul li a:hover {
	color:#55d;	
	background: #f6f6f6;
}

 

В итоге получаем простое меню-аккордеон.

 

 

 

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

 

До встречи!

 

Оценить эту статью:   
Просмотров: 1681
Комментариев: 0
Оценка: (0)


Добавить комментарий
Поделитесь этой страничкой в социальных сетях