» »

Навигационное меню на 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 Загрузок: 4 Просмотров: 498 Комментарий: (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, теперь понятно, просто сам не знал, а то бы вопросами засыпали.
Angerfist
Angerfist 15.10.2016 21:5016
+3
Короче вопрос не сформулирован был, а фраза в описании "Далее подключаем jQuery библиотеку" лишняя (видимо для сайтов на других хостах), просто подключаем JS: из этого и вопрос был бы другим: как правильно подключить скрипт а не саму библиотеку.
Автор просто не заключил в теги

Код
<script>


и сразу все затупили). Неужели занимаясь вебом не один год, впервые подключаете скрипт в html таким образом? И кстати

Код
type="text/javascript"


это стандарт HTML 4, в современной разработке атрибут type не обязателен.
А ёмаё библиотека jQuery по сути это просто набор функций, которые написаны на том же js и расширяет возможности чтобы не создавать лишнего кода или создание дополнительных расширений и плагинов, которые потом легко можно добавлять на страницы несколькими строками кода.
Всё молчу как рыба об лёд 11a
Kosten
Kosten 15.10.2016 23:0517
0
Angerfist, если брать себя,то очень много для себя узнал, просто библиотека не заключена была, а на многих блогах и сайтах так написано, что вот вам и подключайте.
Angerfist
Angerfist 16.10.2016 11:5918
0
Библиотека заключена))) вот ты молодчик, JS скрипт не заключён в теги был, jquery просто одно из составляющих для укорачивания кода скрипта и она уже подключена. Я повторюсь что саму библиотеку скриптов подключают на тех хостах где её нет по умолчанию (вот и пишут что надо подключить), и то бывают варианты когда js не правильно работает из-за того что написан был под другую версию jquery.
avatar