MoNsTeR1KinG СаЙт ФаЙлов И то Другое:-)
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Многоуровневое горизонтальное выпадающее меню
MoNsTeR-666Дата: Понедельник, 26.08.2013, 16:50 | Сообщение # 1
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 12
Статус: Offline
Скрипт многоуровневого выпадающего меню с анимацией на css3 и js

ПриМЕР


                                                        УСТАНОВКА

1) Непосредственно код самого меню - вставлять куда необходимо:


Код
[spoiler=Спойлер]<ul id="menu">  
     <li><a href="">Ссылка1</a></li>  

     <li>  
      <a href="">Ссылка2</a>  
      <ul>  
       <li>  
        <a href="">Раздел1</a>  
        <ul>  
         <li><a href="">Подраздел1</a></li>  
         <li><a href="">Подраздел2</a></li>  
         <li><a href="">Подраздел3</a></li>  
         <li><a href="">Подраздел4</a></li>  
        </ul>        
       </li>  
       <li>  
        <a href="">Раздел2</a>  

        <ul>  
         <li><a href="">Подраздел1</a></li>  
         <li><a href="">Подраздел2</a></li>  
         <li><a href="">Подраздел3</a></li>  
         <li><a href="">Подраздел4</a></li>  
        </ul>        
       </li>  

       <li>  
        <a href="">Раздел3</a>  
        <ul>  
         <li><a href="">Подраздел1</a></li>  
         <li><a href="">Подраздел2</a></li>  
         <li><a href="">Подраздел3</a></li>  
         <li><a href="">Подраздел4</a></li>  

        </ul>        
       </li>  
       <li>  
        <a href="">Раздел4</a>        
        <ul>  
         <li><a href="">Подраздел1</a></li>  
         <li><a href="">Подраздел2</a></li>  
         <li><a href="">Подраздел3</a></li>  
         <li><a href="">Подраздел4</a></li>  
        </ul>     
       </li>  
      </ul>  
     </li>  
     <li>  
      <a href="">Ссылка3</a>  
      <ul>  

       <li>  
        <a href="">Раздел1</a>  
        <ul>  
         <li>  
          <a href="">Подраздел1</a>      
          <ul>  
           <li><a href="">Подраздел11</a></li>  
           <li><a href="">Подраздел12</a></li>  
           <li><a href="">Подраздел13</a></li>  
          </ul>           
         </li>  
         <li>  
          <a href="">Подраздел2</a>  
          <ul>  
           <li><a href="">Подраздел21</a></li>  
           <li><a href="">Подраздел22</a></li>  
           <li><a href="">Подраздел23</a></li>  
          </ul>           
         </li>  
         <li>  
          <a href="">Подраздел3</a>  
          <ul>  
           <li><a href="">Подраздел31</a></li>  
           <li><a href="">Подраздел32</a></li>  

           <li><a href="">Подраздел33</a></li>  
          </ul>           
         </li>  
        </ul>         
       </li>  
       <li>  
        <a href="">Раздел2</a>  
        <ul>  
         <li>  

          <a href="">Подраздел21</a>  
          <ul>  
           <li><a href="">Подраздел 211</a></li>  
           <li><a href="">Подраздел 212</a></li>  
           <li><a href="">Подраздел 213</a></li>  
          </ul>           
         </li>  

         <li>  
          <a href="">Подраздел22</a>  
          <ul>  
           <li><a href="">Подраздел 221</a></li>  
           <li><a href="">Подраздел 222</a></li>  
           <li><a href="">Подраздел 223</a></li>  
          </ul>           
         </li>  

         <li>  
          <a href="">Подраздел 23</a>  
          <ul>  
           <li><a href="">Подраздел 231</a></li>  
           <li><a href="">Подраздел 232</a></li>  
           <li><a href="">Подраздел 233</a></li>  
          </ul>           
         </li>  

        </ul>         
       </li>  
       <li>  
        <a href="">Раздел3</a>  
        <ul>  
         <li>  
          <a href="">Подраздел31</a>  
          <ul>  

           <li><a href="">Подраздел 311</a></li>  
           <li><a href="">Подраздел 312</a></li>  
           <li><a href="">Подраздел 313</a></li>  
          </ul>           
         </li>  
         <li>  
          <a href="">Подраздел 32</a>  

          <ul>  
           <li><a href="">Подраздел 321</a></li>  
           <li><a href="">Подраздел 322</a></li>  
           <li><a href="">Подраздел 323</a></li>  
          </ul>           
         </li>  
         <li>  
          <a href="">Подраздел 33</a>  

          <ul>  
           <li><a href="">Подраздел 331</a></li>  
           <li><a href="">Подраздел 332</a></li>  
           <li><a href="">Подраздел 333</a></li>  
          </ul>           
         </li>  
        </ul>         
       </li>  

      </ul>      
     </li>  
     <li><a href="">Ссылка4</a></li>  
     <li><a href="">Ссылка5</a></li>  
</ul>

2) Стили в Css сайта:  

[code][spoiler=Спойлер]#menu, #menu ul {  
     margin: 0;  
     padding: 0;  
     list-style: none;  
}  

