Интересное меню на MooTools

Этот урок про создание интересного меню с помощью MooTools.

Результат данного урока - красивое функциональное меню, которое впишется в любой сайт.

demosourse

Для начала нам необходимо поместить этот код между тегами <head></head>.

<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 демо версии:

<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
Источник урока: www.tools.uvumi.com
Перевел: Максим Шкурупий
Урок создан: 28 Мая 2009
Просмотров: 48491
Правила перепечатки

5 последних уроков рубрики "Mootools"

  • Создание меню при помощи MenuMatic 0.68.3

    Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3

  • Анимированные закладки с использованием MooTools

    Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.

  • Выезжающая панель для сайта на Mootools

    Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели

  • Увеличение / Уменьшение текстовых полей с помощью MooTools

    Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.

  • Multi-Select c помощью MooTools

    В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.

^ Наверх ^