Создание красивого меню с помощью CSS3 и jQuery

Скидка на хостинг

Если Вам нужен качественный хостинг и Вы непротив сэкономить 10% на его покупке, то Вы можете воспользоваться моим специальным предложением по скидке на хостинг от компании Ютекс.

Узнать подробнее

Главная » Уроки » Рубрика Для сайта

Метки урока: jquery, css, меню, css3

Создание красивого меню с помощью CSS3 и jQuery

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

HTML разметка

<div class="lavalamp" >
<ul>
<li class="active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contacts</a></li>
<li><a href="">Back to Article</a></li>
<li><a href="">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

Как всегда, мы используем неупорядоченный список для меню. <div class="floatr"></div> - элемент, который будет подсвечивать выбранную ссылку.

CSS

Следующий отрывок кода используется для стилизации меню. В нем использованы несколько свойств CSS3, таких как border-radius, box-shadow, rgba и gradient.

.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
height: 18px;
}

Следующий код относится к каждому элементу меню:

ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}

ul li {
list-style: none;
float:left;
text-align: center;
}

ul li a {
padding: 0 20px;
text-align: center;
}

И последняя часть кода для подсветки:

.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}

Тут следует обратить внимание на свойства transition. C помощью их мы анимируем наш бегунок подсветки ссылок. Это свойство имеет следующий синтаксис:

transition: свойство продолжительность эффект;

Более подробно про это свойство можно прочитать тут.

JavaScript

Роль JavaScript в этом примере - это получение текущей позиции активного элемента и позиции мышки при наведении ее на наше меню. После определения позиций - необходимые css свойства вступают в силу и происходит анимация.

$(document).ready(function () {
//найти текущую позицию активного элемента
var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
var dwidth = $('.lavalamp li.active').width() + "px";
//присвоить эту позицию элеметку с подсветкой
$('.floatr').css({
"left": dleft+"px",
"width": dwidth
});
$('.lavalamp li').hover(function(){
var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
},
function(){
var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).siblings('li.active').width() + "px";
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
}).click(function(){
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
return false;
});
});

Для Вас также доступны другие цветовые решения данного меню:

.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), 
to(rgb(177,24,91)));
background : -moz-linear-gradient(top,rgb(190,64,120), rgb(177,24,91));
border: 1px solid #841144;

}

.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), 
to(rgb(7,165,187)));
background : -moz-linear-gradient(top, rgb(64,181,197), rgb(7,165,187));
border: 1px solid #2f8893;


}
.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), 
to(rgb(255,188,43)));
background : -moz-linear-gradient(top, rgb(255,199,79), rgb(255,188,43));
border: 1px solid #c08c1f;
}


.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), 
to(rgb(255,107,24)));
background : -moz-linear-gradient(top, rgb(255,133,64), rgb(255,107,24));
border: 1px solid #c04f11;
}

.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), 
to(rgb(54,54,54)));
background : -moz-linear-gradient(top, rgb(89,89,89), rgb(54,54,54));
border: 1px solid #272727;


}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}

Вот и все на сегодня! До новых уроков!

Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.insicdesigns.com

Рейтинг: 3.4

Урок создан: 17.2.2010 Просмотров: 17528 Правила перепечатки

Оценивать уроки могут только зарегистрированные пользователи

Если хотите не упустить данный урок, добавьте его в закладки

Пять последних добавленных уроков в рубрике Для сайта:

»Простая система комментирования с использованием AJAX
В данном уроке мы создадим простую систему комментариев с использованием AJAX. Система имеет интеграцию с gravatar.com и демонстрирует, как устанавливать эффективное взаимодействие между jQuery и PHP/MySQL с помощью JSON.

»Временнная шкала (PHP, CSS и jQuery )
Сегодня мы будем создавать прелестную временную шкалу для событий, которая будет похожа на временную шкалу Google, созданную на десятилетие компании.

