В данном уроке пойдет речь о том, как с помощью jQuery сделать интересный эффект "швартовки" (docking).
Очень трудно объяснить словами суть урока - проще всего посмотреть демо версию.
После просмотра демо версии давайте определимся, что нам необходимо сделать:
1. Когда пользователь наводит на элемент меню, сабменю должно появиться слева направо и наложиться на содержание страницы.
2. Когда пользователь убирает мышку с панели, сабменю должно заехать обратно.
3. Если пользователь нажимает на "Закрепить", панель должна зафиксироваться в текущем положении и содержание страницы должно сместиться вправо.
4. Если пользователь наживает "Убрать", панель заезжает обратно.
Но это еще не все. Я хотел сделать возможность закрепления (швартовки) нескольких панелей одновременно. Если только 1 панель закреплена - она занимает 100% высоты, если будут закреплены еще панели, тогда высота будет делится на кол-во панелей. Кроме всего этого, если одна панель уже закреплена и пользователь наводит на другой элемент, сабменю выводится поверх закрепленной панели.
Ниже представлен HTML код:
<ul id="dock">
<li id="links">
<ul class="free">
<li class="header">
<a href="#" class="dock">Dock</a>
<a href="#" class="undock">Undock</a>Links
</li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
</ul>
</li>
<li id="files">
<ul class="free">
<li class="header">
<a href="#" class="dock">Dock</a>
<a href="#" class="undock">Undock</a>Files
</li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
</ul>
</li>
<!-- more submenus here -->
</ul>
<div id="content">
<!-- content here -->
</div>
Далее все это оформляем с помощью CSS:
<style type="text/css">
body{margin:0px; font-family:Arial, Sans-Serif; font-size:13px;}
/* dock */
#dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%;
z-index:100; background-color:#f0f0f0; left:0px;}
#dock > li {width:40px; height:120px; margin: 0 0 1px 0; background-color:#dcdcdc;
background-repeat:no-repeat; background-position:left center;}
#dock #links {background-image:url(links.png);}
#dock #files {background-image:url(files.png);}
#dock #tools {background-image:url(tools.png);}
#dock > li:hover {background-position:-40px 0px;}
/* panels */
#dock ul li {padding:5px; border: solid 1px #F1F1F1;}
#dock ul li:hover {background:#D3DAED url(item_bkg.png) repeat-x; border: solid 1px #A8D8EB;}
#dock ul li.header, #dock ul li .header:hover {background:#D3DAED url(header_bkg.png) repeat-x;border: solid 1px #F1F1F1;}
#dock > li:hover ul {display:block;}
#dock > li ul {position:absolute; top:0px; left:-180px; z-index:-1;width:180px; display:none;
background-color:#F1F1F1; border:solid 1px #969696; padding:0px; margin:0px; list-style:none;}
#dock > li ul.docked { display:block;z-index:-2;}
.dock,.undock{float:right;}
.undock {display:none;}
#content {margin: 10px 0 0 60px;}
</style>
И конечно же, не забываем про jQuery. Код ниже необходимо поместить между тегами <head></head>:
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var docked = 0;
$("#dock li ul").height($(window).height());
$("#dock .dock").click(function(){
$(this).parent().parent().addClass("docked").removeClass("free");
docked += 1;
var dockH = ($(window).height()) / docked
var dockT = 0;
$("#dock li ul.docked").each(function(){
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".undock").show();
$(this).hide();
if (docked > 0)
$("#content").css("margin-left","250px");
else
$("#content").css("margin-left", "60px");
});
$("#dock .undock").click(function(){
$(this).parent().parent().addClass("free").removeClass("docked")
.animate({left:"-180px"}, 200).height($(window).height()).css("top", "0px");
docked = docked - 1;
var dockH = ($(window).height()) / docked
var dockT = 0;
$("#dock li ul.docked").each(function(){
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".dock").show();
$(this).hide();
if (docked > 0)
$("#content").css("margin-left", "250px");
else
$("#content").css("margin-left", "60px");
});
$("#dock li").hover(function(){
$(this).find("ul").animate({left:"40px"}, 200);
}, function(){
$(this).find("ul.free").animate({left:"-180px"}, 200);
});
});
</script>
Полученный результат мне очень нравится. Можно много разного придумать на основе этого скрипта.
Понравился урок Вам? Ждем Ваших комментариев! Спасибо за внимание.