Вертикальное tabmenu

Вертикальное меню в котором скрипт создает вкладки из ul и li элементов. Контент отображается, когда вы наводите курсор мыши на вкладку меню. Скрипт предтсавляет собой комбинацию приёмов CSS и jQuery.

HTML

 <div class="tabscontainer">
     <div class="tabs">
         <div class="tab selected first" id="tab_menu_1">
             <div class="link">jаvascript</div>
             <div class="arrow"></div>
         </div>
         <div class="tab" id="tab_menu_2">
             <div class="link">CSS</div>
             <div class="arrow"></div>
         </div>
          <div class="tab last" id="tab_menu_3">
             <div class="link">JQuery</div>
             <div class="arrow"></div>
         </div>
    </div>
    <div class="curvedContainer">
        <div class="tabcontent" id="tab_content_1" style="display:block">
        Контент для jаvascript
        </div>
        <div class="tabcontent" id="tab_content_2">
        Контент для CSS
        </div>
        <div class="tabcontent" id="tab_content_3">
        Контент для jQuery    
        </div>
    </div>
</div>

CSS

div.tabscontainer{
    margin:15px 0px;
}
div.tabscontainer div.tabs{
    list-style: none;
    width: 260px;
    cursor: pointer;
    float:left;
    margin-top: 10px;
    left: 0px;
    z-index: 2;
}
div.tabscontainer div.curvedContainer{
    margin-left: 259px;
    border:1px solid #7c7c77;
    min-height:400px;
    -moz-border-radius: 13px;
    border-radius: 13px;
}
div.tabscontainer div.curvedContainer .tabcontent{
    display:none;
    padding:20px;
    font-size:12px;
    font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
div.tabs div.tab{
    display: block;
    height: 58px;
    background: #eeeeea;
    border: #d6d6d2 solid 1px;
    border-top: none;
    position: relative;
       color: #73736b;
}
div.tabs div.link{
    padding-left: 20px;
    padding-top:20px;
    font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
    font-size: 14px;
}
div.tabs div.tab.selected{
    color: #ffffff;
    border-right-color: #aeaeaa;
}
div.tabs div.tab.selected{
    background: url(menuSelBack.png) repeat-x;
    border-right-color: #7c7c77;
}
div.tabs div.tab.first{
    border-top: #dbdbb7 solid 1px;
    -moz-border-radius-topleft: 13px;
    border-top-left-radius: 13px;
}
div.tabs div.tab.last{
    -moz-border-radius-bottomleft: 13px;
    border-bottom-left-radius: 13px;
}
div.tabs div.tab div.arrow{
    position: absolute;
    background: url(homeSelArrow.png) no-repeat;
    height: 58px;
    width: 17px;
    left: 100%;
    top: 0px;
    display: none;
}
div.tabs div.tab.selected div.arrow{
    display: block;
}

JS

Подключаем jQuery и вызываем скрипт:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="jаvascript">
$(document).ready(function() {
    $(".tabs .tab[id^=tab_menu]").hover(function() {
        var curMenu=$(this);
        $(".tabs .tab[id^=tab_menu]").removeClass("selected");
        curMenu.addClass("selected");
        var index=curMenu.attr("id").split("tab_menu_")[1];
        $(".curvedContainer .tabcontent").css("display","none");
        $(".curvedContainer #tab_content_"+index).css("display","block");
    });
});
</script>