»Динамическая секция ЧАВО с использованием jQuery, YQL и Google Docs
В данном уроке мы сделаем динамическую секцию ЧАВО. Скрипт, при помощи jQuery и YQL (Yahoo! Query Language - язык запросов Yahoo!) , будет вытаскивать содержимое электронной таблицы на вашем аккаунте Google Docs и использовать данные для наполнения секции ЧАВО вопросами и ответами.

»Простой способ использовать на сайте такой шрифт, какой хочется.
В данном уроке будет продемонстрировано, как использовать любой шрифт, какой пожелаете, в ваших веб приложениях.

»Слайдшоу с эффектом вертикального жалюзи
Это описание скрипта, который позволяет организовать слайдшоу с эффектом вертикальных жалюзи.

Зарегистрируйтесь, чтобы иметь возможность добавлять комментарии

Комментарии:

Автор: Sergyk (2010-07-19 17:38:49)

Под оперу можна как то сделать а то в opera 10.6 неправелно работает. выделение неправельно двигаеться

Автор: Scriptik (2010-06-18 12:56:38)

Знаю я, имел ввиду JS. Без Java (в браузере) вроде как, не будет работать и JS ( в коде). НеБот, теперь я то же врубился)

Автор: Сумрак (2010-04-14 12:54:23)

Scriptik, скажу по секрету (смотри ни кому не проболтайся!) JS и Java разные языки! ;)

Автор: НеБот (2010-03-21 12:42:05)

Scriptik, ты о чём вообще? Я имел что-то против JS и jQuery? Частично врубился в твоё сообщение раза с пятого.

Автор: НеБот (2010-03-21 12:25:36)

Scriptik, ты о чём вообще?

Автор: runner (2010-03-15 23:39:36)

подскажите плиз как всю эту красоту вставить в сайт на джумле?

Автор: roach (2010-03-05 22:28:46)

БОМБА

Автор: Scriptik (2010-03-02 12:00:44)

Кстати, проверил в Опере 10.50, не пашет так же.

Автор: Scriptik (2010-03-02 00:37:39)

НеБот, точно не бот? А это что: "$(document).ready(function () { //найти текущую позицию активного элемента var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left; var dwidth = $('.lavalamp li.active').width() + "px"; //присвоить эту позицию элеметку с подсветкой " и т.д. и т.п. ? Это JS, для дебилов, сразу скажу :) jQuery($) библиотека JS. Клоун, блин.

Автор: НеБот (2010-02-24 13:32:57)

Scriptik, здесь нет Java. А менюшка супер!

Автор: Alexsin (2010-02-20 03:19:49)

Кстати, существует версия данного плагина, построенная не на CSS3, а на файлах изображений. Плагин называется "LavaLamp".

Автор: Alexsin (2010-02-20 03:16:47)

Почти все уроки на этом сайте не сделаны авторами данного сайта, а просто переведены с других языков и размещены Вам (должен же сайт обновляться), соответственно за качеством не следят и зачем этот урок был сделан первоисточником тоже не известно. На CSS3 рано еще переходить, на сегодняшний примерно 15% если не меньше пользователей рунета имеют возможность насладится CSS3 (судя по статистике посещений крупных сайтов), соответственно спецификации CSS3 у других пользователей не работают, кроме того все многие используют все еще IE6, на котором CSS2 отображается не всегда корректно. P.S. не старайтесь использовать технологию которая только зародилась, подождите.

Автор: Scriptik (2010-02-19 19:30:20)

Да никто автору не хамит. Просто смысл этого меню без кроссбраузерности? И в топку, не в топку IE - он есть, и сидит на нем больше половины рунета. А это значит, что любой, уважающий себя сайтостроитель будет точить его и под осла. Хотя, учитывая нынешнее отношения к дизайну и правилам позиционирования, то под каждый сайт надо будет иметь по браузеру. Зачем тут Java? Кто прояснит? -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); // Тени border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; // Скругления углов -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204)); // Градиент С помощью этого можно сделать такое же меню, что логично, но без Java. Все выше перечисленное поддерживается не всеми браузерами. Так вот, вопрос, зачем тут Java, если нет кроссбраузерности?)

