Випадають меню за допомогою CSS

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

Ось приклад чинного меню

створюємо меню

Першим і найважливішим етапом створення нашого меню є побудова його структури. Найкраще робити це, використовуючи ненумерований список, в якому розміщені підміню, що виступають як списки в рамках пунктів батьківського списку. Звучить незрозумілою? Фактично це дуже просто:

<ul> <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="#">WebDesign</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">DomainNames</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>

Ось так: простий HTML код, доступний і легко редагований.

наводимо красу

Погляньте на наведений вище приклад. Ви побачите досить нудний список елементів. А я обіцяв вам, що він буде привабливим! Давайте-но додамо трохи стилів.

Насамперед видалимо відступи і маркери в ненумерований списку, а потім поставимо ширину пунктів меню.

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; }

Ми також повинні додатково зв'язати JavaScript з нашим головним списком, додавши це:

<Ul id = "nav">

Сподіваюся, з огляду на все вишерассмотренное, кожен з вас зможе побачити спрощену версію чинного меню .

Стрибки меню в 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 * /

Таємничий баг шостої версії IE ...

Працюючи над статтею, я виявив дивний баг, який, як мені здається, спостерігається лише в IE6. Для "li a" необхідно задати фон, інакше якщо випадає підміню буде більше (по висоті), ніж саме батьківське меню, то частина посилань просто зникне з екрану ще до того, як ви зможете клікнути по ним. Дивно! Спробуйте побачити це самі.

Створіть своє меню

От і все! Чи не суперечить стандартам метод створення красивих горизонтально випадають меню. Все, що вам треба зробити - додати кілька ваших стилів для hover, створивши своє меню. щоб дати поштовх вашої фантазії, я додав ще пару штрихів у до меню . Насолоджуйтесь!