Автор: Neutron. Рубрики: CMS. Опубликовано: июня 7, 2010

Так как дизайн у меня бесплатный, доработка всяких мелочей я с удовольствием беру на себя. Вчера добавил логотип и оформил анимацию навигационного меню (по рубрикам). Анимация смотрится очень классно. Обычный пользователь вообще может подумать, что это Flash элементы. Благодаря подключению CSS стилей, возможности изменять дизайн меню — очень велики. Я не стал изобретать что-то новое, и оставил цветовую гамму такую-же как и раньше. А сейчас я расскажу как сделать такую-же анимацию и тебе.

Подключаем :

В прошлых постах о jQuery я давал ссылку на официальный сайт, предлагая скачать ява-скрипт и положить себе на сервер. Совсем забыв о том, что его величество Google давным давно предлагает пользоваться его прямой ссылкой. Что и рекомендую делать тебе. В качестве и доступности серверов Google можно быть уверенным. Да и к тому же он отдает его в сжатом виде (на %50-70 легче).

Вызов элементов jQuery:

В 11-й и 15-й строке, цифры 250 отвечаю за скорость переходов от одного фона к другому. Стандартно стоит самый оптимальный вариант.

Вариант без фоновой картинки

HTML:

CSS:

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  and  share the same properties since the   will be a duplicate of the  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;
}

Вариант с фоновой картинкой

HTML:

К вышеупомянутому CSS стилю добавляем еще класс v2.

CSS:

ul#topnav.v2 span{
background: url(a_bg.gif) repeat-x left top;
}

ul#topnav.v2 a{
color: #555;
background: url(a_bg.gif) repeat-x left bottom;
}

Как видно, всё довольно просто, элегантно и красиво. Надеюсь ты найдешь этому хорошее применение. Приукрась свой сайт. ;)

Пиарю себя: Вчера открыл страничку с списком блогов для обмена постовыми. Добавь и ты свой блог!

Этот барабанщик нереально крут!

На правах рекламы!
Интернет-магазины везде! Вот например , — купи сумку не отрывая пятую точку от дивана. Удобно!

Вы можете пропустить до конца и оставить ответ. Pinging в настоящее время не доступны.

Есть 5 коммент. к “Красивое анимированное меню с помощью jQuery”

  1. Толик:

    Это то что я искал

  2. :

    Привет. Спасибо, отличный скрипт.

    Единственное что — хотелось бы заставить его "вращаться" в противоположную сторону, т.е. сверху-вниз, а не снизу-вверх. Если вы знаете как это сделать, буду очень признателен за совет.

    Заранее спасибо :)

  3. Юрий:

    Спасибо за статью!

    з.ы. а барабанщик и вправду нереально крут)) Узнаю себя в экстазе:)

  4. AndyPo:

    Спасибо. класный пример. а уж для 1-го собственного сайта вооощще…. Огром СПС.
    ? a_bg.gif где его взять??? чет у мя нет смены фона меню. иди это я корявый…
    Отдельный В А У!!!! барабанщику HE IS UNREAL *CRAZY*

  5. Дрю:

    Картинку в примере взять можно, ничего сложного.

Написать комментарий