Система обмена ссылками
О системе
Регистрация
Правила
Обратная связь
 

CSS : Меню
Вернуться назад

Пример:

http://softwaremaniacs.org/menu.htm

 

Вот исходный код такого меню:

 

Стили:
<Style Type="text/css">
  #Menu {Width:100%; Margin:0; Padding:0;}
  #Menu LI {Display:Block; Float:Left; Margin:0; Padding:0;}
  #Menu LI UL LI {Float:None;}
  #Menu LI UL {Display:None; Margin:0; Padding:0;}
  #Menu LI:Hover UL,
  #Menu LI.Hover UL {Display:Block; Position:Absolute;}

  /* Обход Бага С Неверным Переносом Строк В Опере 7 */
  #Menu LI UL LI {White-Space:NoWrap;}

  #Menu {Background-Color:Gray; Color:White;
         Font-Family:Verdana, Sans-Serif; Font-Size:10pt;
         Line-Height:1.25em; Height:1.45em;}
  #Menu LI H1 {Font-Size:10pt; Font-Weight:Normal;
               Margin:0; Padding:0.1em 1em 0.1em 0.5em;
               Cursor:Default;}
  #Menu LI:Hover H1,
  #Menu LI.Hover H1 {Background-Color:#AAA; Color:Black;}

  #Menu LI UL {Background-Color:#EEE; Color:Black;
               Border:Solid Gray; Border-Width:0 1px 1px 1px;}
  #Menu LI UL LI A {Text-Decoration:None; Color:Black; Padding:0 0.5em;}
  #Menu LI UL LI A:Hover {Background-Color:#AAA; Color:Black;}
</Style>
Само меню:
<P>Правильное Иерархическое Меню:
<UL Id=Menu>
  <LI>
    <H1>Пункт 1</H1>
    <UL>
      <LI><A HRef="menu.htm">Подпункт 1.1</A>
      <LI><A HRef="menu.htm">Подпункт 1.2</A>
      <LI><A HRef="menu.htm">Подпункт 1.3</A>
      <LI><A HRef="menu.htm">Подпункт 1.4</A>
    </UL>
  <LI>
    <H1>Пункт 2</H1>
    <UL>
      <LI><A HRef="menu.htm">Подпункт 2.1</A>
      <LI><A HRef="menu.htm">Подпункт 2.2</A>
      <LI><A HRef="menu.htm">Подпункт 2.3</A>
      <LI><A HRef="menu.htm">Подпункт 2.4</A>
      <LI><A HRef="menu.htm">Подпункт 2.5</A>
      <LI><A HRef="menu.htm">Подпункт 2.6</A>
    </UL>
</UL>
<Script Type="text/javascript">
  var Menu=document.getElementById('Menu');
  for(var i=0;i<Menu.childNodes.length;i++)
    with(Menu.childNodes[i])
      if(nodeName=='LI'){
        onmouseover=function(){this.className='Hover';};
        onmouseout=function(){this.className='';};
      }//if
</Script>
http://www.dhtml.ru/talk/common/4613/
Вернуться назад



2008 © Обмен ссылками Публикации
Отправляя любую форму на сайте, Вы соглашаетесь с обработкой персональных данных и политикой конфиденциальности данного сайта.