Автор: animhotep (2010-02-19 18:06:31)

граждане! да при чём сдесь опера то? в теме написано CSS3!! опера его поддерживает с версии 10.5 ИМХО рано его юзать, т.к еще на CSS2 толком не перешли

Автор: МаксимШкурупий (2010-02-19 16:48:52)

ВО нафлудили!! :) Ну не работает она в Опере - ну есть такие недостатки! Не обязательно каждому об этом высказываться)) Не подходит Вам - значит кому то подойдет!

Автор: TheIVA (2010-02-19 16:15:12)

Менюшка красивая. И урок полезный. Работаем с CSS 3, а остальные браузеры уже подхватят!

Автор: Alexxhub (2010-02-19 15:53:40)

И вопрос админам, почему мне не ответили на мое письмо по части того, как написать свой форум. Ведь могу предоставить материал, уже заколебался вам писать. Вот в обратной связи с пользователями не дотягиваете.

Автор: Alexxhub (2010-02-19 15:53:37)

В бете 10.5 оперы работает нормально, хотя мож я не уловил того, как все же должно выглядеть. Как я понял плавно перетекать как в лавовых лампах. К сожалению в последнем фоксе пока нет поддержки CSS3, но опера первый шаг сделала, так что ждем. За лисой не заржавеет. А урок полезен, позволяет познать больше новые особенности CSS 3 версии, тем более если вы до сих пор себе не скачали анлицкий справочник по нему. Про IE советую вообще забыть, ибо ущербный браузер не умеет работать даже с абсолютным позиционированием блоков относительно друг друга, несмотря на свою последнюю версию. Microsoft явно не торопится повернуться к пользователям и разработчикам сайтов лицом. И прекращайте оскорблять авторов своими хамскими высказываниями, т.к. урок если вы с него ничего не почерпнули еще не значит что плох, ищите просто сложнее уроки.

Автор: Игорь (2010-02-19 10:36:06)

Переводчик молодец !

Автор: Scriptik (2010-02-18 22:35:36)

Даааа, верстка на высоте... Сразу видно, мастер делал... Кроме Лисы, нигде не пашет. + где тут jQuery ? И зачем оно в меню?)) Вот это: -moz-border-radius : 8px; -webkit-border-radius : 8px; чисто для ФФ, и только Хром поддерживает. Не понимаю на что надеялся автор... Переводчику спасибо за старание.

Автор: kronosua (2010-02-18 22:15:51)

а навіщо тут jQery?

Автор: Сергей_Патин (2010-02-18 20:00:53)

Ребята, уважайте друг друга! Комментарии, содержащие оскорбления будут удаляться. О ком я говорю, тот знает.

Автор: Frey (2010-02-18 16:32:55)

используйте уже Хром, опера и тем более ИЕ - прошлый век. В Хроме все пучком.

Автор: Игорь (2010-02-18 15:00:06)

Как я понял разработчики зашифровали скрипт. Так чтоб в паять такое меню в какой нибудь движок по человечески не получиться.

Автор: ajan (2010-02-18 12:27:39)

и смылс писать 100000 раз что нет работает в опере и в ие

Автор: areku (2010-02-18 11:58:14)

да! Не работает Opera и Internet Explorer 7, а работает только FireFox!

Автор: anuar (2010-02-18 10:33:18)

Не пашет в Опере. ППЦ!

Автор: shoma (2010-02-18 08:06:03)

в след версиях оперы будет поддержка css3) так что скоро тоже будет все красиво отображатся

Автор: UncleNostra (2010-02-18 02:39:57)

В последнее время выкладываются неполноценные примеры, толку что он работает в Софари и т д Когда известно что самые популярные браузеры эт Опера ЕИ и Мозила Фаерфокс. Примеры почти бесполезны, тем более, что я приверженец Оперы.

Автор: SerZhik (2010-02-17 23:01:56)

