УрокВыпадающее праймари (секондари) горизонтальное меню

В прошлом уроке я писал о создании вертикального меню. Однако оно только при клике. И без закруглений. Кому-то оно может быть очень полезным, но большинству сайтов требуется более стандартное меню - горизонтальное, выпадающее, с закруглениями. Причём эти закругления должны подгружаться без задержек.

Итак, сначала выводим меню также как и в предыдущем уроке (в page.tpl.php):

<?php if ($primary_links): ?>
  <div id = "menu"><?php print menu_tree('primary-links'); ?></div>
<?php endif; ?>

Важное замечание: чтобы выводилось подменю, надо перейти в раздел /admin/build/menu-customize/primary-links и у пунктов, имеющих подменю, поставить галочку напротив развёрнутое(expanded), иначе оно не покажется.

После того как мы сохраним, то выведутся все пункты меню. Горизонтально. Без паники, мы только начали. Украсим начальным css-ом:

#menu ul {
  text-align: center; /* располагаем меню по центру */
}
 
#menu ul li {
  display: inline; /* выводим кроссбраузерно меню в линию */
}
 
#menu ul li a {
  line-height: 27px; /* высота меню, чтобы по вертикали оно было по центру */
}
 
#menu ul li ul {
  display: none; /* важный пункт - сначала все подменю должны быть спрятаны */
}

У меня получилось вот такое меню:

menu.PNG

Сейчас показывается только верхний уроверь. Давайте добавим скрипт, который будет разворачивать подменю. Создаём пустой файл, например, menu.js и подключаем его в нашу тему. Чистим кэш, чтобы друпал заметил его. Туда добавляем такое содержимое: 

$(document).ready(function() {	
  $('div#menu ul li').hover(function() {
    //выполняется при наведении
    $(this).find('ul').fadeIn(300);
  },
  function() {
    //выполняется когда мы убираем мышку
    $(this).find('ul').hide();
  });	
});

Сохраняем. Теперь меню выпадает, но уж очень некрасиво. Прокачиваем css:

#menu ul {
  text-align: center;
}
 
#menu ul li {
  display: inline;
  position: relative;
  padding-bottom: 10px;
}
 
#menu ul li a {
  line-height: 27px;
}
 
#menu ul li ul {
  background: white;
  display: none;
  position: absolute;
  padding: 10px;
  margin: 0;
  left: 0;
  top: 24px;
  border: 1px solid black;
  width:140px;
}
 
#menu ul li ul li {
  display: block;
  text-align: left;
  padding: 0;
  margin: 0;
}
 
#menu ul li ul li a {
  line-height: 27px;
}

Получилось что-то такое:

menu_0.PNG

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

menu.jpg

Естественно, вырезать надо на прозрачном фоне. Я сделал на чёрном исключительно для наглядности. Подключаем эту картинку в css. Немного поколдовав получаем финальный вариант:

#menu ul {
  padding-top:5px;
  text-align: center;
}
 
#menu ul li {
  display:inline-block;
  line-height:25px;
  padding-bottom:10px;
  padding-top:0;
  position:relative;
}
 
#menu ul li a {
        background: url(images/menu.png) no-repeat left top; /* фон указываем, но он не покажется изначально, т.к. мы берём только 25 пикселей сверху картинки. А это как раз прозрачный фон. Зато подгрузится картинка */
  display:inline-block;
  height:25px;
  line-height:25px;
  padding:0 5px 0 10px;  
}
 
#menu ul li:hover,
#menu ul li.active-trail {
  background: url(images/menu.png) no-repeat right -50px /* смещения для правой части меню */;
  color: black;
}
 
#menu ul li a:hover,
#menu ul li:hover a,
#menu ul li.active-trail a {
  background: url(images/menu.png) no-repeat left -25px; /* смещения для левой части меню */;
  color: black;
  text-decoration: none;
}
 
#menu ul li ul {
  background: black;
  display: none;
  position: absolute;
  padding: 10px;
  margin: 0;
  left: 0;
  top: 24px;
  border: 1px solid black;
  width: 160px;
}
 
#menu ul li ul li {
  display: block;
  text-align: left;
  padding: 0;
  margin: 0;
}
 
#menu ul li:hover ul li a{
  background: none;
  color: white;
}
 
#menu ul li ul li a {
  line-height: 27px;
  color: #fff;
}
 
#menu ul li ul li a:hover {
  background: url(images/menu.png) no-repeat left -25px;
  color: black;
}

Выглядит это так:

menu_1.PNG

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

"Умное" раскрывающееся вертикальное меню на jquery за 2 минуты
Создаём простой модуль с нуля
Навигация

Похожие материалы