Креативная навигация при помощи CSS и jQuery.

23. Сен, 2009 Комментариев 2

Креативная навигация

Одно время, в поисках вдохновения, я занимался тем , что серфил по интернету . Уделяя внимание сайтам сделанным на Flash. В процессе этих блужданий я натолкнулся на пару сайтов, которые привлекли меня некоторыми решениями в плане дизайна навигационных элементов . Нет, я вовсе не большой фанат анимационных элементов навигации. Просто меня привлекла идея результат. Для имитации Flash я решил использовать CSS стили совместно с jQuery.

Шаг 1. Структура меню.

Эта часть достаточно проста. В этом шаге мы будем делать структуру нашего меню, будем создавать , так сказать, каркас. Вот примерный код (ссылки поставите сами):

[codesyntax lang="html4strict" lines="normal" container="pre_valid" strict="yes" title="Структура меню."]

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

[/codesyntax]

Шаг 2. Стиль – CSS

В этом шаге мы создадим стиль для нашего меню. В данном примере у нас каждый блок реализован техникой маскировки. Более подробно вы увидите на рисунке.

Навигация начало.Унас небыло дублирующих тэгов <span> в шаге 1. Мы их добавим позже средствами jQuery.

[codesyntax lang="css" title="Стиль"]

ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;  /*–Important – Masking out the hover state by default–*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span { /*–The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag–*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px; /*–Vertical alignment of text–*/
}
ul#topnav a{ /*–This is basically the hover state of navigation–*/
color: #555;
background-position: left bottom;
}
ul#topnav span{ /*–Default state of navigation–*/
background-position: left top;
}

[/codesyntax]

Шаг 3. Анимация.

Первым делом нужно подгрузить jQuery.

Предоставлю вам выбор. Вы можете скачать jQuery с их сайта и разместить на своем хостинге. Или же вы можете подключить его с сайта Google, следующим образом:

[codesyntax lang="javascript"]

<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>

[/codesyntax]

Как вы можете видеть, мы дублировали тэги <span>, тем самым сделав анимацию в 40 пикселей.

Навигация в процессеНижеследующий скрипт содержит комментарии, показывающие действия jQuery:

[codesyntax lang="javascript"]$(document).ready(function() {

$(“#topnav li”).prepend(“<span></span>”); //Throws an empty span tag right before the a tag

$(“#topnav li”).each(function() { //For each list item…
var linkText = $(this).find(“a”).html(); //Find the text inside of the <a> tag
$(this).find(“span”).show().html(linkText); //Add the text in the <span> tag
});

$(“#topnav li”).hover(function() {    //On hover…
$(this).find(“span”).stop().animate({
marginTop: “-40″ //Find the <span> tag and move it up 40 pixels
}, 250);
} , function() { //On hover out…
$(this).find(“span”).stop().animate({
marginTop: “0″  //Move the <span> back to its original state (0px)
}, 250);
});

});[/codesyntax]

В результате у нас получится следующее.

ПОСМОТРЕТЬ ДЕМО.

Постовой:

Грамотный и качественный ремонт компьютеров от профессионалов в сжатые сроки и за доступные деньги это реальность.

WEB и SEO, Дизайн
, , ,