• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Красивого оригинальное раздвижного меню для фото
Красивого оригинальное раздвижного меню для фото
Kosten
Четверг, 14 Февраля 2013 | Сообщение 1
Онлайн
Администраторы
Сообщений:44356
Награды: 70


Красивого оригинальное раздвижного меню для фото. Это меню предназначено для картинок - фотографий. И тематика для этого меню не каждая подойдет. Для картинок оно в самый раз подойдет.
Код прописываем там где будит находится меню.
Код
<link href="http://zornet.ru/ZORNET/pictureMenu.css" rel="stylesheet" type="text/css">  
<script src="http://zornet.ru/ZORNET/pictureMenu.js" type="text/javascript"></script>  
<script type="text/javascript">  
       $(document).ready(function() {  
           $(".MainMenu4").pictureMenu({  
      animateTime: 400,             // The duration of the animations  
               menuHeight: 160,              // The height of the menu (usually the same as the height of the images)  
               menuWidth: 50,                // The length of a menu item (useMenuWidth must be true)  
               menuWidthHover: 50,           // The length of the inactive menu items  
               menuActiveWidth: 250,         // The length of the active menu items (useMenuActiveWidth must be true)  
               menuInactiveHide: 0.6,          // The opacity of the inactive menu items  
               menuBorder: 1,              // The Border between the menu items  
               menuAutoOpen: 15,              // Menu item that should be open  
               subMenu: ".submenu",          // Selector of the submenu  
               fillColor: "#000000",            // Color of the menu  
               useMenuWidth: true,           // If true: use custom menuWidth. If false: use calculated menuWidth  
               useMenuActiveWidth: true,    // If true: use custom menuActiveWidth. If false: use calculated menuActiveWidth  
               leaveActiveOpen: true,       // If true, active menu item stay's open after mouse leaves  
               debug: true                  // Turn on or off the debugger    
           });  
       });  
</script>  
<style>  
h1 {font-family: Times New Roman, Times, serif; font-size:15pt; color:#0066CC; text-align:center;}  
</style>  

</head>  
<body style="background:#FFFFFF; text-align: justify;">     

                   <div class="MainMenu4">  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-1.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-1.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                     <li><a href="">Пункт 3</a></li>  
                     <li><a href="">Пункт 4</a></li>  
                     <li><a href="">Пункт 5</a></li>             
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-2.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-2.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                     <li><a href="">Пункт 3</a></li>  
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-3.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-3.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-4.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-4.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                     <li><a href="">Пункт 3</a></li>  
                     <li><a href="">Пункт 4</a></li>  
                     <li><a href="">Пункт 5</a></li>    
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-5.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-5.png">  
                           <ul class="submenu light">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                           </ul>  
                       </div>  
                         <div>  
                           <img src="http://zornet.ru/ZORNET/menu-6.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-6.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                           </ul>  
                       </div>  
                         <div>  
                           <img src="http://zornet.ru/ZORNET/menu-7.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-7.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                     <li><a href="">Пункт 3</a></li>  
                           </ul>  
                       </div>  
                        <div>  
                           <img src="http://zornet.ru/ZORNET/min.jpg">  
                           <img src="http://zornet.ru/ZORNET/min8.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/umor9.jpg">  
                           <img src="http://zornet.ru/ZORNET/umor9.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                           </ul>  
                       </div>  
                          <div>  
                           <img src="http://zornet.ru/ZORNET/menu-8.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-8.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                     <li><a href="">Пункт 3</a></li>  
                     <li><a href="">Пункт 4</a></li>  
                     <li><a href="">Пункт 5</a></li>    
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-9.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-9.png">  
                           <ul class="submenu dark">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                     <li><a href="">Пункт 3</a></li>  
                     <li><a href="">Пункт 4</a></li>  
                     <li><a href="">Пункт 5</a></li>    
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-10.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-10.png">  
                           <ul class="submenu dark">  
                     <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>  
                       </div>  
                         <div>  
                           <img src="http://zornet.ru/ZORNET/menu-11.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-11.png">  
                           <ul class="submenu light">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                     <li><a href="">Пункт 3</a></li>  
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-12.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-12.png">  
                           <ul class="submenu light">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                           </ul>  
                       </div>  
                       <div>  
                           <img src="http://zornet.ru/ZORNET/menu-13.jpg">  
                           <img src="http://zornet.ru/ZORNET/text-13.png">  
                           <ul class="submenu light">  
                     <li><a href="">Пункт 1</a></li>  
                     <li><a href="">Пункт 2</a></li>  
                     <li><a href="">Пункт 3</a></li>  
                     <li><a href="">Пункт 4</a></li>  
                     <li><a href="">Пункт 5</a></li>    
                           </ul>  
                       </div>              
                   </div>  
<script type="text/javascript">  
var pageTracker = _gat._getTracker("UA-5399114-15");  
pageTracker._initData();  
pageTracker._trackPageview();  
</script></td>  <!--Раздвижное меню-->  
     </tr>  
</table>
Прикрепления: 4838836.jpg (49.6 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Красивого оригинальное раздвижного меню для фото
  • Страница 1 из 1
  • 1
Поиск: