В этом уроке я покажу Вам как сделать интересный плагин для изменения ширины части сайта. Подобный эффект можно просмотреть на сайте Youtube - там можно менять режимы просмотра видео ("обычный" или "широкий"). При расширенном режиме остальные части сайта перемещаются вниз.
Структура
Это наиболее важная часть урока. Чтобы повторить эффект Youtube нам понадобится 5 секций: header, content, comments, sidebar и footer.
<div id="header"></div>
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
<div id="comments"></div>
</div>
<div id="footer"></div>
Ключ ко всему скрывается в CSS - зоны с контентом и комментариями будут иметь свойство float:left, сайдбар - float:right. При растяжении контента на всю страницу сайдбар сместится вниз без вреда всему дизайну.
#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}
Изначально контент будет иметь ширину 600 пикселей. При "широком" режиме контент растянется на 960 пикселей. Для достижения этого мы разместим кнопку где-нибудь на странице (например, в той же зоне контента).
<a id="wideView" href="#">Change View</a>
Взаимодействие
Далее мы добавим небольшую функцию jQuery , которая будет переключать CSS класс "wide". Этот класс будет определять внешний вид секции контента в "широком" режиме.
$(document).ready(function() {
$("#wideView").click(function() {
$("#content").toggleClass("wide");
});
});
Класс CSS "wide" будет содержать только свойство ширина - 900 пикселей (со всеми отступами получится 960 пикселей).
#content.wide { width:900px;}
Заключение
Всего несколько строк кода и у Вас получился интересный эффект смены режимы просмотра сайта. Надеюсь, Вам это пригодится.