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


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

1301
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 25
Скрипты и модификации для Ucoz 2110
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
  • invitesystem написал:
  • Скачал архив, залил сайт, но проблема с кодом для вставки в конструктор шаблонов. Какие-то в нём знаки вопроса и без обязательного $POWERED_BY$
  • Marishka написал:
  • Можно, включите фантазию. Бесплатно никто ничего делать не будет.... Данный скрипт то написали так как попросили happy
  • BLAzER написал:
  • А на условных операторах это не сделать?
  • Вовчик написал:
  • Кто-то недавно об этом спрашивал
    Последние темы
    Опрос
    226
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: