Этот урок про создание интересного меню с помощью MooTools. Результат данного урока - красивое функциональное меню, которое впишется в любой сайт.
Для начала нам необходимо поместить этот код между тегами
.
Code
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dropdown.css" />
<script type="text/javascript" src="js/mootools-for-dropdown.js"> </script>
<script type="text/javascript" src="js/UvumiDropdown-compressed.js"> </script>
<script type="text/javascript">
var menu = new UvumiDropdown('dropdown-demo');
</script>>
Тут все стандартно - подключаем фреймворк, таблицу стилей и функцию.
Ваше меню состоит из неупорядоченых списков, которые вложены друг в друга для создания выпадающих элементов. Структура очень проста, главное быть внимательным.
Вот так выглядит HTML демо версии:
Code
<ul id="dropdown-demo" class="dropdown">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#orders">Orders</a>
</li>
<li>
<a>Tools</a>
<ul>
<li>
<a href="#tools1">Tools 1</a>
</li>
<li>
<a>Tools 2</a>
<ul>
<li>
<a href="#tools4">Tools 4</a>
</li>
<li>
<a href="#tools5">Tools 5</a>
</li>
<li>
<a>Tools 6</a>
<ul>
<li>
<a href="#tools7">Tools 7</a>
</li>
<li>
<a href="#tools8">Tools 8</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#tools3">Tools 3</a>
</li>
<li>
<a href="#tools4">Tools 4</a>
</li>
</ul>
</li>
<li>
<a href="#stats">Stats</a>
</li>
<li>
<a href="#users">Users</a>
<ul>
<li>
<a href="#user1">User 1</a>
</li>
<li>
<a href="#user2">User 2</a>
</li>
<li>
<a href="#user3">User 3</a>
</li>
<li>
<a href="#user4">User 4</a>
</li>
</ul>
</li>
<li>
<a href="#sync">Sync</a>
</li>
</ul>
Источник: ruseller.com
