Хаки и Скрипты Next Generation CMS : Меню и навигация, CSS : Выпадающие меню на CSS

irbees2008 Опубликовано - 10 - июля Меню и навигация

Автор: --------------
Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css hmlt

Каждый, кому доводилось создавать выпадающие меню, знаком с тем, какое количество скриптов требуется для этого. Между тем, используя грамотно структурированный HTML-код и несложные CSS-правила, можно создать симпатичное выпадающее меню, которое легко менять и дополнять, и при этом оно будет работать во множестве браузеров, в том числе и в Internet Explorer. И самое главное для вас, любители "чистого" кода - никакого JavaScript! (На самом деле, небольшой скрипт все же необходим, но вовсе не для того, о чём вы подумали.)

1.Первым и самым важным этапом создания нашего меню является построение его структуры. Лучше всего делать это, используя ненумерованный список, в котором размещены подменю, выступающие как списки в рамках пунктов родительского списка. Звучит заумно? Фактически это очень просто и он практически готов
в main.tpl ищем

Код:

{categories}

и заменяем на это

Код:

<ul id="nav">{categories}</ul>

2.Далее идем в news.categories.tpl и меняем там код на этот

Код:

{% for entry in entries %}
	<!-- Если не стоит флаг `flags.active`, т.е. если эта категория - не текущая, то показываем ссылку -->
	<!-- В текущей категории показываем имя категории жирным шрифтом -->
	<li>
	{% if (not entry.flags.active) %}
		<a href="{{ entry.link }}">
	{% else %}
		<b>
	{% endif %}
	{{ entry.cat }}
	{% if (not entry.flags.active) %}
		</a>
	{% else %}
		</b>
	{% endif %}

	<!-- Отображаем кол-во новостей в категории только в случае, если выставлен флаг `flags.counter` -->
	{% if (entry.flags.counter) %}
		[ {{ entry.counter }}]
	{% endif %}

	<!-- Если у категории есть подкатегории, то открываем новый уровень вложенности -->
	{% if (entry.flags.hasChildren) %}
		<ul>
	{% else %}
	</li>
		<!-- Если после этой категории закрывается 1 или несколько уровней - выводим закрывающиеся </ul> -->
		{% if isSet(entry.closeToLevel) %}
			{% for i in (entry.closeToLevel+1) .. entry.level %}
				</ul></li>
			{% endfor %}
		{% endif %}
	{% endif %}
{% endfor %}

2.Наводим красоту
Взгляните на приведённый выше пример. Вы увидите довольно скучный список элементов. А я обещал вам, что он будет симпатичным! Давайте-ка добавим немного стилей.

Первым делом удалим отступы и маркеры в ненумерованном списке, а затем зададим ширину пунктов меню.

Код:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}

Теперь нам надо задать положение элементов списка. К счастью, они по умолчанию будут расположены вертикально, что нам и нужно. Однако, нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю.

Код:

ul li {
	position: relative;
	}

Берёмся за подменю. Мы хотим, чтобы каждое подменю появлялось справа от пункта родительского меню в тот момент, когда над этим пунктом находится курсор.

Код:

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

Используя атрибуты "left" и "top", мы можем абсолютно позиционировать каждое субменю в рамках пункта меню предка. Вы заметите, что я задал атрибуту "left" значение в 149px (одним пикселем меньше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы. (Поймёте, о чём я, чуть позже.)

Нам надо также присвоить атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.

Что ж, у нас теперь есть каркас, но он всё ещё выглядит невзрачно. Давайте зададим стили для ссылок.

Код:

ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

Я применил к ссылкам стили по своему вкусу, но их можно легко поменять на те, что вам нравятся. Важно присвоить атрибуту "display" значение "block", ведь мы хотим, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка.

Итак, выглядит уже получше, хотя пользователи Internet Explorer для Windows могут с вами и не согласиться. К несчастью, IE Win понимает разрывы строк между ссылками в нашем красиво оформленном HTML коде как незаполненное пространство. Из-за этого в IE вы видите, что ссылки не прилегают тесно одна к другой. Однако этот баг IE можно обойти.

Код:

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

Выше мы применили трюк Holly Hack, которые прячет эти правила от всех браузеров, кроме IE Win. Отлично. Обратите внимание, что было добавлено правило height: 1%. К сожалению (опять!), борясь с одной ошибкой, мы выткнулись на другую, для борьбы с которой требуется задать значение для атрибута "height", чтобы ссылки отображались как блочные элементы.

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

Код:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

Все сложилось удачно, и теперь все могут увидеть красивое, но нефункционирующее меню.

Заставим его работать
А теперь - самое веселое. Нам надо сделать так, чтобы подменю появлялись в тот момент, когда курсор находится над элементом списка.

Код:

li:hover ul { display: block; }

Вуаля! И вот оно - наше меню - в действии.

"Ё-моё! Работает!" - крикнет кто-то из вас. - "Здорово!"

Хорошо, хорошо, но чёртов IE/Win опять поломал всю красоту - не желает делать то, что ему сказано. Он понимает псевдокласс :hover лишь для тега

Код:

<a>

- так что li:hover, на который у нас завязано появление подменю, ему ни о чём не говорит.

Капелька JavaScript приведет IE в чувство (разрыв строк отмечен символом "»" - Ред.):

Код:

startList = function() {
      if (document.all&&document.getElementById) {
            navRoot = document.getElementById("nav");
            for (i=0; i<navRoot.childNodes.length; i++) {
                  node = navRoot.childNodes[i];
                  if (node.nodeName=="LI") {
                        node.onmouseover=function() {
                              this.className+=" over";
                        }
                        node.onmouseout=function() {
                              this.className=this.className.replace »
                              (" over", "");
                        }
                  }
            }
      }
}
window.onload=startList;

Итак, правила для hover таковы:

Код:

li:hover ul, li.over ul { 
	display: block; 
      }

Надеюсь, учитывая всё выше рассмотренное, любой из вас сможет увидеть упрощённую версию действующего меню.

Прыжки меню в IE5.01 для Win
Пользователи IE5.01 для Windows заметят, как меню прыгает вокруг при наведении мыши на любой из элементов списка. Проблема легко решается внесением изменений в наш прошлый трюк:

Код:

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ну и посмотреть можно вставив ниже стоящий код HMLT редактор справа

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" >
startList = function() {
      if (document.all&&document.getElementById) {
            navRoot = document.getElementById("nav");
            for (i=0; i<navRoot.childNodes.length; i++) {
                  node = navRoot.childNodes[i];
                  if (node.nodeName=="LI") {
                        node.onmouseover=function() {
                              this.className+=" over";
                        }
                        node.onmouseout=function() {
                              this.className=this.className.replace »
                              (" over", "");
                        }
                  }
            }
      }
}
window.onload=startList;
</script>
<style type="text/css">
body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
	}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>
</head>
<body>
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
    <ul>
      <li><a href="#">History</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Можешь почитать и вот эту статейку "обтекание картинок текстом"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.