Створюємо горизонтальне меню, що випадає за допомогою CSS

У даній статті я розповім як зробити горизонтальне меню, що випадає з використанням CSS і JavaScript. Розмітка заснована на маркованих списках і підтримує один рівень вкладеності. Вкладене меню за допомогою CSS трансформується в меню, що випадає, що з'являється при події onmouseover. Інтерфейс меню стилізований в зовнішньому файлі стилів. Також ви можете змінити зображення стрілки, яке означає, що у головного пункту меню є підрозділи.

Приклад



Дивитися приклад


Інструкція по встановленню


Крок 1: додайте наступний код в секцію <head> Вашого HTML файлу:


 


<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />

<script type=”text/javascript” src=”csshorizontalmenu.js”>


/***********************************************


* CSS Horizontal List Menu-by JavaScript Kit (www.javascriptkit.com)


* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/


* This notice must stay intact for usage


* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more


***********************************************/


</script>


 

У ньому містяться посилання на два зовнішніх файлу і 3 Картіка. Скачайте їх (правий клік та виберіть "Зберегти як"):




Крок 2: Додайте наступний HTML код, в якому і міститься саме меню:


<div class=”horizontalcssmenu”>


<ul id=”cssmenu1″>


<li style="border-left: 1px solid #202020;"> <a href="#"> Home </ a> </ li>


<li><a href=”#”>Free JS</a></li>


<li><a href=”#”>JS Tutorials</a></li>


<li><a href=”#”>References</a>


    <ul>


<li> <a href="#"> JS Reference </ a> </ li>


<li> <a href="#"> DOM Reference </ a> </ li>


<li> <a href="#"> CSS Reference </ a> </ li>


    </ul>


</li>


<li><a href=”#”>web Tutorials</a></li>


<li><a href=”#”>Resources</a>


    <ul>


<li> <a href="#"> Dynamic HTML </ a> </ li>


<li> <a href="#"> Coding Forums </ a> </ li>


    <li><a href=”#”>CSS Drive</a></li>


    <li><a href=”#”>CSS Library</a></li>


<li> <a href="#"> Image Optimizer </ a> </ li>


<li> <a href="#"> Favicon Generator </ a> </ li>


    </ul>


</li>


</ul>


<br style=”clear: left;” />


</div>


Ось і все! Ви можете "тюнінгувати" механізм меню, редагуючи файл csshorizontalmenu.js

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*