Боковая панель для сайта

Боковая панель для сайта как в моем блоге

Когда разрабатывал дизайн этого блога, я много размышлял, что мне не нравится во многих блогах, что я видел. Одним из раздражающих факторов оказались забитые блоками сайдбары, в которых кишмя кишели ~~орды нечисти~~ десятки баннеров, ненужные блоки и прочий мусор. Поэтому, в своем блоге я решил сделать прячущуюся боковую панель, дабы была возможность спрятать ее с глаз долой, если будет мешать.

Сегодня я расскажу, как сделать боковую панель для сайта (на примере той, что вы видите справа в моем блоге).

Пример разметки:

<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, но тут уже, я думаю, вы сами разберетесь :)

В моем случае, на небольшом экране (в мобильном браузере, например) сайдбар из-за абсолютного позиционирования может налазить на контент. А так свернул - и ничего не мешает.

#3Sergey191703.04.2013 13:35

Очень понравилась ваша боковая убирающаяся панель. Непонятно только с кодом. Первый код я так понимаю нужно вставить в файл page.tpl.php своей темы (у меня Друпал). Второй в файл style.css темы. А третий код куда вставлять?

Единственное, что осталось сделать - это подготовить спрайтовую картинку, которая при добавлении/удалении класса .active будет менять background-position, но тут уже, я думаю, вы сами разберетесь :) - не разобрался. Можно и на ящик ответить: poliglot2005@mail.ru

Большое спасибо, если поможете.

#4TurboPxl04.04.2013 11:47

Третий в script.js.
Спрайтовую кнопку можете взять мою — /sites/all/themes/turblog/images/rsb-arrow.png

#rsb #tooglersb {
background: #333 url(<a href="/sites/all/themes/turblog/images/rsb-arrow.png">http://turbopxl.ru/sites/all/themes/turblog/images/rsb-arrow.png</a>) 3px -40px no-repeat;
cursor: pointer;
height: 40px;
left: -16px;
position: absolute;
top: 50px;
width: 16px;
 
#rsb #tooglersb.active {
background-position: 3px 0;
}