Красивое меню от ucoz-helps


Красивое меню от ucoz-helps

1283
4.6 из 10
Проголосовало: 6




Красивое меню при наведении на ссылку красивое заливание подробности на демо

В CSS:
Code

a.men:link {text-decoration:none; color: #e3e4ff; font-family: "Arial Black"; font-size: 10pt}  
  a.men:active {text-decoration:none; color: #e3e4ff; font-family: "Arial Black"; font-size: 10pt}  
  a.men:visited {text-decoration:none; color: #e3e4ff; font-family: "Arial Black"; font-size: 10pt}  
  a.men:hover {text-decoration:none; color: white; font-family: "Arial Black"; font-size: 10pt}


В Верх. часть сайта:
Code
<style type="text/css">  
  <style type="text/css">  
  h2 {clear:both;padding-top:20px;}  
  ul {list-style:none;margin:0;padding:0;}  
  li#menu{float:left;width:88px;margin:0;padding:0;text-align:center;}  
  li a {display:block;padding:5px 10px;height:100%;color:#3a3839;text-decoration:none;border-right:1px solid #3a3839;border-left:1px solid #3a3839;}  
  #a a {background:url(http://ucoz-helps.ru/uh-menu.jpg) repeat -20px 35px;}  
  </style>  
  </style>  

  <script type="text/javascript" src="http://ucoz-helps.ru/jquery.bgpos.js"></script>  

  <script type="text/javascript">  

  $(function(){  
  $('#a a')  
  .css( {backgroundPosition: "-20px 35px"} )  
  .mouseover(function(){  
  $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})  
  })  
  .mouseout(function(){  
  $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){  
  $(this).css({backgroundPosition: "-20px 35px"})  
  }})  
  })  
  $('#b a')  
  .css( {backgroundPosition: "0 0"} )  
  .mouseover(function(){  
  $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})  
  })  
  .mouseout(function(){  
  $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){  
  $(this).css({backgroundPosition: "0 0"})  
  }})  
  })  
  $('#c a')  
  .css( {backgroundPosition: "0 0"} )  
  .mouseover(function(){  
  $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})  
  })  
  .mouseout(function(){  
  $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})  
  })  
  $('#d a')  
  .css( {backgroundPosition: "0 0"} )  
  .mouseover(function(){  
  $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})  
  })  
  .mouseout(function(){  
  $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})  
  })  
  });  
  </script>


По месту вывода меню:
Code

<ul id="a">  
  <li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>  
  <li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>  
  <li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>  
  <li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>  
  <li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>  
  <li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>  
  <li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>  
  <li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>  
  </ul>
Автор публикации: Загрузка
Загрузка
sorokin_andrey, это его n материал
Источник: http://ucoz-helps.ru/
  • Всего комментариев: 8

HEADSHOT^_^
-1
HEADSHOT^_^ написал: Написано 27 Февраля 2012 в 10:15
Комментарий №8
квадратная вебочка.. sadwalk

HEADSHOT^_^
0
HEADSHOT^_^ написал: Написано 27 Февраля 2012 в 10:14
Комментарий №7
Страшное меню и да это на Mootools написано

POZ1TIV4IK
0
POZ1TIV4IK написал: Написано 26 Февраля 2012 в 04:11
Комментарий №6
Где-то я это уже видел(P.S помню где-то видел(и авторство не ваше было))

BLAzER
0
BLAzER написал: Написано 25 Февраля 2012 в 21:44
Комментарий №5
Сорь у меня чет вылезло я страницу обновил и комент 2 раза добавился

sorokin_andrey
+2
sorokin_andrey написал: Написано 25 Февраля 2012 в 21:31
Комментарий №4
Dimon_Kent,
Code
<ul id="a">
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
<li id="menu"><a href="/" class="men" title="описание">Ссылка</a></li>
</ul>

где ссылка это название а href="здесь ссылка на токорую переходить
dry

Dimon_Kent
-11
Dimon_Kent написал: Написано 25 Февраля 2012 в 21:04
Комментарий №3
Тупо

Dimon_Kent
-8
Dimon_Kent написал: Написано 25 Февраля 2012 в 21:03
Комментарий №2
А как зделать чтобы нажал и переместилось сразу туда куда надо Например я Написал Форум вместо (( ссылка )) а переходи тудаже где и нажал ну на главную страницу
(((((( angry angry angry angry

Dimon_Kent
-6
Dimon_Kent написал: Написано 25 Февраля 2012 в 20:30
Комментарий №1
Вау круто !!! +5 biggrin biggrin biggrin biggrin biggrin biggrin extrat pepsi partytime pioneer pray punk respect

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 9
    Гостей: 8
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: