JS Dropdown Menu

Question

Ok, so I know that this seems like I am just being lazy but I am so close to ripping out all of my hair! I have trawled through so many websites and after 24 hours need help from the Stack!

I am trying to make a dropdown menu that when a level 1 parent is CLICKED all of its children appear below pushing the page content down and when the next level 1 parent is clicked the previous children disappear and the new ones come in.

From my research I know that I need to utilize toggle but I have confused the hell out of myself and I am not much of a JS guy. I am also aware that I will need to use overflow hidden in my css for the midnav. I would also like to use some of the jQuery effects to slide the children ul up and down, would this mean I would have to write the whole thing using jQuery?

Any help would be greatly appreciated. an example of what I want to do is here at

http://www.andersenwindows.com/

and here is what I have so far: HTML:

<!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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
</head>

<body>
<div id="wrapper">
  <div id="topbanner"></div>
  <div id="header">
    <div id="navigation">
      <div id="topnav">
        <div id="left-side">
          <div id="left-menu">
            <ul>
              <li><a href="#">Link l1</a></li>
              <li><a href="#">Link l2</a></li>
            </ul>
          </div>
        </div>
        <div id="logo"><img src="images/general/nav_logo.png" /> </div>
        <div id="right-side">
          <div id="right-menu">
            <ul>
              <li><a href="#">Link r1</a></li>
              <li><a href="#">Link r2</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="mid-nav">
        <ul id="midnav">
          <li><a href="#" >About</a></li>
          <li><a href="#" >Home</a> 
          <ul>
          <li><a href="#">test2</a></li>
          <li><a href="#">test3</a></li>
          <li><a href="#">test1</a></li>
          </ul>
          </li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <!--START 100% HERE!--> 
  </div>
</div>
<div id="footer">
  <div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
  <div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
  <div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>

CSS:

html, body {
    height: 100%;
    margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}

#topbanner{
    width:100%;
    height:54px;
    background-color:#f1f2f2;
    position:absolute;
    z-index:-1000;
}

#topnav {
    margin: 0px auto;
    width: 1050px;
    height: 50px;
    padding-top: 4px;
    background-color: #f1f2f2;
}

#left-side {
    float: left;
    width: 439px;
}
#right-side {
    float: right;
    width: 439px;
}
#logo {
    padding-top: 7px;
    float: left;
    width: 15%;
}
#left-menu {
}
#left-menu ul {
    float: right;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 0px;
}
#left-menu li {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#left-menu a {
    display: inline-block;
    padding: 10px;
    line-height: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'AftasansRegular';
    font-size: 22px;
    font-weight: normal;
    color: #000;
    border: none;
}
#right-menu {
}
#right-menu ul {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
}
#right-menu li {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#right-menu a {
    display: inline-block;
    padding: 10px;
    line-height: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'AftasansRegular';
    font-size: 22px;
    font-weight: normal;
    color: #000;
    border: none;
}
ul#midnav {
    border-width: 1px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
    display: inline;
}
ul#midnav li a {
    display: inline-block;
    padding: 10px;
    line-height: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'AftasansRegular';
    font-size: 18px;
    font-weight: normal;
    color: #000;
    border: none;
}
ul#midnav li ul{
line-height: 30px;
 padding: 0;
 position: absolute;
 left: 0; top:100px;
 display: none;/* --Hide by default--*/
 width: 970px;
 height:40px;
 background: #f1f2f3;
 color: #fff;


}


/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
    height: 100px; /* .push must be the same height as .footer */
    background-color: #f1f2f2;
}
#footer {
        border-top: solid thin #c8c8c8;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background-color: #f1f2f2;
}
#social-wrapper {
    width: 130px;
    height: 100px;
    float: right;
    position: relative;
    top: 40px;
}
.social-images {
    border-style: solid;
    border-width: 1px;
    border-color: #f1f2f2;
    width: 40px;
    height: 40px;
    float: left;
}
/*FOOTER END *?

Thanks,

C

Can you add a jsFiddle? jsfiddle.net

Justin Bicknell
– Justin Bicknell

2013-01-08 22:01:33 +00:00
Commented Jan 8, 2013 at 22:01 — Justin Bicknell
– Justin Bicknell, Commented Jan 8, 2013 at 22:01
Here's a fiddle: jsfiddle.net/SwH2F

Sebastian vom Meer
– Sebastian vom Meer

2013-01-08 22:06:47 +00:00
Commented Jan 8, 2013 at 22:06 — Sebastian vom Meer
– Sebastian vom Meer, Commented Jan 8, 2013 at 22:06
However, I cannot find any Javascript...?

Sebastian vom Meer
– Sebastian vom Meer

2013-01-08 22:07:09 +00:00
Commented Jan 8, 2013 at 22:07 — Sebastian vom Meer
– Sebastian vom Meer, Commented Jan 8, 2013 at 22:07
Check JQueryUI menu widget jqueryui.com/menu

sdespont
– sdespont

2013-01-08 22:30:19 +00:00
Commented Jan 8, 2013 at 22:30 — sdespont
– sdespont, Commented Jan 8, 2013 at 22:30

Matthew Davis · Accepted Answer · 2013-01-08 22:30:01Z

1

I got lost with all the left/right nav stuff so I just did one with the middle nav. You can think of it as a jumping off point. http://jsfiddle.net/MatthewDavis/4syjv/

Here's the JS... it's pretty generic but you should be able to edit to suit.

$(document).ready(function () {
  $('a').on('click', function(event){
    event.preventDefault();
    $('#mid-nav > ul').find('ul').slideUp(
      function(){
        $(this).closest('li').find('ul').slideToggle();
    });
  });
});

answered Jan 8, 2013 at 22:30

Matthew Davis

1425 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SoluableNonagon · Accepted Answer · 2013-01-08 22:31:29Z

1

Are you looking for something like:

 $('#div1').click(function() {
      if( /* check if already visible */)
      $('div1').toggle(); //also do-able with $('div1').slideToggle();
      $('div2').hide();
 }

but first you would hide all your divs first and check the current div

answered Jan 8, 2013 at 22:31

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Collectives™ on Stack Overflow

JS Dropdown Menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related