CODEWITHSUNDEEP
jquerycssdrop-down-menunavigation
DC1
DC1

Reputation: 371

adding a sub category dropdown in this navigation

I am trying t figure out how to add a sub category dropdown on category 3 of this navigation. Lets say 3 sub categories for example. I had tried a bunch of methods but cant seem to figure it out. So basically, when you click on category 3, an additional 3 links appear below it. Can anybody assist with adding that coding in? This is my entire code in 1 html document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-</title>
<style TYPE="text/css"> 
a:link, a:visited, a:hover, a:active {
    color: #000;
    text-decoration: none;
}
#trigger {
    line-height: 50px;
    float: right;
    height: 50px;
    font-size: 1.2em;
}
a.menu-link {
    float: right;
    display: block;
    padding-right: 0.5em;
    padding-left: 0.5em;
    margin-right: 1em;
    color: #000;
}
nav[role=navigation] {
    clear: both;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.js nav[role=navigation] {
    overflow: hidden;
    max-height: 0;
}
nav[role=navigation].active {
    max-height: 18em;
}
nav[role=navigation] ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid #000;
}
nav[role=navigation] li a {
    display: block;
    padding: 0.8em;
    border-bottom: 1px solid #000;
    font-size: .875em;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/Javascript">
$(document).ready(function() {
  $('body').addClass('js');
  var $menu = $('#menu'),
    $menulink = $('.menu-link');

$menulink.click(function() {
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
  return false;
});});
</script>
</head>

<body>
<div id="trigger"><a href="#menu" class="menu-link">Menu</a></div>
</div>
<nav id="menu" role="navigation">
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
</ul>
</nav>
</body>
</html>

Upvotes: 1

Views: 1586

Answers (2)

Josep
Josep

Reputation: 13071

Is this what you want?

$('#menu ul li:eq(2)').click(function(){ 
    if($(this).children("a").size()==1){
        $(this).append("<a href='#'>subcategory 1</a>");
        $(this).append("<a href='#'>subcategory 2</a>");
        $(this).append("<a href='#'>subcategory 3</a>");
    }
});​​

A JsFiddle example here: http://jsfiddle.net/ApNhK/3/

Upvotes: 1

Zack
Zack

Reputation: 2869

I tried something with the JSFiddle I posted earlier. I just added another <ul> into the html elements and added css code to make it hidden by default, then added jquery function to the Category3 click function to make the new <ul> show itself.

http://jsfiddle.net/ApNhK/1/

Probably not the best solution, and I'm sure you would have to change some things as if you click any of the extra options, it hides all of the extra options menu. But this maybe gives an idea of one way you could go about it?

Upvotes: 2

Related Questions