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


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

1313
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 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: