Как показывает статистика первые 20 секунд взаимодействия посетителя с вашим сайтом определяют, останутся ли они на нем или уйдут. Это означает, что вы должны следовать общей практики проектирования и положить все там, где пользователь ожидает его видеть. Важной частью этого процесса является проста в использовании меню навигации.
В этом уроке мы собираемся сделать стильный CSS + XHTML навигацию с помощью JQuery библиотеки. Меню выглядит стильно и просто!
Шаг 1 - XHTML
Код XHTML является простым и очень любимый для поисковых систем.
index.html
<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
</div>
При навидении курсором на раздел меню фон будет плавно менятся с черного на светлый.
Стильная навигация меню с JQuery
Шаг 2 - JQuery
Как вы можете видеть на рисунке выше, мы собираемся, клонировать набор ссылок определено в нашей XHTML странице (темные) и назначать им hoverMenu CSS класс, который плавно подымает их выше по умолчанию.
Эта стратегия имеет много преимуществ - во-первых, сохраняет чистый XHTML, потому что вы не должны добавлять эти ссылки вручную на странице, а во-вторых, гарантия того, что у вас будет рабочей навигации независимо от включенного или выключенного javascript в браузере.
Теперь давайте посмотрим, что происходит в нашем script.js.
script.js
$(document).ready(function(){
// executed after the page has finished loading
$('#navigationMenu li .normalMenu').each(function(){ // for each menu item
// create a duplicate hyperlink and position it above the current one
$(this).before($(this).clone().removeClass().addClass('hoverMenu'));
});
$('#navigationMenu li').hover(function(){ // using the hover method..
// we assign an action on mouse over
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
// the animate method provides countless possibilities
},
function(){
// and an action on mouse out
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);
});
});
Здесь в общем-то и происходит клонирование и при наведении меню как бы убирается вверх.
Шаг 3 - CSS
И вот мы на последнем шаге нашего урока. Давайте посмотрим на наш файл CSS стилей.
demo.css
/* Page styles */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ /* resetting some elements for better browser compatibility */
margin:0px;
padding:0px;
}
body{ /* styling the body */
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:12px;
}
/* Navigation menu styles */
ul{ /* the unordered list */
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul li{
border:1px solid #444444;
display:inline-block; /* changing the display property */
float:left; /* floating the list items to the left */
height:25px;
list-style-type:none; /* disabling the list icon */
overflow:hidden; /* hiding the overflowing content */
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* removing the underline text-decoration */
}
/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:5px 10px;
display:block;
}
/* styles that are assigned individually */
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:url(img/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:white;
background:url(img/dark_bg.gif) repeat-x #444444;
}
Вуаля =) Меню готово.