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

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

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

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

Базові знання мов 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-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>
  3. В цей код можна додати підтримку застарілих версій браузерів Internet Explorer — вона реалізована з використанням JavaScript-сценарію (автор — Peter Nederlof). Вам потрібно скачати файл з потрібним кодом, наприклад за цим посиланням — http://peterned.home.xs4all.nl/htc/csshover3.htc. Його треба помістити в ту ж папку, де лежить основна сторінка. А в опис стилів основної сторінки додайте посилання на нього — її можна розмістити безпосередньо після відкриваючого тега стилів:

    / * Для старих браузерів IE * /

     body {behavior: url («csshover3.htc»);}