у меня тоже в опере не работает(((

Автор: Serginho (2010-02-17 22:58:19)

я конечно могу понять что все жалуются про то что в опере не фурычит, но почему все время жалуются и на IE? искоренять надо этот браузер! просто забудьте что такой существует ;)

Автор: Игорь (2010-02-17 22:09:25)

В Опере вообще жесть. Короче нужно точно также только во Flash.

Автор: Игорь (2010-02-17 22:07:27)

В хроме отлично смотреться

Автор: TuxCod (2010-02-17 22:06:49)

В Opere не работает!

Автор: daksus (2010-02-17 21:01:35)

Красивее всего работает под сафари, нормально под фф, ие 8 и опера 10 через то самое место. Я уже писал но все же повторюсь, примеры выложенные на сайте бывает так и работают. Интересно узнать в чем причина? jQuery не дружит с этими браузерами или код примеров надо допиливать?

Автор: denisrem (2010-02-17 21:00:00)

по-моему, можно сделать проще... через css с картинами.. или я фишки не понял какойто..?

Автор: kopik (2010-02-17 20:58:43)

Надо проверять прежде чем людям показывать. Ни в Опере ни в ИЕ не работает!

Автор: Oleg (2010-02-17 20:18:56)

В Опере не работает, а в ИЕ вообще жесть...

Автор: Игорь (2010-02-17 20:12:00)

Всё разобрался!!!

Автор: Игорь (2010-02-17 20:07:04)

А java куда ставить? Я пробовал ставить на главную странице между тэгами Head но нефига не работает.

Автор: Magnum (2010-02-17 20:03:39)

Да вроде это было уже, нет ? Я помню, в это я уже играл... :) гонял курсоры по строчкам...

Автор: xeka (2010-02-17 19:54:28)

Ну и зачем оно нужно если там работает - там не работает?

Автор: daksus (2010-02-17 19:45:06)

В Опере часто какие то косяки с jQuery, во всяком случае у меня.

Автор: ajan (2010-02-17 19:36:59)

в опере не рбит

Автор: НикитаКратинов (2010-02-17 19:31:27)

Меню классное, но у у меня в Опере не работает.

Автор: Игорь (2010-02-17 19:22:25)

Вот мне это нужно! вот ещё бы сделать меню при медленном затухании кнопки.

Поиск по сайту

поиск

Блог на Wordpress

Если Вы давно мечтаете о создании собственного блога на движке Wordpress, то советую Вам обратить внимание на мой новый видеокурс "Wordpress - Профессиональный блог за один день". Это более 100 видеоуроков по всем аспектам создания и ведения своего блога на самом популярном движке в мире.

Узнать подробнее

Облако меток

timeline таймлайн временная шкала скрипт библиотека событие куки mvc массив xsl сервисы база данных cookie баннер тень mysql html5 центрирование joomla sql курсор css3 закладки oop wordpress часы пароль баги чат звезды ускорение twitter google maps html 5 прозрачность ie6 png seo gd library cookies rss рейтинг цитаты блог комментарии theme тема генератор captcha cycle z index позиционирование загрузка кеширование бегущая строка тест домен советы текст видео регистрация текстуры radikal.ru фото favicon слайдшоу карта лента загрузка файлов голосование опрос поля формы api чарты диаграммы mod rewrite календарь спрайты текстовое поле константа include защита multiple select htaccess выпадающие списки миниатюры сообщения чекбоксы новостной блок вкладки выезжающая панель форма шпаргалка обзоры таблица анимация верстка wysiwyg wysiwig cms faq уголок разное ссылки редакторы email mootools списки юзабилити модальные окна плагины web дизайн счетчик аудио flash ajax слайдер окна javascript html кодинг оптимизация шаблоны формы кнопка меню изображения фон подсказки css контактная форма php ротатор галерея jquery

Показать flash облако

Раскрутка

Меня часто спрашивают, как я раскручивал данный сайт?

Мой ответ таков. Для раскрутки данного сайта использовалась методика "Мастер план по раскрутке сайта", которая была предложена Юсуфом Губайдуллиным в начале 2009-го года.

Узнать подробнее

Ссылки от гугл