Замечательное выездное меню на MooTools

13 сентября 2010 года, Размещено в категории: jQuery / MooTools

Замечательное выездное меню на MooTools

Нашел замечательное меню сделанной с помощью фреймворка MooTools. Выездное боковое меню на MooTools является простым в реализации.

Принцип работы очень прост, есть кнопка, которая находится по центру со стороны экрана, при нажатии на кнопку, плавно выезжает меню, почему я это все описываю??Вы сами посмотрите демо и все поймете.

демо выездное меню на MooToolsскачать выездное меню на MooTools

Шаг 1 JavaScript:
Как всегда первым подключаем Фреймворк MooTools, который, кстати, прекрасно обрабатывается и Apple iPad, затем и сам плагин side-bar.js между тэгом <head></head>

<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+

В других версиях браузеров  меню на работоспособность не проверялось (возможно работает и в других версия).






3 комментария

  • 7 лет назад Ответить

    В хроме выездное меню гючит: сразу высунутое наполовину появляется…

  • 7 лет назад Ответить

    Этому меню уже столько лет, что даже не смешно. Нужно что-то реально новое.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы:

Метки: