CODEWITHSUNDEEP
jqueryhtmlcssnavigationonclick
Andrew
Andrew

Reputation: 61

OnClick vertical navigation

My site is going through a huge revamp. I want to add a lot more functionality to it but I think I've gotten in a bit too far over my head.

The link that pertains to my question is: http://www.andrewryan.me/AndrewRyan/index.html

I have one button on the left hand side of my top menu. I've made it nice and pretty and it's purely css. Whenever I use the menu it's extremely annoying to have to follow the path of uncertainty and risk closing out of the menu or submenus because I went off the target.

I want the user to be able to click on that button and have the navigation menu open. From there, the user can have their mouse anywhere they'd like and it won't go away until they click outside the element or make their selection. There are also subsections that I want to have going off to the right. Those too would have to be clicked, but if you move your mouse off the submenu that's the only thing that would be gone. the main menu would remain. Here's the code I have thus far, I've tried multiple things but it just doesn't seem to work. I know little to nothing about jQuery or JavaScript.

The HTML:

<div id="navigation">
                <ul id="nav">
                    <li><a href="#">Navigation</a>
                        <ul class="menu">
                            <li><a href="#">Professional</a>
                                <ul class="submenu">
                                    <li><a href="#">Ambitions</a></li>
                                    <li><a href="#">Resume</a></li>
                                    <li><a href="#">Portfolio  ></a></li>
                                </ul>
                            </li>
                            <li><a href="#">About Myself</a>
                                <ul class="submenu">
                                    <li><a href="#">My Family</a></li>
                                    <li><a href="#">Interests</a></li>
                                    <li><a href="#">Scrap Book</a></li>
                                </ul>
                            </li>   
                            <li><a href="#">Social Life</a>
                                <ul class="submenu">
                                    <li><a href="#">Social Philosiphy</a></li>
                                    <li><a href="#">My Networks  ></a>
                                        <ul class="submenu">
                                            <li><a href="#" target="_blank">Facebook</a></li>
                                            <li><a href="#" target="_blank">Google+</a></li>
                                            <li><a href="#" target="_blank">Personal Tumblr</a></li>
                                            <li><a href="#" target="_blank">YouTube</a></li>
                                            <li><a href="#" target="_blank">Twitter</a></li>
                                            <li><a href="#" target="_blank">Deviant Art</a></li>
                                            <li><a href="#" target="_blank">Sound Cloud</a></li>
                                            <li><a href="#" target="_blank">Github</a></li>
                                            <li><a href="#" target="_blank">Diaspora</a></li>
                                            <li><a href="#" target="_blank">MySpace</a></li>
                                            <li><a href="#" target="_blank">about.me</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

The CSS:

#navigation {
    width:300px;
    height:40px;
    float:left;
    margin-top:-4px;
}

#navigation a {
    margin:0px auto;
    color:#ccc;
    outline:none;
    z-index:5; 
}

 #nav {
    padding:7px 6px 10px 0px;
    background:none;
    line-height: 100%;
    display:inline-block;
   }

 #nav li {
    margin:0 0 0 5px;
    padding:0 0 0 0px;
    float:left;
    position:relative;
    list-style:none;
  }

 #nav a {
    border-radius:20px 25px 0 10px;
    border-top:solid 3px #fff;
    border-left:solid 3px #fff;
    font-weight:bold;
    color:#fff;
    background:none;
    text-decoration:none;
    display:block;
    padding:8px 20px;
}

    /* hovers and current tabs */
#nav a:hover {
    border-radius:10px;
    background:none;
    color:#ccc;
}

  #nav .current a {
    border-radius:20px 25px 0 10px;
    background:none;
    color:#ccc;
    margin-bottom:0px;
    border-top:solid 3px #ccc;
    border-left:solid 3px #ccc;
}

  #nav li:hover > a {
    border-radius:20px 25px 0 10px;
    background:none;
    color: #ccc;
    margin-bottom:0px;
    border-top: solid 3px #ccc;
    border-left:solid 3px #ccc;
}

 #nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#333;
    border-top:solid 1px #dfdfdf;
}

 #nav ul a:hover { 
    color:black !important;
}

 /* dropdown */
  #nav li:hover > ul { 
    display:block; 
    background-color:#fff; 
    border-radius:10px 10px 10px 10px;
}

/* level 2 list */
  #nav ul {
    display:none;
    margin: 0;
    padding:0;
    width:150px;
    position:absolute;
    top:33px;
    left:0;
    background:#aaa;
    border:solid 1px #b4b4b4;
}

  #nav ul:hover { 
    background-color:#ddd;
}

  #nav ul li {
    z-index:5;
    font-weight:bold;
    float:none;
    margin:0px;
    padding:0px;
}

 #nav ul a { 
    font-weight:normal;
}

Upvotes: 0

Views: 4365

Answers (2)

Jeff B
Jeff B

Reputation: 30099

Here is a very simple click-nav menu:

http://jsfiddle.net/jtbowden/WGVum/

The code is pretty basic:

$('#navigation').on('click', 'a[href="#"]', function() {
    $('#navigation ul').hide();  // Hide everything when we click
    var submenu = $(this).next('ul');  // Find the associated sub-menu
    submenu.parentsUntil('#navigation').andSelf().show(); // Show all hierarchy above
});

In this case, we only respond to clicks that have # as the href. This could also be a class, or any other attribute.

If you want the menu to hide when you click somewhere else, and toggle submenus on click, you can use this code:

$('#navigation').on('click', 'a[href="#"]', function() {
    var submenu = $(this).next('ul');
    $('#navigation ul').not(submenu).hide();
    submenu.parentsUntil('#navigation', 'ul').show().end().toggle();
    return false;
});

$(document).click(function() {
    $('#navigation ul ul').hide();
});

Demo: http://jsfiddle.net/jtbowden/WGVum/3/

Upvotes: 0

Alex
Alex

Reputation: 6406

Take a look at this fiddle: http://jsfiddle.net/5h6Vp/3/

$(document).on('click', function(e){
    if($(e.target).parents('#menu').length > 0){
        /*click in #menu*/
    }else if($(e.target).attr('id') == 'show'){
        $('#menu').toggle();
    }else{
        $('#menu').hide();
    }
});

Use this code for the Submenus:

$('#menu>ul>li').has('ul').on('click', function(e){
    $('#menu>ul>li>ul').hide();
    $(this).find('ul').show();
});
$('#menu>ul>li>ul').on('mouseleave', function(e){
    $(this).hide();
});
$('#menu').on('mouseleave', function(e){
    $('#menu>ul>li>ul').hide();
});

(I wrote this answer before you pasted your code, so my code structure is a bit different - but the idea remains the same)

Upvotes: 1

Related Questions