
Скажите, у вас много места в сайдбаре на вашем сайте? Ну у кого-то может быть и много, а кого-то нет. У вас наверняка там есть меню, какие либо анонсы статей, популярные статьи, «не популярные статьи», рандомные статьи, лучшие, не лучшие и .т.д. и т.п. Я видел такие сайты: когда статья уже кончилась, а сайдбар(боковой) все тянется и тянется в низ, все ниже, и ниже, и конца ему нет. Это ужасно неудобно и некому не нужно. Так зачем вам это? Я думаю этого вам совсем не надо, по этому вы можете объединить несколько каких либо столбцов, с любой информацией, в один с переключением между ними.
Вот вам наглядный пример, как это может выглядеть:
ШАГ 1: HTML
Добавьте следующий HTML код, в боковую панель веб-страницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<ul class="tabs"> <li class="active"><a href="#tab1">Recent</a></li> <li><a href="#tab2">Popular</a></li> <li><a href="#tab3">Random</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <ul> <li>Бла-бла-блааа!</li> <li>Бла-бла-блаяа!</li> <li>Бла2</li> </ul> </div> <div id="tab2" class="tab_content" style="display:none;"> <ul> <li>Много интересного</li> <li>Еще больше интересного</li> <li>Супер интересно!</li> </ul> </div> <div id="tab3" class="tab_content" style="display:none;"> Маленькая девочка в магазине смотрит книжку-считалочку: <ul> <li>1 - интригует.</li> <li>2 - хммм... как захватывающе, что же будет дальше?</li> <li>3 - О боже, 3! Я покупаю эту книгу!</li> </ul> </div> </div> |
Шаг 2: css
Следующий шаг, добавьте следующий css в таблицу стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Слайдер JQuery @ http://ixmaster.net/menyu-so-vkladkami-v-bokovoy-paneli-s-jquery/ */ ul.tabs { position: relative; z-index: 1000; float: left; margin: 0; padding: 0; list-style: none; border-left: 1px solid #777; } ul.tabs li { position: relative; overflow: hidden; height: 26px; float: left; margin: 0; padding: 0; line-height: 26px; background-color: #2A2A2A; border-bottom: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; } ul.tabs li a { display: block; padding: 0 10px; color: #999; outline: none; text-decoration: none; } html ul.tabs li.active, html ul.tabs li.active a:hover { background-color: #3B3B3B; border-bottom: 1px solid #3B3B3B; } html ul.tabs li.active a:link { color: #ccc; } .tab_container { position: relative; top: -1px; z-index: 999; width: 100%; float: left; font-size: 11px; background-color: #3B3B3B; border: 1px solid #777; } .tab_content { padding: 7px 11px 11px 11px; line-height: 1.5; } .tab_content ul { margin: 0; padding: 0; list-style: none; } .tab_content li { margin: 3px 0; } |
Отметим, что этот css использовался для определенного стиля меню, как показано на демо скриншоте.
Настройте по мере необходимости в соответствии с Вашим дизайном.
ШАГ 3: JQuery
И под конец, добавим необходимый JQuery, чтобы вкладки переключались:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> // Слайдер JQuery @ http://ixmaster.net/menyu-so-vkladkami-v-bokovoy-paneli-s-jquery/ $(document).ready(function() { $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); //$(activeTab).fadeIn(); if ($.browser.msie) {$(activeTab).show();} else {$(activeTab).fadeIn();} return false; }); }); </script> |
В отличие от двух первых шагов, редактирование не требуется — если нужно, можете и отредактировать как вам надо 😉