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

Приклад



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


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


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


 


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

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


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


* CSS Vertical 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 код, в якому і міститься саме меню:


<ul id=”verticalmenu” class=”glossymenu”>


<li><a href=”#”>JavaScript Kit</a></li>


<li> <a href="#"> Free JavaScripts </ a> </ li>


<li> <a href="#"> JavaScript Tutorials </ a> </ li>


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


    <ul>


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


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


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


    </ul>


</li>


<li> <a href="#"> DHTML / CSS Tutorials </ a> </ li>


<li> <a href="#"> web Design Tutorials </ a> </ li>


<li><a href=”#”>Helpful 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>


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

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


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

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

Ваш отзыв

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

*

*