Як зробити меню, що розкривається

Як зробити меню, що розкривається

Меню, що розкривається на сторінках сайтів, використовується для економії простору та логічно обґрунтованого представлення структури веб-ресурсу. Способів реалізувати цей елемент багато, один з найбільш простих наведено нижче.

Вам знадобиться

  • Базові знання мов HTML і CSS

Інструкція

посиланняна сторінки1. HTML-код меню використовує вкладені один в одного елементи списків (UL і LI), всередину яких розміщено . Ніяких складних конструкцій він не містить. Динаміка реалізована засобами CSS, блок опису якого розміщений безпосередньо у вихідний код сторінки. У ньому теж немає чогось особливого, крім того в тексті є деякі пояснення призначення тих чи інших стильових блоків.

2. <!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""><html> <head> <meta content=""text/html; charset = windows-1251 "" http-equiv = "" Content-Type ""/> < title > Що розкривається меню </title > < style type =" "text/css" "> * {font-f Verdana; font-size: 14px; } ul,li,a { padding: 0; display: block; border: 0; margin: 0; } ul { border: 1px solid #AAA; width: 150px; list-style: none; background: #FFF; } li { background-color: #AAA; position: relative; z-index: 9; padding: 1px; } li.folder {background-color: #AAA;} li.folder ul { position: absolute; top: 5px; left: 111px ;/* для переглядачів IE */} li.folder > ul {left: 140px; }/* для інших переглядачів */a {padding: 2px; border: 1px solid #FFF; text-decoration: none; width: 100% ;/* для переглядачів IE */color: #000; font-weight: bold; } li>a {width: auto; }/* для інших переглядачів */li a {width: 140px; display: block; } li a.submenu { background-color: yellow; }/* Посилання */a:hover { border-color: gray; background-color: #FF0000; color: black; } li.folder a:hover { background-color: # FF0000; }/* Теки */ul ul, li:hover ul ul {display: none;} li.folder:hover {z-index: 10;} li:hover ul, li:hover li:hover ul {display: block;} </style></head><body bgcolor=""Teal""> <ul id=""menu""> <li><a href="/"page1.0.html"">1. Страница</a></li> <li class=""folder""> <a href="/"page2.0.html"" class=""submenu"">2. Тека </а > < ul > < li > < a href = "" page2.1.html "" > Голова сторінки </a > </li > < li class = "" folder "> < a Тека </а > < ul > < li > < a href = "" page3.1.html "" > 3.1 Сторінка </a > </li > li > < a href = "" page3.-0- Сторінка </a > </li >/ul > </body > </html >

3. У цей код можна додати підтримку застарілих версій браузерів Internet Explorer - вона реалізована з використанням JavaScript-сценарію (автор - Peter Nederlof). Вам потрібно завантажити файл з потрібним кодом, наприклад за цим посиланням - http://peterned.home.xs4all.nl/htc/csshover3.htc. Його треба помістити в ту ж папку, де лежить основна сторінка. А в опис стилів основної сторінки додайте посилання на нього - його можна розмістити безпосередньо після відкриття теґу стилів:/ * для старих браузерів IE */body {behavior: url(""csshover3.htc"");}