CODEWITHSUNDEEP
jquerycssmenu
Doug
Doug

Reputation: 76

horizontal jquery menu with subsectons

I need some help. I've looked everywhere but I do think what i'm looking for is a little unique.

I'm trying to make a menu that when you click on a menu option a group of options. That bit I got, i think. what im trying to achieve now is getting it to allow the children of the submenu slide in-between the line of links directly. kind of like an horizontal accordion menu, with the twist of having all the top menu links in a row rather then vertically.

the action, click on topmenu item and a submenu(s) links will appear. if a submenu link is clicked, that link with appear the sub-submenu items corresponding to that original link and hiding all but itself and its parents.

im not sire if im explaining it right. my head is a little brain-dead from trying to solve this issue all day and im about to cave in.

this is an example of what im trying to achieve:

enter image description here

if you want go here to see what i have done http://jsfiddle.net/pi_mai/zuU5M/ So i'm trying to make a menu with this HTML code ( i've remove many link items to shorten the code ):

    <nav>
    <ul class="topmenu">
        <li class="topmenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
        <li class="topmenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
    </ul>
    <ul class="submenu topmenu-item-1">
        <li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
        <li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
    </ul>
    <ul class="subsubmenu submenu-item-1">
        <li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
        <li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
    </ul>
    <ul class="submenu topmenu-item-1">
        <li class="submenu-item-7"><a href="" class="topmenu-link">top menu</a></li>
        <li class="submenu-item-8"><a href="" class="topmenu-link">top menu</a></li>
    </ul>
    <ul class="submenu topmenu-item-2">
        <li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
        <li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
    </ul>
    <ul class="submenu topmenu-item-3">
        <li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
        <li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
    </ul>
    </nav>

.

$('.topmenu > li').on('click',function(){
        var itemClass = $(this).attr('class');
        console.log(itemClass)
        $('.submenu').not(this).removeClass('toggle');
        $('.submenu.' + itemClass ).toggleClass('toggle');
        $('.subsubmenu.toggle').siblings().removeClass('toggle')
    });
    $('.submenu > li').on('click',function(){
        var itemClass = $(this).attr('class');
        console.log(itemClass)
        $('.subsubmenu').not(this).removeClass('toggle');
        $('.subsubmenu.' + itemClass ).toggleClass('toggle');
    });

Can anyone help me?

EDIT

I think I have the solution, just need to add animation but it's working overall and that to me is fantastic!

function menuTap( $this ){

    var thisClass = $this.attr('class');

    if( $this.parent().hasClass("top-menu") ){
        $('.sub-menu.' + thisClass ).animate().toggleClass('hide');
        $('.sub-menu' + ':not(.' + thisClass + '), .sub-sub-menu' ).addClass('hide');
    };

    if( $this.parent().hasClass("sub-menu") ){
        console.log( $this.attr('class') + ' li was clicked')
        $('.sub-sub-menu.' + thisClass ).toggleClass('hide');
        $('.sub-sub-menu' + ':not(.' + thisClass + ')' ).addClass('hide');
    };

}

$('.top-menu li, .sub-menu li').on('click',function(){
    menuTap( $(this) );
});

Upvotes: 1

Views: 774

Answers (2)

Ani
Ani

Reputation: 1

please check below code. i have edited html, css and javascript.

Javascript code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script>
    $(document).ready(function(){
    jQuery('.topmenu-link').click(function(){
        if(!jQuery(this).hasClass('open')){
            jQuery('.topmenu-link').removeClass('open');
            jQuery('.submenu-part').stop(true,true).slideUp();
            jQuery(this).parent('.topmenu-item').children('.submenu-part').stop(true,true).slideDown();
            jQuery(this).addClass('open');  
        }else{
            jQuery(this).removeClass('open');
            jQuery('.submenu-part').stop(true,true).slideUp();
        }
    });
    
     });
</script> 
<!--script end-->

Css code

<!--css start-->
<style>
body{
    background-color: #333;
    padding: 20px;  
    color:white;
    font-family: arial;
}
a{
    color: aqua;
}
.clear{clear:both;}
.topmenu{
    background-color: green;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
li.topmenu-item{
    float: left;
    margin: 0 2px 0 0;
    cursor: pointer;
    position:relative;
    zoom:1;
    
}
.topmenu-link{
    padding: 20px;
    display:block;
}
.submenu-part{
    background:#060;
    width:200px;
    padding:10px;
    position:absolute;
    top:59px;
    left:0px;
    display:none;
}
.submenu-item-link{
    margin:5px 0px;
    display:block;
}
.submenu-item-link a{
    margin:8px 0px;
    display:block;
}
        
</style>
<!--css end-->

Html code

<!--html content start-->
<nav>
    <ul class="topmenu">
        <li class="topmenu-item">
            <a href="javascript:;" class="topmenu-link">top menu 1</a>
            <ul class="submenu-part">
                <li class="submenu-item-link"><a href="" >top menu 1</a></li>
                <li class="submenu-item-link"><a href="" >top menu 2</a></li>
                <li class="submenu-item-link"><a href="" >top menu 3</a></li>
                <li class="submenu-item-link"><a href="" >top menu 4</a></li>
            </ul>
        </li>
        
        <li class="topmenu-item">
            <a href="javascript:;" class="topmenu-link">top menu 2</a>
            <ul class="submenu-part">
                <li class="submenu-item-link"><a href="" >top menu 1</a></li>
                <li class="submenu-item-link"><a href="" >top menu 2</a></li>
            </ul>
        </li>
        
        <li class="topmenu-item">
            <a href="javascript:;" class="topmenu-link">top menu 3</a>
            <ul class="submenu-part">
                <li class="submenu-item-link"><a href="" >top menu 1</a></li>
                <li class="submenu-item-link"><a href="" >top menu 2</a></li>
                <li class="submenu-item-link"><a href="" >top menu 3</a></li>
            </ul>
        </li>
        
        <li class="topmenu-item">
            <a href="javascript:;" class="topmenu-link">top menu 4</a>
            <ul class="submenu-part">
                <li class="submenu-item-link"><a href="" >top menu 1</a></li>
                <li class="submenu-item-link"><a href="" >top menu 2</a></li>
                <li class="submenu-item-link"><a href="" >top menu 3</a></li>
                <li class="submenu-item-link"><a href="" >top menu 4</a></li>
                <li class="submenu-item-link"><a href="" >top menu 5</a></li>
                <li class="submenu-item-link"><a href="" >top menu 6</a></li>
                <li class="submenu-item-link"><a href="" >top menu 7</a></li>
                <li class="submenu-item-link"><a href="" >top menu 8</a></li>
            </ul>
        </li>
        <li class="clear"></li>
    </ul>
</nav>
<!--html content end-->

Upvotes: 0

isherwood
isherwood

Reputation: 61114

One major hurdle is your HTML structure. Nearly all menus will have something like this, where submenus are nested inside their parents:

<ul class="topmenu">
  <li><a></a>
    <ul class="submenu">...</ul>
  </li>
</ul>

Whereas you have this, with submenus as siblings of their parents:

<ul class="topmenu">
  ...
</ul>

<ul class="submenu">
  ...
</ul>

It's simpler to call elements based on a parent-child relationship than by classes or sibling relationships.

Here's a start. I'm out of time for now. http://jsfiddle.net/isherwood/zuU5M/1/

Upvotes: 1

Related Questions