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

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

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

Інструкція

  1. Нижче наведено повний вихідний код сторінки. Опис стилів розміщено безпосередньо в тексті сторінки. Ні html, ні css цього варіанта реалізації меню не містять будь-яких складних конструкцій, які потребують докладному роз’ясненні.
  2. <! DOCTYPE html PUBLIC «- / / W3C / / DTD XHTML 1.0 Transitional / / EN»

    «Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

    <html>

    <head>

    <title> Просте меню, що випадає з підрозділами </ title>

    <meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />

    <style type=»text/css»>

    * {

    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 {

    padding: 2px;

    border: 1px solid white;

    text-decoration: none;

    color: Black;

    font-weight: bold;

    width: 100%; / * для IE * /

    }

    li> a {width: auto;} / * для решти * /

    li a {

    display: block;

    width: 140px;

    }

    li a.submenu {

    background-color: yellow;

    }

    / * Глави * /

    a: hover {

    border-color: gray;

    background-color: red;

    color: black;

    }

    li.folder a: hover {

    background-color: red;

    }

    / * Розділи * /

    li.folder: hover {z-index: 10;}

    ul ul, li: hover ul ul {display: none;}

    li: hover ul, li: hover li: hover ul {display: block;}

    </ Style>

    </ Head>

    <body bgcolor=»Teal»>

    <ul id=»menu»>

    <li> <a href=»#»> 1. Глава </ a> </ li>

    <li class=»folder»>

    <a href=»#» class=»submenu»> 2. Розділ </ a>

    <ul>

    <li> <a href=»#»> 2.1 Глава </ a> </ li>

    <li class=»folder»>

    <a href=»#» class=»submenu»> 2.2 Розділ </ a>

    <ul>

    <li> <a href=»#»> 2.2.1 Глава </ a> </ li>

    <li> <a href=»#»> 2.2.2 Глава </ a> </ li>

    <li> <a href=»#»> 2.2.3 Глава </ a> </ li>

    </ Ul>

    </ Li>

    <li> <a href=»#»> 2.3 Глава </ a> </ li>

    </ Ul>

    </ Li>

    <li class=»folder»>

    <a href=»#» class=»submenu»> 3. Розділ </ a>

    <ul>

    <li> <a href=»#»> 3.1 Глава </ a> </ li>

    <li> <a href=»#»> 3.2 Глава </ a> </ li>

    <li> <a href=»#»> 3.3 Глава </ a> </ li>

    </ Ul>

    </ Li>

    <li> <a href=»#»> 4. Глава </ a> </ li>

    </ Ul>

    </ Body>

    </ Html>
  3. Якщо у вас є бажання використовувати опцію підтримки вже застарілих модифікацій браузерів, то в блок опису стилів (відразу після <style type=»text/css»>) слід додати додатковий рядок (коментар можна не додавати):

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

    body {behavior: url («csshover.htc»);}
  4. Потім створити окрему сторінку, зміст якої наведено нижче.

    <public:attach event=»ondocumentready» onevent=»CSSHover()» />

    <script>

    window.CSSHover = (function () {var m =/(^| s )((([^ a] ([^ ]+)?)|( a ([^#.][^ ]+)+) ): (hover | active | focus)) / i; var n =/(.*?) : (hover | active | focus) / i; var o =/[^:]+:([ az -] +).*/ i; var p = / (. ([a-z0-9_ -]+):[ az ]+)|(:[ az] +) / gi; var q = / . ( [a-z0-9_ -] * on (hover | active | focus)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {index : 0, list: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {return this.list [(this.index + +)% this.list.length] }}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var a = window.document.styleSheets, l = a.length; for (var i = 0; i <l; i + +) {this.parseStylesheet (a [i ])}}, parseStylesheet: function (a) {if (a . imports) {try {var b = a.imports; var l = b.length; for (var i = 0; i <l; i + +) {this.parseStylesheet (a.imports [i])}} catch (securityException ) {}} {try var c = a.rules; var r = c.length; for (var j = 0; j <r; j + +) {this.parseCSSRule (c [j], a)}} catch (someException ){}}, parseCSSRule: function (a, b) {var c = a.selectorText; if (m.test (c)) {var d = a.style.cssText; var e = n.exec (c) [ 1]; var f = c.replace (o, ‘on $ 1′); var g = c.replace (p, ‘. $ 2′ + f); var h = q.exec (g) [1]; var i = e + h; if (! this.callbacks [i]) {var j = u.get (); var k = v (j); b.addRule (e, j + ‘: expression (CSSHover (this, «‘ + f + ‘»,»‘ + h + ‘»,»‘ + k +’»))’); this.callbacks [i] = true} b.addRule (g, d)}}, patch: function (a, b , c, d) {try {var g = new CSSHoverElement (a, b, c); this.elements.push (g)} return b}, unload: function () {try {var l = this.elements.length; for (var i = 0; i < ; l; i + +) {this.elements [i]. unload ()} this.elements = []; this.callbacks = {}} catch (e ){}}}; var CSSHoverElement (a, b, c) {this.node = a; this.type = b; var d = new RegExp (‘(^| s) ‘+ c +’ ( s |$)’,’ g ‘);

    this.activator = function () {a.className + = » + c}; this.deactivator = function () {a.className = a.className.replace (d, ‘ function (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}})();

    </ Script>
  5. Цю сторінку треба зберегти з ім’ям csshover.htc і помістити туди ж, де знаходиться і основна сторінка.