Боковая панель для сайта
Когда разрабатывал дизайн этого блога, я много размышлял, что мне не нравится во многих блогах, что я видел. Одним из раздражающих факторов оказались забитые блоками сайдбары, в которых кишмя кишели орды нечисти десятки баннеров, ненужные блоки и прочий мусор. Поэтому, в своем блоге я решил сделать прячущуюся боковую панель, дабы была возможность спрятать ее с глаз долой, если будет мешать.
Сегодня я расскажу, как сделать боковую панель для сайта (на примере той, что вы видите справа в моем блоге).
Пример разметки:
<body> <div class="wrapper"> <div id="rsb"> <div id="rsbinner"> <div id="togglersb" class="active"></div> <!-- сюда помещаем блоки с контентом --> </div> </div> </div> </body>
Теперь CSS:
#wrapper { width: 100%; position: relative; /* относительное позиционирование */ overflow: hidden; } #rsb { background: #333; position: absolute; right: 0; /* выравниваем по правому краю ... */ top: 0; /* ... и по высоте */ width: 220px; z-index: 2; /* это для того, чтобы на небольших экранах панель была над основным контентом */ } #rsbinner { position: relative; } #rsb #togglersb { cursor: pointer; height: 40px; left: -16px; position: absolute; top: 50px; width: 16px; } #rsb #togglersb.active { background-position: 3px 0; }
Теперь сайдбар спозиционирован правильно. Осталось научить его прятаться по клику на #tooglersb. Добавим немного магии jQuery:
$('#togglersb').toggle(function() { $("#rsb").animate({right:'-210px'},500); // 210px - неполная ширина нашей панели $(this).removeClass('active'); // удаляем класс .active чтобы сменилась пиктограмма кнопки }, function() { $("#rsb").animate({right:0},500); // возвращаем панель $(this).addClass('active'); // добавляем класс });
Единственное, что осталось сделать - это подготовить спрайтовую картинку, которая при добавлении/удалении класса .active будет менять background-position, но тут уже, я думаю, вы сами разберетесь :)
Комментарии
Не совсем понятна затея со скрытием сайдбара. Все равно контент не растягивается и по сути ничего не меняется.
В моем случае, на небольшом экране (в мобильном браузере, например) сайдбар из-за абсолютного позиционирования может налазить на контент. А так свернул - и ничего не мешает.
Очень понравилась ваша боковая убирающаяся панель. Непонятно только с кодом. Первый код я так понимаю нужно вставить в файл page.tpl.php своей темы (у меня Друпал). Второй в файл style.css темы. А третий код куда вставлять?
Единственное, что осталось сделать - это подготовить спрайтовую картинку, которая при добавлении/удалении класса .active будет менять background-position, но тут уже, я думаю, вы сами разберетесь :) - не разобрался. Можно и на ящик ответить: poliglot2005@mail.ru
Большое спасибо, если поможете.
Третий в
script.js
.Спрайтовую кнопку можете взять мою — /sites/all/themes/turblog/images/rsb-arrow.png
Добавить комментарий