HTML
Начнем с HTML разметки. Она очень простая.
Код: Выделить всё
<div id="wrap">
<div id="control">
<a id="controlbtn" class="open" href="http://aext.net" alt="Show/View your stuffs">Hide your stuffs</a>
</div>
<div id="maincontent">
<div id="linkblock">
<h4>All tags</h4>
<ul id="yourlist">
<li>
<a href="http://aext.net/category/css/" title="CSS & XHTML"> CSS & XHTML</a>
</li>
<li>
<a href="http://aext.net/category/php/" title="Resources"> PHP</a>
</li>
<li>
<a href="http://aext.net/category/resources/" title="Resources"> Resources</a>
</li>
<li>
<a href="http://aext.net/category/theme-layout/" title="Themes & Layouts"> Themes & Layouts</a>
</li>
</ul>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
</div>
</div>
Код ниже используется для стилизации обертки:
Код: Выделить всё
div#wrap {
position: relative;
width: 800px;
overflow: hidden;
margin: 100px auto 0px auto;
}
CSS ниже отвечает за кнопку показа\прятанья панели:
Код: Выделить всё
a#controlbtn{
color: #333;
text-decoration: none;
display: inline-block;
padding-left: 20px;
}
a#controlbtn.open {
background: transparent url(images/toggle_minus.png) no-repeat left center;
}
a#controlbtn.close {
background: transparent url(images/toggle_plus.png) no-repeat left center;
}
Остальной CSS код:
Код: Выделить всё
div#linkblock {
float: left;
width: 140px;
margin-left: -150px;
border-right: solid 1px #DDDDDD;
}
div#maincontent {
position: relative;
margin-left: 150px;
}
#yourlist {
list-style: none;
margin: 0px;
padding: 0px;
}
#yourlist li {
padding: 3px 5px 3px 0px;
position: relative;
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
}
#yourlist li a {
color: #D4432F;
padding: none;
margin: none;
}
h4 {
margin: 0px;
font-size: 16px;
line-height: 26px;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
clear: none;
}
Работа с JavaScript
В начале, мы вызываем функцию $(document).ready() для выполнения скрипта только после загрузки страницы.
Код: Выделить всё
<script type="text/javascript">
$(document).ready(function() {
// Будем работать тут
});
</script>
e.preventDefault(); используется для отмены обычной работы ссылки. При нажатии на ссылку - ничего не произойдет.
Код: Выделить всё
$("a#controlbtn").click(function(e) {
e.preventDefault();
....
});
Код: Выделить всё
var slidepx=$("div#linkblock").width() + 10;
if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {
$(this).removeClass('close').html('Hide your stuffs');
margin = "+=" + slidepx;
} else {
$(this).addClass('close').html('Show your stuffs');
margin = "-=" + slidepx;
}
В конце, необходимо анимировать панель с помощью кода ниже.
Первая строка кода используется для определения состояния панели.
Код: Выделить всё
if ( !$("div#maincontent").is(':animated') ) {
$("div#maincontent").animate({
marginLeft: margin,
}, 300);
}
Код: Выделить всё
if ( !$("div#maincontent").is(':animated') ) {
$("div#maincontent").animate({
marginLeft: margin,
}, {
duration: 'slow',
easing: 'easeOutQuint'
});
}
Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: http://www.aext.net