УрокВыпадающее праймари (секондари) горизонтальное меню
В прошлом уроке я писал о создании вертикального меню. Однако оно только при клике. И без закруглений. Кому-то оно может быть очень полезным, но большинству сайтов требуется более стандартное меню - горизонтальное, выпадающее, с закруглениями. Причём эти закругления должны подгружаться без задержек.
Итак, сначала выводим меню также как и в предыдущем уроке (в 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.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; }
Получилось что-то такое:
Уже неплохо. Теперь знающие цсс могут идти и самостоятельно украшать меню, а остальным придётся ещё немного почитать. Сделаем закругления у меню. Для этого вырезаем закругления таким образом:
Естественно, вырезать надо на прозрачном фоне. Я сделал на чёрном исключительно для наглядности. Подключаем эту картинку в 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; }
Выглядит это так:
Выпадающее меню готово. А главное - не понадобились дополнительные модули, и вы знаете как оно работает, что очень удобно для внесения изменений в код.
- Spleshka
- 01.11.2010
- 19987