Меню, що розкривається на сторінках сайтів використовується для економії простору і логічно обгрунтованого подання структури веб-ресурсу. Способів реалізувати цей елемент багато, один з найбільш простих наведено нижче.
Вам знадобиться
Базові знання мов HTML і CSS
Інструкція
- HTML-код меню використовує вкладені один в одного елементи списків (UL і LI), всередину яких поміщені посилання на сторінки. Ніяких складних конструкцій він не містить. Динаміка реалізована засобами CSS, блок опису якого розміщений безпосередньо у вихідний код сторінки. У ньому теж немає чогось особливого, крім того в тексті є деякі пояснення призначення тих чи інших стильових блоків.
- <! 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-family: 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. Папка </ a>
<ul>
<li> <a href=»page2.1.html»> 2.1 Сторінка </ a> </ li>
<li class=»folder»>
<a href=»page2.2.html» class=»submenu»> 2.2 Папка </ a>
<ul>
<li> <a href=»page2.2.1.html»> 2.2.1 Сторінка </ a> </ li>
<li> <a href=»page2.2.2.html»> 2.2.2 Сторінка </ a> </ li>
<li> <a href=»page2.2.3.html»> 2.2.3 Сторінка </ a> </ li>
</ Ul>
</ Li>
<li> <a href=»page2.3.html»> 2.3 Сторінка </ a> </ li>
</ Ul>
</ Li>
<li class=»folder»>
<a href=»page3.0.html» class=»submenu»> 3. Папка </ a>
<ul>
<li> <a href=»page3.1.html»> 3.1 Сторінка </ a> </ li>
<li> <a href=»page3.2.html»> 3.2 Сторінка </ a> </ li>
<li> <a href=»page3.3.html»> 3.3 Сторінка </ a> </ li>
</ Ul>
</ Li>
<li> <a href=»page4.0.html»> 4. Сторінка </ a> </ li>
</ Ul>
</ Body>
</ Html> - В цей код можна додати підтримку застарілих версій браузерів Internet Explorer — вона реалізована з використанням JavaScript-сценарію (автор — Peter Nederlof). Вам потрібно скачати файл з потрібним кодом, наприклад за цим посиланням — http://peterned.home.xs4all.nl/htc/csshover3.htc. Його треба помістити в ту ж папку, де лежить основна сторінка. А в опис стилів основної сторінки додайте посилання на нього — її можна розмістити безпосередньо після відкриваючого тега стилів:
/ * Для старих браузерів IE * /
body {behavior: url («csshover3.htc»);}
