РЕКЛАМА

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

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

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

    ПОДРОБНЕЕ

     

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

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

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

    ПОДРОБНЕЕ

     

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

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

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

    ПОДРОБНЕЕ

     

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

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

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

    ПОДРОБНЕЕ

     

НОВИНКА+

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

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

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

ПОДРОБНЕЕ

 

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

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

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

ПОДРОБНЕЕ

 

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

Аккордеонное меню на MooTools 1.4.5

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

Приветствую тебя, дорогой  читатель, на страницах моего сайта!

 

Как я и обещал в предыдущей статье, сегодня рассмотрю вертикальное аккордеонное меню, выполненное посредством использования более новой версии фреймворка MooTools – 1.4.5. В общем-то, отличия кода от рассмотренного ранее (в предыдущей статье) - незначительные, и касаются в основном способа подключения фреймворка и некоторых изменений в разметке странички. Кроме того, скрипт создания аккордеона включен в тело самой страницы, хотя ничто не мешает вынести его в отдельный файл.

 

Итак, вот HTML-код:




 

Как видно из кода, сначала мы подключаем таблицу стилей, затем – ядро и расширение фреймворка. Именно в расширении находится плагин – аккордеон. Потом идёт наш скрипт и непосредственно разметка страницы. В качестве пунктов меню использованы заголовки h3, а в качестве подпунктов – уже непосредственно ссылки.

 

Далее представлен код таблицы стилей. Также как и в предыдущем случае, стилизация элементов осуществлена с помощью картинок. Это не самый эффективный способ, но его плюс в том, что нет необходимости задумываться об адекватном отображении меню во всех браузерах:

#accordion  {
  width: 192px;
  background: #F5F5F5 url('module_c.gif') no-repeat bottom left;
}
#accordion  h2{
	font-family:"Trebuchet MS";
	font-size:13px;
	background:url('module_i2.png') no-repeat top left;
	text-align:center;
	color:#468;
	padding:8px 0;
	margin:0;
}
#accordion h3 {
   cursor: pointer;
   padding:0;
	margin:0;
	padding: 0px 6px;
	font-weight:normal;
	color: #567;
}
#accordion h3:hover{
	 color:#28E;
}
.mainlevel{
	height: 26px;
	background: url('quick_ba.jpg') no-repeat top left;
	line-height: 26px;
	font-size: 12px;
}
.mainlevel.last{
	background: url('quick_la.jpg') no-repeat top left;
}
.mainlevel.active{
	background: url('quick_ac.jpg') no-repeat top left;
	color:#000;
}
#accordion .content {
   height:200px;
}
#accordion .content  a{
	display:block;
	text-decoration: none;
	color: #262626;
	padding-left:13px;
	border-bottom: 1px solid #e1e1ef;
	margin: 0px 2px;
	font-size: 12px;
}
#accordion .content  a:hover{
  	color:#28E;
	background:#fff;
}

 

На этом пока всё! До встречи!

 

 

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


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