» »

Навигационное меню на Jquery для сайта


Навигационное меню на Jquery для сайта

У этого меню есть два варианта с анимацией затмения и без неё, какой вариант выбрать решать Вам. jQuery или же просто на CSS - выбор за вами. Примечательно что данное меню лучше всего смотрится на сайтах с тёмным дизайном и безусловно с эффектом. Что по своему дизайн и стилистике и здесь нужно добавить саму форму, то можно поставить на любую тематику. При наведение вы видите на изображение будет уникально красивый эффект, что на темном сайте очень заметно будет. И здесь можно сделать вывод, на темный ресурс больше подойдет. Но если ставить на светлый, так как это не секрет. что такая гамма цвета подойдет на белый фон, то можно немного стили поменять под свою стилистику сайта.

Перейдём к установке:

Разметка HTML. любой из кодов вставляем в " страницы сайта в самый верх или туда где хотите видеть меню.

Для варианта с анимацией затемнения:

Код
<ul id="menu">  
   
  <li id="button01" class="selected"><a href="#"><img src="images/nav_btn01.png" alt="Главная" /></a></li>  
  <li id="button02"><a href="#"><img src="images/nav_btn02.png" alt="Форум" /></a></li>  
  <li id="button03"><a href="#"><img src="images/nav_btn03.png" alt="Блоги" /></a></li>  
  <li id="button04"><a href="#"><img src="images/nav_btn04.png" alt="Файлы" /></a></li>  
  <li id="button05"><a href="#"><img src="images/nav_btn05.png" alt="Справка" /></a></li>  
   
  </ul>

Для варианта без javascript:

Код
<div id="holder">  
   
  <ul id="menu">  
   
  <li id="button01" class="selected"><a href="#">Главная</a></li>  
  <li id="button02"><a href="#">Форум</a></li>  
  <li id="button03"><a href="#">Блоги</a></li>  
  <li id="button04"><a href="#">Файлы</a></li>  
  <li id="button05"><a href="#">Справка</a></li>  
   
  </ul>  
   
  </div>


Теперь вам нужно вставить дизайн CSS в самый низ стилей CSS. Обратите внимание, что каждый идет под своим стилей и вы можете выбрать. ТО ЕСТЬ ЕСЛИ ВЫ ВЫБРАЛИ МЕНЮ БЕЗ АНИМАЦИИ ЗАТМЕНИЯ ТО И CSS СТИЛЬ БЕРЁМ БЕЗ АНИМАЦИИ АНАЛОГИЧНО, ЕСЛИ ВЗЯЛИ С АНИМАЦИЕЙ МЕНЮ ТО И СТИЛИ CSS БЕРЁМ С АНИМАЦИЕЙ.

Для варианта с анимированным затемнением стиль такой:

Код
div#holder{  
  position: relative;  
  width: 960px;  
  margin: 0 auto;  
  text-align: left;  
}  
ul#menu{  
  position: absolute;  
  top: 220px;  
  left: 150px;  
  width: 672px;  
  height: 99px;  
  background-image: url(../images/nav_background.png);  
  background-repeat: no-repeat;  
  background-position: bottom;  
  list-style-type: none;  
  padding-left: 4px;  
}  
  ul#menu li, ul#menu li a{  
  display: block;  
  float: left;  
  width: 134px;  
  height: 99px;  
  }


Для варианта без javascript:

