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

Дата публикации: 2009-10-30

jQuery

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

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

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

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

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

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

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

Что мы строим

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

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

Шаг 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>

<ul>

</ul>

<ul>

<li><a href="#" onclick="return false;"> Table of content </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 {

background-color:#000;

height:2000px;

color:#ccc;

font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", 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>

...

</ul>

...

</ul>

...

</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;
    }

#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>

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

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

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

...

</script>

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

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

$(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
        });
    });

$(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
     });
 });

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});
       });
   });

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.

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

Метки: JavaScript, css menu, css меню, html