Як зробити підміню

Меню з випадають розділами підміню використовується при верстці сайтів з метою більш наочно уявити структуру розділів і підрозділів, при і цьому заощадивши простір сторінки. Реалізувати такий механізм не так уже й складно: один із зразків реалізації наведено в статті.
як зробити підміню
"http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd" >
Просте меню, що випадає з підрозділами
* {
font-family: arial;
font-size: 16px;
}
/* для старих браузерів IE */
body {behavior: url ( "csshover. htc");}
ul, li, a {
display: block;
margin: 0;
padding: 0;
border: 0;
}
ul {
width: 150px;
border: 1px solid silver;
background: white;
list-style : none;
}
li {
position: relative;
padding: 1px;
background-color: silver;
z-index: 9;
}
li. folder {background-color: silver;}
li. folder ul {
position: absolute;
left: 111px;/* Тільки для IE */
top: 5px;
}
li. folder> ul {left: 140px;}/* для інших */
a{
прокладка: 2px;
Кордон: 1px тверде біле;
Текст-прикраса: немає;
Колір : Чорний;
Вага шрифту: жирний;
ширина: 100%;/* для IE */
}
li> a {ширина: авто;}/* для остальных */
li a {
дисплей: блок;
ширина: 140px;
}
li a. submenu {
колір фону: жовтий
/* Главы */
a: hover {
колір-кордон: сірий,
колір: чорний;
}
li. folder a: hover {
background-color: червоний;
}
/* Розділи */
li. folder: hover {z-index: 10;}
ul ul, li: hover ul ul {дисплей: ні;}
li: hover ul, li: hover li: hover ul (дисплей: блок;}

  • 1. Глава



    • 2.1 Глава


    • 1 Глава

    • 2.2.2 Глава

    • 2.2.3 Глава



  • 2.3 Глава




  • 3. Розділ

    • 3.1 Глава

    • 3.2 Глава

    • 3,3 Глава



  • 4. Глава


  • меню з випадаючими списками підменю
    Затем створіть окрему сторінку, яка містить наведені нижче.
    window. CSSHover=(функція () {var m=/(^ | s) ((([^ a] ([^] +)?) | ([^ #.] [^] +) +)) :( hover | active | focus))/i; var n=/(. *?): (hover | active | focus)/i; var o=/[^:] + :( [az -] +). */i; var p=/(([a-z0-9 _ -] +): [az] +) | (: [az] +)/gi;=([a-z0-9 _ -] * on (hover | active | focus))/i; var s=/msie (5 | 6 | 7)/i; var t=/backcompat/i; var u={index: 0, список: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {return this. list [(this. index ++)% this var.=function (c) {return c. replace (/-(.)/mg, функція (a, b) {return b. toUpperCase ()})} var w={ elements: [], callbacks: {}, init: function () {if (! s. test (navigator. userAgent) &&! t. test (window. document.compatMode)) {return} var a=window. document. styleSheets, l=a. length, для (var i=0; i this. activator=function () {a. className +='this. deactivator=function () {a. className=a. className. replace (d, '')}; a. attachEvent (x [b] .activator, this. activator); a. attachEvent ( x [b] .deactivator, this. deactivator)} CSSHoverElement. prototype={unload: function () {this. node. detachEvent (x [this. type] .activator, this. activator); this. node. detachEvent (x this. activator=null; this. type=null;}; window. attachEvent ('onbeforeunload', функція () {w. unload ()}) функція повернення (a, b, c, d) {if (a) {return w. patch (a, b, c, d)} else {w. init ()}}} ) ();

    5 шаг

    Эту страницу надо сохранить с именем csshover.
    Видео по теме




    ЩЕ ПОЧИТАТИ