Замечательное выездное меню на MooTools
13 сентября 2010 года, Размещено в категории: jQuery / MooTools
Нашел замечательное меню сделанной с помощью фреймворка MooTools. Выездное боковое меню на MooTools является простым в реализации.
Принцип работы очень прост, есть кнопка, которая находится по центру со стороны экрана, при нажатии на кнопку, плавно выезжает меню, почему я это все описываю??Вы сами посмотрите демо и все поймете.
Шаг 1 JavaScript:
Как всегда первым подключаем Фреймворк MooTools, который, кстати, прекрасно обрабатывается и Apple
<script src="js/mootools.js" type="text/javascript"></script> <script src="js/side-bar.js" type="text/javascript"></script> |
Шаг 2 HTML:
HTML конструкция нашего меню на MooTools.
<div id="sideBar"> <a id="sideBarTab" href="#"><img title="sideBar" src="images/slide-button.gif" alt="sideBar" /></a> <div id="sideBarContents" style="width: 0px;"> <div id="sideBarContentsInner"> <h2>side<span>bar</span></h2> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> <li><a href="#">Link Five</a></li> </ul> </div> </div> </div> |
Шаг 3: CSS:
body{ position:relative; paddign:0px; font-size:100%; } h2{ color:#FFFFFF; font-size:90%; font-family:arial; margin:10px 10px 10px 10px; font-weight:bold; } h2 span{ font-size:105%; font-weight:normal; } ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } li{ margin:0px 10px 3px 10px; padding:2px; list-style-type:none; display:block; background-color:#DA1074; width:177px; } li a{ width:100%; } li a:link, li a:visited{ color:#FFFFFF; font-family:verdana; font-size:70%; text-decoration:none; display:block; margin:0px 0px 0px 0px; padding:0px; width:100%; } li a:hover{ color:#FFFFFF; text-decoration:underline; } #sideBar{ position: absolute; width: auto; height: auto; top: 200px; right:-7px; background-image:url(images/background.gif); background-position:top left; background-repeat:repeat-y; } #sideBarTab{ float:left; height:137px; width:28px; } #sideBarTab img{ border:0px solid #FFFFFF; } #sideBarContents{ overflow:hidden !important; } #sideBarContentsInner{ width:200px; } |
В примере css код находится в файле index.html когда будите вставлять меню на свой сайт, не забывайте переносить css код в свой style.css файл.
Настройки меню (в файле side-bar.js):
var height=450; высота меню.
var width=200; ширина меню.
var slideDuration=1000; скорость выезда меню, чем меньше число тем быстрее.
Меню прекрасно работает в таких браузерах как:
IE6+ (IE7, IE8)
Firefox 3.0+
Opera 9.0+
Chrome 6.0+
В других версиях браузеров меню на работоспособность не проверялось (возможно работает и в других версия).
10 лет назад
В хроме выездное меню гючит: сразу высунутое наполовину появляется…
10 лет назад
Версия 6.0.472.55
10 лет назад
Этому меню уже столько лет, что даже не смешно. Нужно что-то реально новое.