Всем привет, сегодня мы в пошаговом порядке
разберём очередное симпатичное навигационное меню.
Прежде, чем мы сможем создать эти опрятные функциональные возможности, мы создадим фундамент для основной работы. В вашем любимом кодовом редакторе, создайте ненумерованный список для своей навигации, затем импортируйте как jQuery, так и jQuery UI, через систему Google.
Шаг 1. Список
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>SpasticNav Plugin</title>
<link rel="stylesheet" href="
css/style.css" type="text/css"
media="screen" />
</head>
<body>
<div id="container">
<ul id="nav">
<li id="selected"><a href="#">Home</a></li>
<li><a href="#">About<
/a></li>
<li><a href="#">Blog<
/a></li>
<li><a href="#">More About
My Portfolio</a></li>
<li><a href="#">Contact<
/a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4/jquery.min.js"
type="text/javascript"></script>
<script
type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jqueryui/
1.7.2/jquery-ui.min.js"></script>
</body>
</html>
Отметьте, как мы сделали id="selected"
к странице.
Мы должны решить, как лучше всего осуществить функциональные возможности.
Чтобы учесть возможность многократного использования, мы упакуем этот небольшой подлинник в плагин:
$('#nav').spasticNav();
Так как мы решили построить плагин, давайте идти вперед и создадим новый файл и сошлемся на него. Мы назовем его jquery.spasticNav.js.
<script type="text/javascript"
src="js/jquery.spasticNav.js"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
Шаг 2. Плагин
(function($) {
//Теперь, мы назовем наш плагин
$.fn.spasticNav = function(options) {
//Теперь, когда мы назвали наш плагин,
следующий шаг должен создать варианты конфигурации.
options = $.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : '#0b2b61',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
var nav = $(this),
currentPageItem = $('#selected', nav),
blob,
reset;
// Теперь, когда мы объявили наши переменные,
давайте создадим фактическую копию, так сказать.
$('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = $('#blob', nav);
// Парения
$('li:not(#blob)', nav).hover(function() {
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
reset = setTimeout(function() {
blob.animate({
width : currentPageItem.outerWidth(),
left : currentPageItem.position().left
}, options.speed)
}, options.reset);
});
});
};
})
(jQuery);
Шаг 3. CSS
И наконец на последок мы подключаем CSS для
корректного отображения нашей меню.
Сначала давайте создадим элементы "nav" ul. Откройте свой style.css файл, и добавьте:
#nav {
position: relative;
background: #292929;
float: left;
}
Далее нам необходимо создать каждый пункт списка.
#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}
Проходя, мы затем должны выставить правила в пределах нашего навигационного меню, в частности ссылкам.
#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: left;
font-size: 30px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 45px;
width: 100%;
}
И не помешало бы тегам ul и li указать отступы
ul, li {
margin: 0; padding: 0;
}
Последний шаг:
#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top,
left bottombottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}
Ну вот и всё наше меню готово.