Навигация
Главное меню Система uCoz Все для PhotoShop Counter-Strike SOFT и Games
Фильмы
Категории
Шаблоны [22]
Скрипты [7]
Иконки групп [26]
Кнопки [10]
Add сайт в писковики [0]
Добавлено

[Боевики]
Битва проклятых | 2013 | HD720 | Любительское (двухголосое) (83)

[Фантастика]
Обливион | 2013 | HD720 | Дублированное [лицензия] (6)

[Фантастика]
Темный рыцарь: Возрождение легенды (2012) (1)

[Комедии]
Секс ангелов / El sexo de los angeles (2012) hd-720 (1)
Опрос
Какая Карта вам нравиться?
Всего ответов: 2736
Главная » Файлы » Система uCoz » Скрипты

Интересное меню на CSS и jQuery
[ · Скриншот ] 22.01.2012, 23:30

Выпадающее меню с плавным эффектом появления подпунктов и фоновым изображением для них.
Установка:
Ставим код в head :

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

<link rel="stylesheet" href="http://webo4ka.ru/Ucoz5/style_interecnoe_menu_CSS_jQuery.css" type="text/css" media="screen"/>  
<script type="text/javascript" src="http://webo4ka.ru/Ucoz5/jquery.easing_interecnoe_menu_CSS_jQuery.js"></script>  

  <script>  
  $(function() {  
  $('#navigation > div').hover(  
  function () {  
  var $this = $(this);  
  //$this.find('.images').fadeIn();  
   
  $this.find('a.menu').removeClass('menu').addClass('hovered');  
   
  $this.find('.images').stop().animate({  
  'width' :'230px',  
  'height' :'390px',  
  'opacity' :'1.0'  
  },400,'easeOutBack',function(){  
   
  $(this).parent().find('div').fadeIn('fast');  
  });  
  },  
  function () {  
  var $this = $(this);  
   
  $this.find('div').fadeOut(500);  
  //$this.find('.images').hide();  
  $this.find('a.hovered').removeClass('hovered').addClass('menu');  
   
  $this.find('.images').stop().animate({  
  'width' :'100px',  
  'height' :'0px',  
  'top' :'0px',  
  'left' :'0px',  
  'opacity' :'0.9'  
  },600,'easeOutBack');  
  }  
  );  
  });  
  </script>
///////////////////////////////////////////////////////////////////////////////////////////////////////////

Ставим туда куда вам надо:

///////////////////////////////////////////////////////////////////////////////////////////////////////////

<div class="total_images" id="navigation">

<div class="eachs" id="link1">

<a href="#" class="menu" style=" width:94px;">Скрипты</a>

<img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="140" height="140" class="images"/>

<div>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">JSON</a></li>
</ul>
</div>
</div>

<div class="eachs" id="link4">

<a href="#" class="menu" style=" width:150px;">Ещё скрипты</a>

<img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="140" height="140" class="images"/>

<div>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">JSON</a></li>
</ul>
</div>
</div>


<div class="eachs" id="link2">

<a href="#" class="menu" style=" width:114px;">Скриптики</a>

<img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="160" height="199" class="images"/>

<div>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">JSON</a></li>
</ul>
</div>
</div>


<div class="eachs" id="link3">

<a href="#" class="menu" style=" width:100px;">Скрипты</a>

<img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="160" height="199" class="images"/>

<div>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">JSON</a></li>
</ul>
</div>
</div>

<div class="eachs" id="link5">

<a href="#" class="menu" style=" width:120px;">PCVECTOR</a>

<img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="160" height="199" class="images"/>

<div>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">JSON</a></li>
</ul>
</div>
</div>


<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />

</div>

///////////////////////////////////////////////////////////////////////////////////////////////////////////

Категория: Скрипты | Добавил: EclipsE
Просмотров: 787 | Загрузок: 0 | Комментарии: 3 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Среда
04.02.2026
14:12


Мониторинг


Мониторинг серверов CS 1.6
Серверы Counter-Strike 1.6
сервера cs 1.6 steam
CS 1.6 Сервера
Наши Сылки
Titanik-pro в Vkontakte
Titanik-pro в Steam
Отправь Бесплатно СМС
mts beeline megafon
tele2 tele2 skylink
kyivstar life ukrmts
Проверка
Статистика
Кто сегодня был?  

EX-Steam_ONLINE.3DN.Ru © 2011-1013