Создание плавающего HTML меню с использованием jQuery и CSS

jQuery

На связи Андрей Бернацкий.

С данной статьей мы открываем новый раздел на нашем блоге. Данный раздел будет называться jQuery.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую скачать исходный код, чтоб он у Вас был под рукой.

Также результат того, что мы будем делать, Вы можете посмотреть здесь.

Для всех, кто имеет дело с длинными веб-страницами и кому необходимо прокрутить в верх страницы к меню, есть хорошая альтернатива: плавающее меню, которое перемещается при прокрутке страницы. Это делается с помощью HTML, CSS и JQuery, и полностью совместимо с W3C.

Что мы строим

В этой статье описывается, как создать «плавающее меню» с использованием HTML, CSS и JQuery. Подчеркиваю, плавающее меню остается видимым, даже если вы прокрутите вниз веб-страницу. Они анимационные, поэтому движутся вверх и вниз при прокрутке окна браузера, вверх или вниз. Я собираюсь показать вам, как сделать плавающим меню с помощью JQuery и CSS, и мы надеемся, что появятся новые ученики JQuery:D.

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

jQuery
jQuery

Шаг 1

Давайте начнем с HTML разметки для приятного меню, состоящего из трех суб-меню:

<div id="floatMenu">
        <ul>
            <li><a href="#" onclick="return false;"> Home </a></li>
        </ul>

       <ul>
            <li><a href="#" onclick="return false;"> Table of content </a></li>
            <li><a href="#" onclick="return false;"> Exam </a></li>
            <li><a href="#" onclick="return false;"> Wiki </a></li>
        </ul>

        <ul>
            <li><a href="#" onclick="return false;"> Technical support </a></li>
        </ul>
    </div>

Это основа разметки, которую мы будем использовать. Основную часть в этом небольшом коде выполниет

в строке 01, который инкапсулирует все меню. Три списка используются только для демонстрации структуры, которая может быть изменена в соответствии с вашими потребностями. В этом случае, есть три раздела в меню, что представлено тремя ненумерованными списками.

Это дело привычки, но я отключаю клик по ссылке (href =»#»). Чтобы быть уверенным, что клик по ссылке не отправит к началу страницы, всегда можно поставить OnClick = «Return FALSE;» в <a href>. Этот метод позволяет добавить пункт в меню функций, таких как lightboxing — то, что заставляет страницу остаться на своем нынешнем вертикальном положении, когда пользователь кликает по ссылке меню.

Шаг 2

Теперь нам нужны некоторые правила CSS для оформления и позиционирования меню. (Я использовал сброс CSS Эрика А. Мейера «CSS Reset», поэтому нет margin:0 или padding:0 у элемента ul):

body {
    background-color:#000;
    height:2000px;
    color:#ccc;
    font:10px &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, &quot;Trebuchet MS&quot;, verdana, sans-serif;
}
#floatMenu {
    position:absolute;
    top:150px;
    left:50%;
    margin-left:235px;
    width:200px;
}
#floatMenu ul {
    margin-bottom:20px;
}
#floatMenu ul li a {
    display:block;
    border:1px solid #999;
    background-color:#222;
    border-left:6px solid #999;
    text-decoration:none;
    color:#ccc;
    padding:5px 5px 5px 25px;
}

Высота body (строка 03, выше) была установлена только для получения достаточного места для нашего меню для прокрутки вверх и вниз нашей страницы. Она должна быть удалена в реальной странице. Две другие вещи должны быть приняты обязательно position:absolute (строка 08) и left:50% (строка 10), оба они в #floatMenu (строка 07), выше.

Атрибут "position" используется, когда нужно удалить элемент из потока документа и установить его в точном месте на вашей странице. Если вы используете функцию масштабирования текста в браузере, элемент с абсолютным позиционированием не будет двигаться, даже если текст вокруг него увеличивается в размерах.

Атрибут "left" используется для позиционирования конкретного Div-а по горизонтали. Значение должно быть определено в процентах в том случае, если мы хотим центрированный дизайн. С 50% значением, левая сторона ячейки расположена в средней части страницы. Чтобы расположить его слева или справа, мы должны использовать атрибут «margin-left» (строка 11), с отрицательным значением смещения влево и положительным для смещения с правой стороны.

Другие элементы в таблице стилей управляют визуальным дизайном.

Шаг 3

Теперь у нас есть меню из трех пунктов, появляющееся в верхнем правом углу страницы. Для повышения эффекта наведения у пунктов меню, давайте добавим классы menu1, menu2 и menu3 для каждого пункта соответственно (для каждого элемента <ul>). У нас будет 3 различных суб-меню благодаря трем элементам <ul>. Код является модификацией кода HTML показанного в шаге 1:

 <div id="floatMenu">
       <ul class="menu1">
           ...
       </ul>

      <ul class="menu2">
          ...
       </ul>

       <ul class="menu3">
         ...
       </ul>
   </div>

