Вертикальное меню с помощью CSS и MooTools

В сегодняшнем уроке Вы узнаете как сделать красивое вертикальное меню, которое занимает очень мало места.

Для осуществления поставленой задачи мы будем использовать фреймворк MooTools.

demosourse

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

<script type="text/javascript" src="mootools.svn.js"></script>
      <script type="text/javascript">
      window.addEvent('domready', function(){
      //-vertical
  
      var mySlide = new Fx.Slide('v-menu2');
      mySlide.hide(); 
      $('toggle').addEvent('click', function(e){
      e = new Event(e);
      mySlide.toggle();
      e.stop();
      });
 }); 
  </script>

Тут все стандартно - подключаем фреймворк и функцию меню.

Вот так выглядит HTML демо версии меню:

<a href="#" id="toggle" class="button"><span>Нажмите здесь</span></a>
  <div style="clear:both">
  <ul id="v-menu2" class="v-menu">
  <li><a href="p1.html">Technology</a></li>
  <li><a href="p2.html">Design</a></li>
  <li><a href="p3.html">Css Gallery</a></li>
  <li><a href="p4.html">Entertainment</a></li>
  <li><a href="p5.html">Programming</a></li>
  </ul>
</div>

Ничего необычного! Все оформлено в виде списка.

И внешний вид меню придает следующий код таблицы стилей:

<style type="text/css">
  body{font-family:Arial, Helvetica, sans-serif; font-size:13px;}
  /* -------------------------------------------------------- */
  /* BUTTON													*/
  .button{

background:url(img/button.png)  -32px right no-repeat;
color:#FFFFFF;
clear:both;
display:block;
float:left;
font-size:13px;
font-weight:bold;
height:31px;
line-height:31px;
width:auto;
margin-right:30px;
}
a.button {
text-decoration:none;
}
.button span {
background:url(img/button.png) left top no-repeat;
display:block;
height:31px;
line-height:31px;
padding-left:10px;
padding-right:8px;
margin-right:20px;
}
/* -------------------------------------------------------- */
/* MENU														*/
.v-menu{
border:solid 1px #7F9FBF;
width:200px;
clear:both;
}
ul.v-menu, .v-menu li{
padding:0; 
margin:0;
list-style:none;
}
ul.v-menu{
clear:both;
margin-top:6px;
padding:6px 10px;
}
.v-menu li a{
color:#555555;
font-weight:bold;
display:block;
border-top:solid 1px #DEDEDE;
padding:4px;
text-decoration:none;
}
.v-menu li a:hover{
color:#999999;
}
</style>

Для построения данного меню требуется 1 рисунок, который находится в исходниках.

Спасибо за внимание! На сегодня все, но с завтрашнего дня Вас ждет очень много уроков :) Всем успехов!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.woork.blogspot.com
Перевел: Максим Шкурупий
Урок создан: 1 Июня 2009
Просмотров: 70540
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

^ Наверх ^