Главная » Javascript » Выпадающее меню на javascript.

Выпадающее меню на javascript

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

Для его использования нам понадобится всего один файл. Это выпадающее меню очень просто редактируется,
 
Выпадающее меню
 

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

Как Вы смогли убедиться всё прекрасно работает, а рассмотрев все составляющие данного меню, надеюсь поймете, как отредактировать код меню и вписать его в свой сайт.

Первым делом посмотрим на HTML код самого меню:
 

<div id="hit_area" onmouseover="toggleDown();"></div>
   <div id="menu_holder">
      <div id="nav">
           <ul>
           <li><a href="http://dbmast.ru/">Блог</a></li>
           <li>2210media</li>
           <li><a href="http://www.digg.com">Digg</a></li>
           <li><a href="http://www.cssmania.com">CSS Mania</a></li>
           <li><a href="http://www.kirupa.com">Kirupa</a></li>
           </ul>
      </div>
 </div>

 
Теперь сам принцип работы. Мы видим что меню помещено в слой под названием с id="hit_area". Этот слой имеет условие, при наведении на него запускать работу javascript. В таблице каскадных стилей для этого div-а установлено значение высоты 120px. Это значит, что как только мышка переходит в эту зону, меню появляется, опускаясь вниз из-за верхней границы страницы.

Весь остальной контент страницы помещен в div-контейнер с id="hit_area2". И как только мышка переходит туда, меню плавно скрывается.
 

 <div id="hit_area2" onmouseover="toggleUp();">
 <div id="content">
   <h1>НАВЕДИТЕ КУРСОР НА ШАПКУ ДЛЯ ПРОСМОТРА ДЕМО</h1>
 </div>
 </div>

 
Ну и наконец, для достижения работоспособности меню нам важно поместить между тегами <head></head> следующий код:
 

<script type="text/javascript" src="hide_menu.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />

 
Этим кодом подключаем таблицу стилей и сам скрипт меню. Обязательно не забываем про пути к файлам. Как я уже говорил, это меню легко настроить под себя, нужно лишь немного повозиться с кодом.
Все очень просто, как говориться: «главное было бы желание».

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

На этом всё. Удачи!

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Дмитрий:

    Отключаем скрипты в браузере. И ничего не видим. Меню не работает. Решение нуждается в доработке.

    Ответить
    • driver:

      Дмитрий

      Отключаем скрипты в браузере

      Для чего отключать скрипты, разве что в целях призрачной безопасности при серфинге, но тогда это совсем другая история. Из названия статьи видно, что меню построено именно с использованием javascript

      C отключенными javascript , конечно меню не будет работать, как и весь сайт станет больше походить на текстовую мешанину.

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru