Search code examples
jquerycsslisttabsunordered

Tabs level styling

Good day everyone
I'm making a multilevel tab and I ran into a problem with styling the damn thing.
Here i have my unordered list with 2 levels

<section class="tabs">
    <ul class="links1lvl">
        <li><a>About</a>
            <ul class="links2lvl">
                <li><a href="#about/who">O nás</a></li>
                <li><a href="#about/personal">Personál</a></li>
        </li>
        <li><a>student</a>
            <ul class="links2lvl">
                <li><a href="student/chart.html">Rozvrhy</a></li>
                <li><a href="student/charts.html">Bloková výuka</a></li>

... etc ... And i have my jQuery 

$(function () {
    $(".links2lvl a").click(function(){
        $(".links2lvl li").siblings("li").removeClass("active2");
        $(this).parent("li").addClass("active2");
    });
});
$(function(){
    $(".links2lvl").hide();
    $(".links1lvl li").click(function(){
       $(this).children(".links2lvl").toggle();

    });
});

And of course CSS

.links1lvl a 
    {
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: blue;
    font-size: 13px;
    color: red;
    transition: all linear 0.15s;
    }
.links2lvl a
    {
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: greenyellow;
    font-size:10px;
    color:orangered;
    transition: all linear 0.15s;
.links2lvl li
    {
    margin: 4px 5px auto 0px;
    float:left;
    list-style: none;
.active2 a
    {
    background: white;
    color:black;
    }
... and much more ...

Now the idea behind this that after clicking on parent tab, all of its childern will apear. After clicking on another parent tab, current tabs will hide again and child tabs for that respective tab will apea. Now that whorks, but..
1. problem is, when i try to style the parent tab, it will automaticly applies to all of its children.
2. problem is, positioning of children tabs. Now they do appear underneath the parent tabs, but they move other parent tabs to the side. I need that to stop..
https://jsfiddle.net/lone_wanderer/9d4a0kLs/ So here is my jsfiddle. You can see here, that the blue tabs are parent tabs and green are the child tabs. On default, only the blue tabs are visible and after clicking them their respective child tabs would be displayed. I need them however to be displayed underneath the first row and on the same place for every parent tab.

Solution

  • What you have to do is put the second level ul's outside of the first level ul's.

    Give them id's so you can relate the lvl1 items and lvl2 subitems.

    <section class="tabs">
    <ul class="links1lvl">
        <li id="about"><a>About</a></li>
        <li id="student"><a>student</a></li>
    </ul>

    <ul class="links2lvl" id="about-submenu">
        <li><a href="#about/who">O nás</a></li>
        <li><a href="#about/personal">Personál</a></li>
        <li><a href="#about/study">Studijní</a></li>
        <li><a href="#about/iCenter">Informacní c.</a></li>
        <li><a href="#about/helpdesk">Aktuality</a></li>
        <li><a href="#about/practise">Praxe</a></li>
    </ul>
    <ul class="links2lvl" id="student-submenu">
        <li><a href="student/chart.html">Rozvrhy</a></li>
        <li><a href="student/charts.html">Bloková výuka</a></li>
        <li><a href="student/r.changes.html">Zmeny místností</a></li>
        <li><a href="student/teach_info.html">Informace</a></li>
        <li><a href="student/study_info.html">informace 2</a></li>
        <li><a href="student/exams.html">Zkoušky</a></li>
        <li><a href="student/final_exams.html">záverecné zkoušky</a></li>
        <li><a href="student/download.hml">Ke stažení</a></li>
    </ul>

</section>

    With JQuery then you'll know when lvl1 id="about" is clicked, show lvl2 id="about-submenu".

    $(function(){
    $(".links2lvl").hide();
    $(".links1lvl li").click(function(){   
        $(".links2lvl").hide();
        var selectedID = ($(this).attr('id'));
        $('#'+selectedID + '-submenu').toggle();
    });
});

    I also added a style for lvl2 links so they show underneath the lvl1 links

    .links2lvl {
    clear:both;
}

    JSFiddle Link: https://jsfiddle.net/hscf4v8x/1/