Код
div#holder{  
  position: relative;  
  width: 960px;  
  margin: 0 auto;  
  text-align: left;  
}  
ul#menu{  
  position: absolute;  
  top: 220px;  
  left: 150px;  
  width: 672px;  
  height: 99px;  
  background-image: url(../images/nav_background.png);  
  background-repeat: no-repeat;  
  background-position: bottom;  
  list-style-type: none;  
  padding-left: 4px;  
}  

  ul#menu li, ul#menu li a{  
  display: block;  
  float: left;  
  width: 134px;  
  height: 99px;  
  text-indent: -9999px;  
  }  
   
  ul#menu li#button01 a:hover, ul#menu li#button01.selected{background-image: url('../images/nav_btn01.png');}
  ul#menu li#button02 a:hover, ul#menu li#button02.selected{background-image: url('../images/nav_btn02.png');}
  ul#menu li#button03 a:hover, ul#menu li#button03.selected{background-image: url('../images/nav_btn03.png');}
  ul#menu li#button04 a:hover, ul#menu li#button04.selected{background-image: url('../images/nav_btn04.png');}
  ul#menu li#button05 a:hover, ul#menu li#button05.selected{background-image: url('../images/nav_btn05.png');}

Далее подключаем jQuery библиотеку и скрипт:

Код
var speed = 300 /* Скорость анимации в мс */  

$(document).ready(function(){  
   
  $("ul#menu li:not(.selected) a img").fadeTo(10, 0);  
   
  $("ul#menu li:not(.selected) a img").hover(function(){  
  $(this).stop().fadeTo(speed, 1.0);  
  },function(){  
  $(this).stop().fadeTo(speed, 0);  
  });  
   
});

На этом всё! В архиве присутствует два демо файла, так же все скрипты и CSS так же в архиве есть PSD данного меню
15.10.2016 Загрузок: 6 Просмотров: 723 Комментарий: (18)

Поделиться в социальных сетях

Материал разместил

Комментарий: 18
Angerfist
Angerfist 15.10.2016 20:361
0
Comment removed by the user
Kosten
Kosten 15.10.2016 20:452
0
Но если по судить на эффект, который идет светло желтый, то явно на темный дизайн подойдет, но про тематику говорить не чего. Просто немного удивляет, это сами разделы, не слишком широкие, хотя смотря у кого какой дизайн.
Сопрано
Сопрано 15.10.2016 20:503
0
Скажите, вообще как подключить jQuery библиотеку. Просто много где встречал, но вот не знаю, это в папку делать или что вообще в подключение идет?
Kosten
Kosten 15.10.2016 20:524
0
Мне понятней, когда есть стили и сам код, но иногда идет еще скрипт, что по библиотеке не известно.

Изображение немного поменял, изначально шло это, для понятие смысла.)

JoniDen
JoniDen 15.10.2016 21:1111
+1
Попробуй вот так:
Код
<script type="text/javascript">тут jQuery прописываем</script>
Kosten
Kosten 15.10.2016 21:2815
0
Все, сп, вопрос по установке решен.
Kosten
Kosten 15.10.2016 20:525
0
Angerfist, проясни ситуацию, на счет библиотеке. 07a
FeStemBer
FeStemBer 15.10.2016 20:566
0
Оно что тоже прозрачное, но так кажется.
Angerfist
Angerfist 15.10.2016 20:587
0
На ucoz она по умолчанию подключена, а если не подключена то неужели трудно в поиске набрать? Подключение JQuery
FeStemBer
FeStemBer 15.10.2016 21:008
0
Так это обычно в скрипт заключают библиотеку.
tsakonter
tsakonter 15.10.2016 21:2012
0
Не все так просто оказывается или что то не понимаю, причем здесь head написан, или его обязательно в него заключать.
Angerfist
Angerfist 15.10.2016 21:029
0
В скрипт библиотеку? no comment...
FeStemBer
FeStemBer 15.10.2016 21:1010
0
Но написано "Далее подключаем jQuery библиотеку и скрипт:" Но скрипт подключил, осталось jQuery - здесь как подключить?
Alkapone
Alkapone 15.10.2016 21:2513
+1
Всё верно как сказал JoniDen

Заключаем Jquery в теги <script> </script> и ставим его перед закрывающим тегом </head>
Kosten
Kosten 15.10.2016 21:2714
0
Alkapone, теперь понятно, просто сам не знал, а то бы вопросами засыпали.
1 2 »
avatar