Как сделать подменю?

2 ноября 2014 г. Просмотров: 870 Инструкции
Меню с выпадающими разделами подменю используется при верстке сайтов с целью более наглядно представить структуру разделов и подразделов, при и этом сэкономив пространство страницы. Реализовать такой механизм не так уж сложно: один из образцов реализации приведен в статье.
Создать сайт самостоятельно с Wix.com

Инструкция

  • Ниже приведен полный исходный код страницы. Описание стилей размещено непосредственно в тексте страницы.
    Ни html, ни css этого варианта реализации меню не содержат каких-либо сложных конструкций, нуждающихся в подробном разъяснении.

  • "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 {

    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;}

    • 1. Глава
    • 2. Раздел

      • 2.1 Глава
      • 2.2 Раздел

        • 2.2.1 Глава
        • 2.2.2 Глава
        • 2.2.3 Глава

      • 2.3 Глава

    • 3. Раздел

      • 3.1 Глава
      • 3.2 Глава
      • 3.3 Глава

    • 4. Глава
  • Если у вас есть желание использовать опцию поддержки уже устаревших модификаций браузеров, то в блок описания стилей (сразу после ) следует добавить дополнительную строку (комментарий можно не добавлять):/* для старых браузеров IE */
  • body {behavior: url("csshover.htc");}

  • Затем создать отдельную страницу, содержание которой приведено ниже.
  • window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/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 w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;ithis.activator=function(){a.className+=' '+c};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.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();

  • Эту страницу надо сохранить с именем csshover.htc и поместить туда же, где находится и основная страница.
  • Оцените статью!