#menu {  
     width: 100%;  
     margin: 60px auto;  
     border: 1px solid #222;  
     background-color: #111;  
     background-image: -moz-linear-gradient(#444, #111);  
     background-image: -webkit-gradient(linear, left top, left bottom,from(#444), to(#111));  
     background-image: -webkit-linear-gradient(#444, #111);  
     background-image: -o-linear-gradient(#444, #111);  
     background-image: -ms-linear-gradient(#444, #111);  
     background-image: linear-gradient(#444, #111);  
     -moz-border-radius: 6px;  
     -webkit-border-radius: 6px;  
     border-radius: 6px;  
     -moz-box-shadow: 0 1px 1px #777;  
     -webkit-box-shadow: 0 1px 1px #777;  
     box-shadow: 0 1px 1px #777;  
}  

#menu:before,  
#menu:after {  
     content: "";  
     display: table;  
}  
#menu:after {  
     clear: both;  
}  
#menu {  
     zoom:1;  
}  

#menu li {  
     float: left;  
     border-right: 1px solid #222;  
     -moz-box-shadow: 1px 0 0 #444;  
     -webkit-box-shadow: 1px 0 0 #444;  
     box-shadow: 1px 0 0 #444;  
     position: relative;  
}  
#menu a {  
     float: left;  
     padding: 12px 30px;  
     color: #999;  
     text-transform: uppercase;  
     font: bold 12px Arial, Helvetica;  
     text-decoration: none;  
     text-shadow: 0 1px 0 #000;  
}  
#menu li:hover > a {  
     color: #fafafa;  
}  
*html #menu li a:hover { /* IE6 only */  
     color: #fafafa;  
}  

#menu ul {  
     margin: 20px 0 0 0;  
     _margin: 0; /*IE6 only*/  
     opacity: 0;  
     visibility: hidden;  
     position: absolute;  
     top: 38px;  
     left: 0;  
     z-index: 9999;  
     background: #444;  
     background: -moz-linear-gradient(#444, #111);  
     background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
     background: -webkit-linear-gradient(#444, #111);  
     background: -o-linear-gradient(#444, #111);  
     background: -ms-linear-gradient(#444, #111);  
     background: linear-gradient(#444, #111);  
     -moz-box-shadow: 0 -1px rgba(255,255,255,.3);  
     -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
     box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
     -moz-border-radius: 3px;  
     -webkit-border-radius: 3px;  
     border-radius: 3px;  
     -webkit-transition: all .2s ease-in-out;  
     -moz-transition: all .2s ease-in-out;  
     -ms-transition: all .2s ease-in-out;  
     -o-transition: all .2s ease-in-out;  
     transition: all .2s ease-in-out;  
}  
#menu li:hover > ul {  
     opacity: 1;  
     visibility: visible;  
     margin: 0;  
}  
#menu ul ul {  
     top: 0;  
     left: 150px;  
     margin: 0 0 0 20px;  
     _margin: 0; /*IE6 only*/  
     -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);  
     -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);  
     box-shadow: -1px 0 0 rgba(255,255,255,.3);  
}  
#menu ul li {  
     float: none;  
     display: block;  
     border: 0;  
     _line-height: 0; /*IE6 only*/  
     -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;  
     -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;  
     box-shadow: 0 1px 0 #111, 0 2px 0 #666;  
}  
#menu ul li:last-child {  
     -moz-box-shadow: none;  
     -webkit-box-shadow: none;  
     box-shadow: none;  
}  
#menu ul a {  
     padding: 10px;  
     width: 130px;  
     _height: 10px; /*IE6 only*/  
     display: block;  
     white-space: nowrap;  
     float: none;  
     text-transform: none;  
}  
#menu ul a:hover {  
     background-color: #0186ba;  
     background-image: -moz-linear-gradient(#04acec,  #0186ba);  
     background-image: -webkit-gradient(linear, left top, left bottom,from(#04acec), to(#0186ba));  
     background-image: -webkit-linear-gradient(#04acec, #0186ba);  
     background-image: -o-linear-gradient(#04acec, #0186ba);  
     background-image: -ms-linear-gradient(#04acec, #0186ba);  
     background-image: linear-gradient(#04acec, #0186ba);  
}  

#menu ul li:first-child > a {  
     -moz-border-radius: 3px 3px 0 0;  
     -webkit-border-radius: 3px 3px 0 0;  
     border-radius: 3px 3px 0 0;  
}  
#menu ul li:first-child > a:after {  
     content: '';  
     position: absolute;  
     left: 40px;  
     top: -6px;  
     border-left: 6px solid transparent;  
     border-right: 6px solid transparent;  
     border-bottom: 6px solid #444;  
}  
#menu ul ul li:first-child a:after {  
     left: -6px;  
     top: 50%;  
     margin-top: -6px;  
     border-left: 0;  
     border-bottom: 6px solid transparent;  
     border-top: 6px solid transparent;  
     border-right: 6px solid #3b3b3b;  
}  
#menu ul li:first-child a:hover:after {  
     border-bottom-color: #04acec;  
}  

#menu ul ul li:first-child a:hover:after {  
     border-right-color: #0299d3;  
     border-bottom-color: transparent;  
}  
#menu ul li:last-child > a {  
     -moz-border-radius: 0 0 3px 3px;  
     -webkit-border-radius: 0 0 3px 3px;  
     border-radius: 0 0 3px 3px;  
}


3) Подключаем на странице, где размещено меню: 
Код
 
  • Страница 1 из 1
  • 1
Поиск:

***/****
Администратор online
Администратор offline