Випадаюче меню javascript

55

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

Для роботи нам знадобиться всього один 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>

НАВЕДІТЬ КУРСОР НА ШАПКУ ДЛЯ ПЕРЕГЛЯДУ ДЕМО

Ну і нарешті, для досягнення працездатності меню нам важливо помістити між тегами наступний код:

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

Цим кодом підключаємо таблицю стилів і сам скрипт меню. Обов’язково не забуваємо про шляхи до файлів. Як я вже говорив, це меню легко налаштувати під себе, потрібно лише трохи повозитися з CSS кодом.
Все дуже просто, як кажуть: «головне було б бажання».

Завантажити

Джерело: http://ruseller.com/

На цьому все. Удачі!

З Повагою, Андрій .

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