Главная » 2011 » Октябрь » 22 » Горизонтальное меню как на сайте Rutube. (Javascript)
22.10.2011, 03:49

Горизонтальное меню как на сайте Rutube.





ДЕМО МАТЕРИАЛА

Установка:
Перед
Code
</head>

на нужных страницах ставим
Code
<link href="http://siteforsites.ru/demo/83/navigation.css" rel="stylesheet" type="text/css" />  
  <script type="text/javascript">  
  jQuery.noConflict();  
  jQuery(document).ready(function(){  
  // выкатка меню ещё  
  jQuery('#cat_more').hover(  
  function(){  
  jQuery('#submenu_more').stop(true, true).fadeIn(300);  
  },  
  function(){  
  jQuery('#submenu_more').stop(true, true).fadeOut(100);  
  }  
  );  
  // выкатка меню другое  
  jQuery('#cat_others').hover(  
  function(){  
  jQuery('#submenu_others').stop(true, true).fadeIn(300);  
  },  
  function(){  
  jQuery('#submenu_others').stop(true, true).fadeOut(100);  
  }  
  );  
  // выкатка меню кастинг ДОМ2  
  jQuery('#url_castings').hover(  
  function(){  
  jQuery('#submenu_dom2').stop(true, true).fadeIn(300);  
  },  
  function(){  
  jQuery('#submenu_dom2').stop(true, true).fadeOut(100);  
  }  
  );  
  });  
  </script>

Это туда где будет меню
Code
<div id="nav" class="block navigation">  
  <div class="corn_t"><div class="tl"></div><div class="tr"></div></div>  
  <div class="cont">  
  <table class="nav-cont" cellpadding="0" cellspacing="0">  
  <tr> <td id="cat_19"  
  class=" first">  
  <span class="firstcont">  
  <a title="Юмор" href="http://siteforsites.ru">  
  <var>Юмор</var>  
  </a> </span>  
  </td>  
  <td id="cat_5"  
  class="">  
  <span>  
  <a title="ТВ" href="http://siteforsites.ru">  
  <var>ТВ</var>  
  </a> </span>  
  </td>  
  <td id="cat_36"  
  class="">  
  <span>  
  <a title="Жесть" href="http://siteforsites.ru">  
  <var>Жесть</var>  
  </a> </span>  
  </td>  
  <td id="cat_7"  
  class="">  
  <span>  
  <a title="Мультфильмы" href="http://siteforsites.ru">  
  <var>Мультфильмы</var>  
  </a> </span>  
  </td>  
  <td id="cat_16"  
  class="">  
  <span>  
  <a title="Спорт" href="http://siteforsites.ru">  
  <var>Спорт</var>  
  </a> </span>  
  </td>  
  <td id="cat_6"  
  class="">  
  <span>  
  <a title="Музыка" href="http://siteforsites.ru">  
  <var>Музыка</var>  
  </a> </span>  
  </td>  
  <td id="cat_2"  
  class="preact">  
  <span>  
  <a title="Авто" href="http://siteforsites.ru">  
  <var>Авто</var>  
  </a> </span>  
  </td>  
  <td id="cat_item_8"  
  class="act pop-up">  
  <span>  
  <a title="Другое" href="javascript:void(0);">  
  <var>Другое</var>  
  </a> <div id="submenu_others" class="submenu double" style="display:none;"> [list] <li id="item_8_left_1" class="">  
  <a title="" href="http://siteforsites.ru">Новости</a>  
  </li> <li id="item_8_left_2" class="">  
  <a title="" href="http://siteforsites.ru">События</a>  
  </li> <li id="item_8_left_3" class="">  
  <a title="" href="http://siteforsites.ru">Игры</a>  
  </li> <li id="item_8_left_4" class="">  
  <a title="" href="http://siteforsites.ru">Животные</a>  
  </li> <li id="item_8_left_5" class="">  
  <a title="" href="http://siteforsites.ru">Природа и путешествия</a>  
  </li> <li id="item_8_left_6" class="">  
  <a title="" href="http://siteforsites.ru">Искусство и творчество</a>  
  </li> [/list] <ul class="right"> <li id="item_8_right_1" class="">  
  <a title="" href="http://siteforsites.ru">Наука и техника</a>  
  </li> <li id="item_8_right_2" class=" active">  
  <a title="" href="http://siteforsites.ru">Семья, дети, здоровье</a>  
  </li> <li id="item_8_right_3" class="">  
  <a title="" href="http://siteforsites.ru">Эротика</a>  
  </li> <li id="item_8_right_4" class="">  
  <a title="" href="http://siteforsites.ru">Разное</a>  
  </li> [/list] </div> </span>  
  </td>  
  <td id="http://love.rutube.ru"  
  class=" special">  
  <span>  
  <a title="Знакомства" href="http://siteforsites.ru" title="http://siteforsites.ru">  
  <var>Знакомства</var>  
  </a> </span>  
  </td>  
  <td id="/trailers"  
  class=" special">  
  <span>  
  <a title="Кино" href="http://siteforsites.ru">  
  <var>Кино</var>  
  </a> </span>  
  </td>  
  <td id="http://pogoda.rutube.ru"  
  class=" special">  
  <span>  
  <a title="Погода" href="http://siteforsites.ru" title="http://pogoda.rutube.ru">  
  <var>Погода</var>  
  </a> </span>  
  </td>  
  <td id="cat_item_12"  
  class=" pop-up last">  
  <span class="lastcont">  
  <a title="Ещё" href="javascript:void(0);">  
  <var>Ещё</var>  
  </a> <div id="submenu_others" class="submenu" style="display:none;"> <ul class="right"> <li id="item_12_left_1" class="">  
  <a title="" href="http://siteforsites.ru">Каналы</a>  
  </li> <li id="item_12_left_2" class="">  
  <a title="" href="http://siteforsites.ru">Ролики</a>  
  </li> <li id="item_12_left_3" class="">  
  <a title="" href="http://siteforsites.ru">Трансляции</a>  
  </li> <li id="item_12_left_4" class="">  
  <a title="" href="http://siteforsites.ru">Рейтинги</a>  
  </li> <li id="item_12_left_5" class="">  
  <a title="" href="http://siteforsites.ru" title="http://dom2.rutube.ru">Кастинг Дом-2</a>  
  </li> <li id="item_12_left_6" class="">  
  <a title="" href="http://siteforsites.ru">Все возможности</a>  
  </li> [/list] </div> </span>  
  </td>  
  </tr>  
  </table></div></div>

Ссылки меняем на свои
Материал взят с сайта infoscript.ru
Теги: Скачать Горизонтальное меню как на сайте Rutube.
Скачать "Горизонтальное меню как на сайте Rutube."
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://siteforsites.ru
Категория: JavaScript's | Просмотров: 2204 | Добавил: manikom-auto | Рейтинг: 4.0/1 |
Теги: сайте, Rutube., как, Горизонтальное, меню, на
Всего комментариев: 2
1 antisept -Infoscript Team-  (23.10.2011 09:57)
Аватар пользователя
Где архив с изображениями и css?

2 manikom-auto   (13.11.2011 08:13)
Аватар пользователя
Прошу прощения - щас добавлю mellow

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]