Меню для сайта с помощью jQuery

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

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

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

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

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

Меню для сайта с помощью jQuery

В сегодняшнем уроке мы создадим интересное меню с использованием jQuery.

Идея

Главная идея этого меню - это возможность подсветки при передвижении мышки по меню. Это будет выполнено с помощью возможностей jQuery.

HTML

Здесь используется обычный список. У него есть класс "group", так как это будет горизонтальный ряд и нам понадобится clearfix чтобы у него была высота.

<div class="nav-wrap">
 <ul class="group" id="example-one">
    <li class="current_page_item"><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
 </ul>
</div>

CSS

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

jQuery

Вот последовательность действий:

1. При загрузке страницы...
2. Задать переменные включая текущий левый отступ навигации
3. Настроить функцию resize
4. Добавить линию под меню
5. Задать позицию и ширину линии для текущего элемента
6. Также задать оригинальную ширину и позицию в качестве данных, чтобы их можно было анимировать.
7. При наведении, посчитать новую ширину и левую позицию и анимировать линию
8. При отводе мышки - вернуть анимацию на место.

$(function(){
    var $el, leftPos, newWidth,
        $mainNav = $("#example-one"),
        pageOffset = $mainNav.offset().left;

    // Fixing the offset if the window changes size
    $(window).resize(function() {
        pageOffset = $mainNav.offset().left;
    });

    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").offset().left - pageOffset)
        .data("origLeft", $magicLine.offset().left - pageOffset)
        .data("origWidth", $magicLine.width());

    $("#example-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.offset().left - pageOffset;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});

У данного меню проблемы с отображением в Опере. Пока нет вариантов исправления этого.

В исходниках и демо версии Вы также найдете еще один вариант меню. Можете и его использовать на Ваших сайтах.

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

Рейтинг: 4.25

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

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

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

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

»Делаем постоянные липкие заметки с использованием локального хранилища HTML5
Локальное хранилище HTML5 подобно куки, которое сидит на стероидах - это очень простой в использовании инструмент и, вместе с тем, очень мощный. В данном уроке мы создадим функционал "липких заметок", которые позволят посетителям использовать постоянные заметки при просмотре сайта.

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

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

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

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

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

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

Автор: durogon (2010-08-13 19:02:22)

Как эту менюшки к PHP прикрутить, что-то она не хочет ну никак вставляться

Автор: Sergyk (2010-07-19 13:13:14)

ЛЮДИ ПОДСКАЖИТЕ ТАКИЕ МЕНЮ ВОЗМОЖНО в php dceyenm в дату лайф шаблон?

Автор: preambula (2010-06-26 11:48:19)

IIIDimaIII Я предпочитаю MODx, правда надо знать PHP и MySQL, тогда на нем легко делается все что угодно, особенно легконатягивается дизайн. Если кроме цсс и хтмл ни чего не знаешь, делай на Joomla, только сайт будет шаблонным, но правда шаблонов для джумлы море. Кстати Евгений вроде уроки по Джумле выпустил.

Автор: Денис (2010-02-12 18:51:03)

to Владимир. Скрыть файл с видеосервера под шторками не получилось, но сть альтернативный вариант. Замените тамошний код индексной страници на такошний http://docs.google.com/Doc?docid= 0AZoQ0YCI4p5jZGRkaGpzZHdfMnNwbmhyZmdt&hl=ru (уберите пробел после знака "=")

Автор: IIIDimaIII (2010-02-12 16:53:52)

подскажите пожалуйста кто знает, какой движок желательно использовать для большого сайта. Начал делать в Wordpress но знаю может ли он тормозить, когда инфы будет больше.... За ранее Благодарен

Автор: Владимир (2010-02-12 13:03:52)

Здравствуйте У меня вопрос вот по этому уроку http://ruseller.com/lessons.php?rub=32&id=372 А задаю вопрос здесь по тому что страница Главная, вопрос топовый, народу больше ну и.т.д.) 1 Скажите как можно сделать чтоб открытие и закрытие шторы запоминалось браузером юзера, и при переходе на другую страницу они оставались в том же положении в котором он их оставил на предыдущей странице? 2 Как под эти шторы поместить плеер с видео скажем рутубовский, пробовал неоднократно и все время плеер был поверх всего? Этот вопрос меня интересует больше первого так как если это сделать не реально то тогда эти шторы мне вообще не нужны) P.S. Все это дело пытаюсь реализовать на CMS Dle, если это важно в моем вопросе Буду очень признателен если мой вопрос не про игнорируется и я получу ответ какой бы он не был, просто чтобы не ждать впустую. За ранее Благодарен за помощь и понимание, а также за красивый урок

Автор: МаксимШкурупий (2010-02-10 15:04:13)

а почитать в уроке слабо :) - У данного меню проблемы с отображением в Опере. Пока нет вариантов исправления этого.

Автор: volkodav (2010-02-10 11:07:32)

интересно, а можно ли интегрировать такое меню в DRUPAL?!

Автор: Alexxhub (2010-02-10 01:27:17)

В опере полная заливка вместо секционной. Сразу весь вид портится.

Автор: Sonic (2010-02-10 00:29:16)

В опере неправильно работает

Автор: Master (2010-02-09 21:55:38)

подскажите пожалуйста кто знает, как выводить код таким же разноцветным как здесь на сайте? я конечно не по теме, но все таки... пример: .nav-wrap { margin: 50px auto; background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; } #example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; } #example-one li { display: inline; } #example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; } #example-one li a:hover { color: white; } #magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

Автор: beluy (2010-02-09 21:32:01)

Супер оч красиво !

Автор: kickerps (2010-02-09 21:21:08)

вторая менюшка прикольная))

Автор: greka (2010-02-09 19:42:28)

Интересно )!

Автор: Женек (2010-02-09 18:43:42)

Интересненько...

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

поиск

Блог на 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-го года.

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

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