Підменю на css

Відео: CSS3 для початківців | # 11 Меню, що випадає на CSS

Давно хотів написати статтю про те, як зробити підміню на CSS. Багато хто робить його на JQuery і виходить досить непогано, однак, весь базовий принцип створення підміню на CSS я викладу тут. А вже далі, відштовхуючись від цієї бази, можна вдосконалювати підміню далі.

наводжу відразу CSS-код:

* html ul li { 
float: left- 
} 
* html ul li a { 
 height:1% - 
} 
ul { 
 border-bottom:1px solid # 000- 
 list-style: none- 
 margin:0- 
 padding:0- 
 width:100px- 
} 
ul li { 
 position: relative- 
} 
ul li a { 
 display: block- 
 border:1px solid # 000- 
 border-bottom:1px- 
 padding:5px- 
 text-decoration: none- 
} 
li ul { 
 display: none- 
 left:99px- 
 position: absolute- 
 top:0- 
} 
li:hover ul { 
 display: block- 
}

Найголовніше тут - це селектор "li: hover ul". Фактично, він і показує вміст меню. За замовчуванням, воно"display: none", А при наведенні курсору на пункт меню, підменю стає:"display: block", Тобто видимим. Це найголовніше. Також в перших двох селекторах (які зі *) йде CSS-хак для IE, інакше без нього в цьому браузері нічого працювати не буде. Все інше - це зовнішній вигляд, який, безумовно, можна змінювати.

Відео: How to create Dropdown Menu with Submenus in Html and CSS (Hindi)

наводжу і HTML-код:

 
 
href="#"gt;Головна  
 
href="#"gt;Меню 1 
 
 
href="#"gt;підменю 1 
 
 
href="#"gt;меню 2 
 
 
href="#"gt;підменю 3 
 
 
 
 
href="#"gt;Меню 2 
 
 
href="#"gt;Подменю4 
 
 
href="#"gt;підменю 5 
 
 
href="#"gt;підменю 6 
 
 
href="#"gt;Подменю7 
 
 
href="#"gt;підменю 8

Якщо уважно вдуматися в цю структуру, то стає все дуже зрозуміло. тег ul - створює меню. якщо ul знаходиться всередині іншого ul, то це вже підміню. А тег li відповідає за конкретний пункт меню.

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

Поділися в соціальних мережах:

Схожі