Поиск:
  • Страница 1 из 1
  • 1
Стильное горизонтальное выпадающее меню
Дата: Вторник, 21.12.2010, 14:11 | Сообщение # 1
Offline
  • Проверенный

  • h4rdwOw;'
  • 568 Сообщения
[spoiler="Скрин"][/spoiler]
[TableGreen]1. Качаем архив -=Жми=-
2. Заливаем папку "menu" в корень сайта.
3. В CSS прописываем: [/TableGreen]
Code
div#menu {
   height:55px;
   background:url(/menu/nav-bg.png) repeat-x;
   }

div#menu ul {
   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
}
div#menu ul.menu {
   padding-left: 30px;
}

div#menu li {
   position: relative;
   z-index: 9;
   margin: 0;
   padding: 0;
   display: block;
   float: left;
}
     
div#menu li:hover>ul {
   left: -2px;
}

div#menu li div {
   list-style: none;
   float: left;
   position: absolute;
   top: 50px;
   left: 0;
   width: 208px;
   z-index: 11;
   visibility: hidden;
   padding: 0 0 9px 7px;
   _padding: 0 0 9px 3px;
   background: url(/menu/submenu-bottom.png) no-repeat 7px bottom;
   _background-image: url(/menu/submenu-bottom.gif);
   margin: 0 0 0 -9px;
}
div#menu li:hover>div {
   visibility: visible;
}

div#menu li.current a {}

/* меню::уровень1 */
div#menu a {
   position: relative;
   z-index: 10;
   height: 55px;
   display: block;
   float: left;   
   padding: 0 10px 0 10px;
   line-height: 55px;
   text-decoration: none;
}
div#menu span {
   font: normal 12px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
   padding-top: 18px;
   color: #787878;
   font-weight:bold;
   text-transform:uppercase;
   display: block;
   cursor: pointer;
   background-repeat: no-repeat;   
}
div#menu ul a:hover span {
   color: #FFFFFF;
}

div#menu li { background: url(/menu/nav_separator.png) top left no-repeat; }
div#menu li.last span{
   background: url(/menu/nav_separator.png) top right no-repeat;
   padding: 18px 10px 16px 0;
}

/* меню::уровень2 */
div#menu ul ul li {
   background: url(/menu/nav_dropdown_sep.gif) left bottom repeat-x;
   padding: 4px 0;
   z-index: 9;   
}
div#menu ul ul {
   z-index: 12;   
   padding: 0;
   background: rgb(32,32,32) url(/menu/nav_dropdown_grad.png) right top no-repeat;
   margin-top:0px;
   margin-left:4px;
   margin-right:5px;
}
div#menu ul ul a {
   width: 184px;
   padding: 0px 7px 3px 8px;
   height: auto;
   float: none;
   display: block;
   background:none;
   margin-bottom: 2px;
   z-index: -1;
}
div#menu ul ul a span {
   padding: 0 10px 0px 10px;
   line-height: 20px;
   color: #787878;
   font-weight:normal;
   text-transform: none;
   background:none;
}
div#menu ul ul a:hover {
   background: url(/menu/submenu-selected-bottom.gif) no-repeat 8px bottom;
}
div#menu ul ul a:hover span {
   background: url(/menu/submenu-selected-top.gif) no-repeat 0px 0px;
   color: #fff;
}

div#menu ul ul li.last { background: none; }
div#menu ul ul li {
   width: 100%;
}

/* меню::уровень3 */
div#menu ul ul div {
   width: 208px;
   margin: -50px 0 0 190px !important;
   height: auto;
   _padding: 0 0 9px 3px;
}
div#menu ul ul ul {
   _padding-right:1px;
}

/* lava lamp */
div#menu li.back {
}
div#menu li.back .left {
}

[TableGreen]4. Заходим в быструю замену.
Меняем: </head>
На : [/TableGreen]
Code
<script src="/menu/menu.js" type="text/javascript"></script></head>

[TableGreen]5. Там где хотим видеть меню ставим: [/TableGreen]
Code
<div id="menu">
   <li><a href="#" class="parent"><span>Главная</span></a>
   <ul class="menu">

   </li>
   <li><a href="#" class="parent"><span>Папка 1</span></a>
   <div><ul>
   <li><a href="#" class="parent"><span>Подменю 2</span></a>
     
   </li>
   <li><a href="#"><span>Подменю 3</span></a></li>
   <li><a href="#"><span>Подменю 4</span></a></li>
   <li><a href="#"><span>Подменю 5</span></a></li>
   <li><a href="#"><span>Подменю 6</span></a></li>
   <li><a href="#"><span>Подменю 7</span></a></li>
   </ul></div>
   </li>
   <li><a href="#"><span>Форум</span></a></li>
   <li class="last"><a href="#"><span>Контакты</span></a></li>
   </ul>
</div>
  • Страница 1 из 1
  • 1
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "Up-Rise.Ru".
Дизайн сайта разработал life_man.
© 2026 Сайт управляется системой uCoz.