Теперь давайте определим некоторые CSS эффекты наведения, которые будут различными для каждого пункта меню.

 #floatMenu ul.menu1 li a:hover {
        border-color:#09f;
    }
    #floatMenu ul.menu2 li a:hover {
        border-color:#9f0;
    }
    #floatMenu ul.menu3 li a:hover {
        border-color:#f09;
    }

Теперь каждый пункт меню будет отображаться различным цветом при наведении указателя мыши на пункт меню. Если вы хотите, вы также можете добавить правила для других состояний ссылок с помощью псевдоклассов :link, :visited, :hover и :active. Порядок, в котором вы должны написать к ним можно легко запомнить так: LOve и HAte, где заглавные буквы представляют собой первую букву каждого пункта.

Шаг 4

У нас есть приятные глазу меню, и мы можем остановиться на этом, но мы хотим плавающее меню, так что пришло время добавить jQuery. Вам необходимо загрузить библиотеку jQuery и Dimensions плагин. Этот плагин будет использован для захвата информации об окне браузера (ширина, высота, прокрутки и т.д.). Вы можете связать библиотеку и плагин jQuery с вашим HTML файлом в разделе <head> …</ head>. Только не забудьте изменить URL пути, в соответствии с теми, которые соответствуют размещению jQuery библиотеки на вашем сервере.

 
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>

Нам понадобится небольшой пользовательский код jQuery, так что начинаем новый раздел <script>, также в рамках части <head> …</ head> Вашего HTML документа:

  
<script language="javascript">
...
</script>

Добавьте следующий код jQuery внутри <script> раздела:

$(document).ready(function(){
        // code will go here
    }); 

$ (document). ready () функция аналогична window.onload, но улучшенная. С window.onload функцией, браузер должен ждать, пока вся страница (DOM and отображение) не загрузится. С функцией $(document). Ready () браузер лишь ждет, пока не будет загружен DOM, что означает, что jQuery может начать манипуляции элементами раньше.

Шаг 5

Нам нужен просмотрщик для события «прокрутка страницы». Наш пользовательский jQuery сценарий теперь выглядит следующим образом:

	$(document).ready(function(){
        $(window).scroll(function () { 
            // code will go here
        });
    }); 

Просмотрщик события находиться в режиме ожидания определенного события. Для нашей страницы – это прокрутка вверх и вниз.

Шаг 6

Поскольку наше меню будет «плавать» пока страница прокручивается, мы должны отслеживать его первоначальное положение. Вместо жесткого кодирования в jQuery, мы будем читать это положение с помощью Dimensions плагина jQuery. Мы будем делать то же самое с названием нашего меню. Давайте добавим два определения переменных (Строки 01, 02), так что наш код выглядит так:

var name = "#floatMenu";
 var menuYloc = null;

 $(document).ready(function(){
     menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
     $(window).scroll(function () {
         // code will go here
     });
 });

Строки 01 и 02 определяют переменные "name" и "menuYloc". Строка 05 устанавливает значение "menuYloc". Переменная «name» будет использоваться для ссылки на наше плавающее меню. "MenuYloc" переменная будет содержать оригинальные вертикальные позиции нашего меню.

Давайте посмотрим, какие значения menuYloc устанавливаются в линию 05. Это заявление является примером мощной функции-сцепления в jQuery. Сначала считается значение атрибута "top" из правил CSS нашего элемента меню (которое является "150px", в шаге 2). Затем убираем "px" в конце, так как нам нужна только "150". Чтобы сделать это, jQuery вызывает функции .CSS ("top") находит первое значение атрибута top в меню. (Этот атрибут был установлен в строке 09 кода в шаге 2, выше). Будет получено значение "150px". Потом функция .IndexOf () находит, где начинается "px" в "150px", и функция .substring () гарантирует, что мы сохраняем все перед "px". Функция .ParseInt () возвращает строку "150" в качестве целого числа.

Шаг 7

Сейчас мы пришли к интересной части этой статьи: анимировать меню сделать его "плавующим". Для этого нам необходимо определить, насколько страница прокручивается в пиксельном измерении. Мы имеем исходное расположение меню, хранящееся в переменной "menuYloc". Нам необходимо смещение полосы прокрутки, которое мы можем получить командной $ (document). ScrollTop (), определенной в Dimensions плагине JQuery. После захвата смещения можно добавить анимационную команду. Строки 07 и 08 ниже, показывается новый код:

var name = "#floatMenu";
   var menuYloc = null;

   $(document).ready(function(){
       menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
       $(window).scroll(function () {
           var offset = menuYloc+$(document).scrollTop()+"px";
           $(name).animate({top:offset},{duration:500,queue:false});
       });
   });

