CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

18

Выдвигающаяся панель на MooTools

Jemand 12090 ,
JavaScript

Замечательная выдвигающаяся панель на MooTools. Такую панель можно использовать для контактной форма, формы входа, музыкального плеера, и т.д. и т.п.
1. CSS

*{
	margin: 0;
	padding: 0;
	}
a:link, a:visited {
	color: #0066CC;
	}
#toppanel {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	}
#slidepanel {
	background: #c8c4c0;
	border-bottom: 3px solid #9C8B7B;
	text-align: right;
	font-size: 14px;
	width: 100%;
	}
#slidepanel p {
	padding: 14px 90px 14px 0;
	}
#slidepanel p strong{
	text-transform: uppercase;
}
#toggle {
	font-size: 14px;
	display: block;
	width: 150px;
	height: 25px;
	float: right;
	color: #000;
	text-decoration: none;
	margin-right: 30px;
	font-weight: bold;
	background: #c8c4c0;
	padding-top: 8px;
	text-align: center;
	border: 1px solid #9C8B7B;
	text-transform: uppercase;
	}
.cont {
	font-size: 13px;
	font-family: Georgia;
	margin: 10px;
	padding: 10px 10px 1px 10px;
	background: #B9DAE9;
	color: #333;
	border: solid 2px #337FA1;
	}
.cont p {
	margin-bottom:10px;
	}

2. Подключение MooTools

<script type="text/javascript" src="mootools.js"></script>

Код подключения MooTools нужно разместить в <head> перед нижеследующим JS скриптом.
Скачать MooTools можно здесь.
3. JavaScript

<script type="text/javascript">
window.addEvent('domready', function() {
	var myVerticalSlide = new Fx.Slide('slidepanel');
	myVerticalSlide.hide();
	$('toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});
});
 </script>

JS код размещаем перед закрывающим тегом </head>
4 HTML

<div id="toppanel">
	<div id="slidepanel">
		<p><strong>» Выдвигающаяся панель на Mootools</strong><br />
	</div>
	<a href="#" id="toggle">Панель</a>
</div>

Post Scriptum
Данная панель может выдвигаться как над содержимым сайта, так и вместе с ним. Для того, чтобы панель сдвигалась вместе с содержимым сайта, нужно из HTML и CSS кода убрать все упоминания о блоке <div id="toppanel">.
Так же, панель может выдвигаться и убираться не при клике по кнопке, а при наведении на неё курсора мыши, для этого нужно заменить представленный выше JS код на нижеследующий

<script type="text/javascript">
window.addEvent('domready', function() {
    var myVerticalSlide = new Fx.Slide('slidepanel');
    myVerticalSlide.hide();
    $('toggle').addEvents({
        'mouseenter': function(){
            myVerticalSlide.toggle();
        },
        'mouseleave': function(){
            myVerticalSlide.toggle();
        }
    });
});
 </script>

Демо

Рекламная пауза

» 18 комментариев

  1. На моём сайте два фрейма, а в первом фрейме в выдвигающемся окне я разместил ссылки (навигацию по сайту), которые я назначил для открытия в другом фрейме (target=”window1″), но страницы открываются совсем в другом, новом окне (вроди target=”_blank”)

  2. извините, ошибка была у меня, в теге frame в документе с фреймами задал два разных атрибута name

  3. Пробую подключить не Блогрре но не знаю как справится с mootools.js может что посоветуете?

  4. вы наверное не в курсе в Блогерре нет доступа к корневому каталогу. То есть выложить я его mootools.js не могу.

  5. верстка уехала

  6. Если пользователь открывает окошко возможно ли что бы при обновлении страницы запоминалось его положение?

  7. Спасибо за урок!
    Но у меня проблема, я уже использую на странице муутулс, другой версии, как мне их в кучу то слепить?
    Ссылку давать на страницу?
    Спасибо

  8. Подскажите пожалуйста как сделать на однои странице несколько несколько таких блоков? весь код перерыл…


Оставить комментарий