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

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

Теперь давайте определим некоторые 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

Подписаться

Поделиться

Метки: css menu, css меню, html, Javascript&Ajax