Рассмотрим скрипт, который позволяет реализовывать фиксированное меню для сайта. В концепцию разработки данного скрипта, входит язык программирования 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, там все просто и возможно, оно Вам пригодится. Как говорится, выборов масса, но подойдет не все.
На этом я с Вами прощаюсь, до следующего материала. Всего Вам наилучшего! Удачных выходных!)