Горизонтальная выезжающая панель с помощью jQuery

SLITE

В сегодняшнем уроке мы создадим интересную панель, которая будет появляться\исчезать при нажатии на кнопку.

Как Вы видите на картинку выше у нас левая часть будет содержать небольшое меню, которое будет появляться\исчезать при нажатии на кнопку, и правая часть с текстовым наполнением, которая будет только менять свой размер, в зависимости от состоянии левой части.

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>

CSS

Код ниже используется для стилизации обертки:

Код: Выделить всё

div#wrap {
position: relative;
width: 800px;
overflow: hidden;
margin: 100px auto 0px auto;
}

Обязательно установите overflow hidden. Это необходимо для того, чтобы при завершении анимации, панель, которую Вы хотите спрятать, выезжала влево и пряталась за оберткой. Мы используем значение hidden overflow для прятанья этой панели.

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;
}

Так как позиционирование div#linkblock абсолютное, div#mainconten должен иметь относительное.

Работа с 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;

}

slidepx это количество пикселей, на которое будем двигать панель. Это значение в нашем случае равняется ширине панели, которую мы хотим спрятать + отступы панели (10 пикселей).

В конце, необходимо анимировать панель с помощью кода ниже.

Первая строка кода используется для определения состояния панели.

Код: Выделить всё

 if ( !$("div#maincontent").is(':animated') ) {

$("div#maincontent").animate({
marginLeft: margin,
}, 300);

}

Анимируем с помощью плагина easing:

Код: Выделить всё

if ( !$("div#maincontent").is(':animated') ) {

$("div#maincontent").animate({
marginLeft: margin,
}, {
duration: 'slow',
easing: 'easeOutQuint'
});

}

Наша панель готова! Применяйте с умом на Ваших веб проектах!

Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: http://www.aext.net