Меню со вкладками в боковой панели с JQuery

Скажите, у вас много места в сайдбаре на вашем сайте? Ну у кого-то может быть и много, а кого-то нет. У вас наверняка там есть меню, какие либо анонсы статей, популярные статьи, «не популярные статьи», рандомные статьи, лучшие, не лучшие и .т.д. и т.п. Я видел такие сайты: когда статья уже кончилась, а сайдбар(боковой) все тянется и тянется в низ, все ниже, и ниже, и конца ему нет. Это ужасно неудобно и некому не нужно. Так зачем вам это? Я думаю этого вам совсем не надо, по этому вы можете объединить несколько каких либо столбцов, с любой информацией, в один с переключением между ними.
Вот вам наглядный пример, как это может выглядеть:

ШАГ 1: HTML

Добавьте следующий HTML код, в боковую панель веб-страницы:

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

<li class="active"><a href="#tab1">Recent</a></li>

<li><a href="#tab2">Popular</a></li>

<li><a href="#tab3">Random</a></li>

</ul>

<ul>

<li>Бла-бла-блааа!</li>

<li>Бла-бла-блаяа!</li>

</ul>

</div>

<ul>

<li>Много интересного</li>

<li>Еще больше интересного</li>

<li>Супер интересно!</li>

</ul>

</div>

Маленькая девочка в магазине смотрит книжку-считалочку:

<ul>

<li>1 - интригует.</li>

<li>2 - хммм... как захватывающе, что же будет дальше?</li>

<li>3 - О боже, 3! Я покупаю эту книгу!</li>

</ul>

</div>

Шаг 2: css
Следующий шаг, добавьте следующий css в таблицу стилей:

/* Слайдер 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; }

/* Слайдер 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, чтобы вкладки переключались:

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