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

Drop-Down Menus, Horizontal Style

Кожен, кому доводилося створювати меню, що випадають, знайомий з тим, яку кількість скриптів потрібно для цього. Між тим, використовуючи грамотно структурований 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="#"> 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>

Ось так: простий 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;

Величезне спасибі Патріку Гріффітс і Дану Уебб (Patrick Griffiths і Dan Webb), рассказавшими про це трюку в одній з попередніх статей ALA – Suckerfish Dropdowns. Спасибі, хлопці!

Отже, правила для 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, створивши своє меню. Щоб дати поштовх вашій фантазії, я додав ще пару штрихів у до меню. Насолоджуйтеся!

автор: Nick Rigby
переклад: Максим Россомахін

Схожі статті:


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

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*