Уроки Фиксированное меню на JQuery
18 апреля 2015
5628
фиксированное меню, jquery

Фиксированное меню на JQuery

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Рассмотрим скрипт, который позволяет реализовывать фиксированное меню для сайта. В концепцию разработки данного скрипта, входит язык программирования JQuery, так как с помощью него можно не только зафиксировать меню, как обычно бывает при свойстве css fixed, но и при скроллинге страницы наверх, он будет гарантировано держать отступ от шапки, который Вы сможете прописать в файле js. Причем данная технология идеально подойдет для фиксированного меню, как нижнего, так и верхнего. 

 

Проверив скрипт на кроссбраузерность, выявлено, что он идеально работает на всех новых версиях, имеются затруднения у браузера Internet Explorer ранее 9 версии, но ничего удивительно тут нет, это свойственно старым браузерам.

Надеюсь, Вы уже давно пользуетесь новыми. 

 

Первая часть. Подключение стилей и js файлов.

 

Давайте первым делом подключим по стандарту все необходимые стили и добавим файлы js, которые требуются для данного скрипта. Сначала подключаем файл стилей demo.css.

 

<link type="text/css" rel="stylesheet" href="css/demo.css">

 

Затем подключаем библиотеку jquery-latest.min.js и файл menu.js, который будет отвечать за работоспособность отступов и стыков в меню, а также за исходное правильное положение, заданное по высоте.

 

<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

 

Вторая часть. Файл index.php

 

Тут все просто, выводим меню по стандарту через ul li и делаем оболочку блочным элементом div, который будет иметь идентификатор menu, взаимодействующий, полноценно с стилями и файлом menu.js.

 

<div id="menu">
<ul>
<li class="menuleft"><a href="http://roothelp.ru/">Главная</a></li>
<li><a href="http://roothelp.ru/news/">Новости</a></li>
<li><a href="http://roothelp.ru/users/">Авторы</a></li>
<li><a href="http://roothelp.ru/faq/">FAQ</a></li>
<li><a href="http://roothelp.ru/project/">О проекте</a></li>
</ul>
</div>

 

Третья часть. Файл demo.css.

 

Переходим к стилям фиксированного меню и прописываем основные свойства, которые должны идти обязательными! Во-первых, прописываем для идентификатора menu: фон, позицию и ширину. Во-вторых, все это выравниваем по центру и задаем высоту.

 

#menu {
	background:#ab4040;
	width:100%;
	position:fixed;
}

#menu ul{
	margin:0 auto;
	width:750px;
	height:40px;
}

 

Затем работаем с каждым элементом меню, а точнее с ссылками и прописываем им следующие свойства.

Отдельные свойства при наведении, рамки и прочее это уже для красоты и считаются необязательными.

 

#menu ul li {
	float:left;
	list-style:none;
	width:140px;
	text-align:center;
	border-right:1px inset #d0d0d0;
	height:40px;	
}

.menuleft{
	border-left:1px inset #d0d0d0;
}

#menu ul li a {
	line-height:40px;
	text-decoration:none;
	color:#ffffff;
}

#menu ul li:hover{
	box-shadow:0 1px 0 #ab4040;
	background:#f43e3e;
}

 

Четвертая часть. Файл menu.js.

 

Теперь у нас самое интересное. Будем фиксировать наше меню, на том уровне, там где оно нам потребуется. Пропишем переменную menu_height, в которой будем хранить высоту шапки нашего сайта. Это позволит при скроллинге страницы, точно фиксировать меню на нужном расстоянии от шапки сайта. В переменной element, мы храним свойства идентификатора menu и задаем свойство top, указывая, что меню будет сверху, и сравнивая с переменной menu_top, вычисляем нужное расстояние от шапки до меню. 

 

var menu_height = 100;
$(function(){
  $(window).scroll(function(){
      var menu_top = $(this).scrollTop();
      var element = $('#menu');
      if (menu_top < menu_height) {
       element.css('top', (menu_height-menu_top));
      } else {
       element.css('top', 0);
      }
   });
});			 

 

 

Надеюсь, я смог Вам помочь, то что Вы искали. Если же Вам нужно какое-то простое меню, то могу предложить допустим, многоуровневое меню на чистом CSS или создание простого меню для сайта на HTML и CSS, там все просто и возможно, оно Вам пригодится. Как говорится, выборов масса, но подойдет не все.

 

На этом я с Вами прощаюсь, до следующего материала. Всего Вам наилучшего! Удачных выходных!)





Роман Краутер