Переменная "offset", в строке 07 выше, содержит разницу между первоначальным расположением меню (menuYloc) и выделяет значение ($ (document). ScrollTop ()), в пиксельном измерении. Чтобы сделать его рабочим, как правило CSS, мы добавляем необходимые единицы измерения, "px", после числового значения. Теперь мы можем применить вертикальное смещение, рассчитать позицию в меню, и таким образом заставить его двигаться.

Чтобы сделать так, чтобы все это лучше смотрелось, давайте использовать варианты анимации jQuery’s. У нас хранится название меню в переменной "name" и мы можем обнулить его в случае необходимости, использовать его вместе с функцией .Animate (). Функция анимации требует два параметра: (1) свойства стиля, и (2) свойства анимации. В этой статье нам просто нужно анимировать CSS свойство "top", но чтобы указать дополнительные параметры, отделяйте каждую пару свойство: значение запятой (,).

Мы используем здесь два параметра. "duration" является длиной анимации в миллисекундах, а "queue" является списком всех позиций, когда мы хотим, чтобы наш объект был анимированным. Поскольку мы лишь хотим оживить наш объект в месте установки (текущее положение прокрутки браузера), мы установили "queue" на ложь.

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки: , , ,

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

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

Комментарии (18)

  1. westa

    Здорово, всегда мечтала научиться делать такое, спасибо!

  2. Александр

    Сказка, а не меню!

  3. Марина

    Здравствуйте Андрей и Виктор, у вас льется как из рога изобилия. Не успеваю переваривать, большое спасибо. Даете много и получите еще больше. Духовный закон сеяния и жатвы!

  4. elena

    Спасибо, Андрей! Личнол мне действительно понравилось. С уважением. Елена Владиславовна.

  5. Ольга

    Ох, ребята! Какие вы молодцы! Конечно нужен такой раздел. А в Джумлу можно такую менюшку вставить? А в Вордпресс?
    Побольше пишите про подобные вкусняшки — очень понравилось!

  6. Нина

    Здравствуйте! Конечно нужен такой раздел. Жду с нетерпением. В восторге от курса. Счастлива, что не пропустила. Спасибо! Так держать!

  7. Leuss

    ура! получилось)))

  8. Игорь

    Добрый день!
    Эта менюшка работает при обязательном использовании jQuery ?
    Я пытаюсь загрузить исходный html файл в браузере, но почему-то не получается.
    Менюшка появляется, все стили к ней применяются, но менюшка статична, не реагирует на прокрутку.
    В чем может быть проблема?

  9. Сергей Лобов

    Здравствуйте, Виктор и Андрей! Огромное спасибо Вам за Вашу работу! Очень полезные материалы. Но вот, у меня к Вам один вопрос. У меня не получается работа Меню-аккордеона и плавающего меню вместе на одной странице. Это, вообще возможно? И, если да, то подскажите, пожалуйста, что я, возможно, делаю не так, если у меня меню работает без проблем, а «аккордеон» постоянно в разложенном виде, не сворачивается? Буду очень благодарен Вам за помощь!!!

  10. Иван

    Здравствуйте, хочу сказать спасибо за работу! Но у меня возникла проблема : я поместил 2 таких меню на одной странице, с двух сторон контента, но в итоге анимировано(прокручивается вниз) только одно из двух меню. Подскажите, пожалуйста, есть ли решение моей проблемы?

  11. разработчик сайтов на joomla

    спасибо за стаью
    полезная

  12. john9

    Возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон?

    • Andrey Bernacki

      На чистом CSS такое не сделаешь. Можно попытаться спозиционировать картинку абсолютно и указать ей размеры в процентах, ко всем вложенным блокам так же применить позиционирование. Таким образом можно добиться подобного эффекта, но работать он будет на разных размерах экрана криво.

  13. Диляра

    Спасибо Вам огромное!!! это просто ПРАЗДНИК какой-то!)))

  14. Славянск-на-Кубани

    Спасибо, то что нужно!

  15. seeply

    долго ломал голову, как же, всё-таки обратиться к яндексу, чтобы найти этот эффект. спасибо, всё описано достаточно подробно, чтобы я смог сам прикрутить такую менюшку.

  16. Игорь

    Добрый день! Скажите и помогите! Как сделать это плавающее меню, но только с таким условием: меню весит от верха на 100px, крутанули вниз страницу на 50px, меню попрежнему остаётся висеть (теперь уже от верха на 50px), крутанули вниз страницу на 200px и ниже, теперь меню прилипло к самому верху. по принципу того что сдесь internet-technologies.ru/articles/article_1028.html слева. Буду крайне благодарен! Спасибо!

  17. Роман

    Привет в исходник забыли положить js, а статья очень полезная, спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree