Создание разворачивающегося меню средствами CSS
Уже очень давно Eric Meyer, автор «CSS: The Definitive Guide», описал способ разворачивающегося меню использующего только CSS, плюс небольшой JS для IE6. Но как это использовать в Drupal. В этом примере, я расскажу как сделать разворачивающееся меню для Primary links в теме Garland.
Создайте меню и включите его блок
Итак, для начала я создам простое меню. Вот как выглядит страница Menus для этого меню:
Отметьте: в колонке Expanded должно стоять Yes. Затем, я размещаю блок Primary links в регион Content. Включение этого блока в регион Content на данном этапе будет более показательно. Таким образом, код моего меню выглядит следующим образом:
<div id="block-menu-2" class="clear-block block block-menu">
<h2>Primary links</h2>
<div class="content">
<ul class="menu">
<li class="expanded"><a href="/node/1">One</a>
<ul class="menu">
<li class="leaf"><a href="/node/4">Apple</a></li>
<li class="leaf"><a href="/node/5">Banana</a></li>
</ul>
</li>
<li class="expanded"><a href="/menus/node/2">Two</a>
<ul class="menu">
<li class="leaf"><a href="/node/6">Orange</a></li>
<li class="leaf"><a href="/node/7">Pear</a></li>
</ul>
</li>
<li class="expanded"><a href="/menus/node/3">Three</a>
<ul class="menu">
<li class="leaf"><a href="/node/8">Blueberry</a></li>
<li class="leaf"><a href="/node/9">Grape</a></li>
</ul>
</li>
</ul>
</div>
</div>
Этот код вы можете увидеть у себя, перейдя в браузере по ссылкам Вид → Исходный код страницы. Этот код мне потребуется для описания стилей, т.к. здесь прекрасно видно какие ID и class мне нужно будет описать.
Теперь, я открываю файл style.css и добавляю в конец файла следующий код:
/**
* Drop down menu.
*/
#block-menu-2 ul li {
position: relative;
float: left;
}
#block-menu-2 ul li a {
display: block;
padding-bottom: 20px;
float: left;
}
#block-menu-2 ul li ul {
display: none;
}
#block-menu-2 ul li:hover ul, #block-menu-2 ul li.sfhover ul {
display: block;
position: absolute;
left: 0px;
margin-top: 25px;
z-index: 10;
}
#block-menu-2 ul li ul li {
clear: left;
}
#block-menu-2 ul li ul li a {
padding-bottom: 0px;
}И для того, чтобы всё это работало в IE6, в page.tpl.php нужно добавить вот это:
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("block-menu-2").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>Теперь у нас есть работающее выпадающее меню:
Давайте теперь немного улучшим его вид.
Описание стилей и небольшое изменение page.tpl.php
Во-первых добавим следующие стили в файл style.css. Отметьте: это дополнительно к тому, что мы уже добавили.
#block-menu-2 ul li a,
#block-menu-2 li a:link,
#block-menu-2 li a:visited {
background: transparent url(images/bg-navigation-item.png) no-repeat scroll 50% 0pt;
color: #fff;
display: block;
margin: 0pt 1em;
padding:0.75em 0pt 20px;
}
#block-menu-2 li a:hover,
#block-menu-2 li a.active {
background: transparent url(images/bg-navigation-item-hover.png) no-repeat scroll 50% 0pt;
color: #fff;
}
#block-menu-2 ul li ul li a,
#block-menu-2 ul li ul li a:link,
#block-menu-2 ul li ul li a:visited,
#block-menu-2 ul li ul li a:hover,
#block-menu-2 ul li ul li a:active{
z-index: 100;
padding-top: 7px;
padding-bottom: 0px;
margin-bottom: -5px;
background: none;
}
#header {
position: relative;
}
#block-menu-2 {
z-index: 4;
position: absolute;
right: 0px;
top: -6px;
}
#block-menu-2 ul li.expanded {
background: none;
}
#block-menu-2 li {
background: none;
list-style-image: none;
list-style-type: none;
padding: 0px;
}
#block-menu-2 .content {
margin: 0px;
}Теперь, я меняю расположение блока Primary links перемещая его из региона Content в регион Header. Отметьте: в настройках блока Primary links, в поле названия блока нужно ввести <none>, чтобы название этого блока не показывалось, оно нам не нужно. И наконец, осталось внести небольшие изменения в файл page.tpl.php. Во-первых я заменяю:
<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>на:
<?php print $header; ?>и также заменяю:
<div id="header-region" class="clear-block"><?php print $header; ?></div>на:
<div id="header-region" class="clear-block"></div>Теперь всё кончено!
Comments
Спасибо!
Не хватает только картинки с конечным результатом. :-)
А если у меня не Garland, а какой-нибудь Zen?
есть готовый модуль для создания CSS-менюшек ;)
хм...
линк не поставился...
_http://drupal.org/project/nice_menus
Код комментария:
есть готовый модуль <a href="http://drupal.org/project/nice_menus" title="Nice Menus"></a> для создания CSS-менюшек ;)— ссылки разрешены, можно без подчёркиваний, просто линк не на что не был поставлен. Вобщем, ссылка на модуль: Nice Menus :-)
нигде мне не могут ответить, даже на буржуйском сайте. Ну подскажите решение мне надо в primary_links выводить их description/ Как это можно сделать?
Post new comment