JS下拉菜单

好吧，我知道这看起来像我只是懒惰，但我很接近撕掉我所有的头发！我已经浏览了很多网站，24小时后需要从堆栈中获得帮助！JS下拉菜单

我想做一个下拉菜单，当一级父母被点击时，其所有孩子都出现在推下页面内容的下方，并且当下一级别的父母被点击时，先前的孩子消失并且新的孩子进来

从我的研究我知道我需要利用切换，但我已经迷惑了我自己的地狱，我不是一个JS家伙。我也知道，我将需要使用隐藏在我的CSS为midnav的溢出。我还想使用一些jQuery效果来上下滑动子节点，这是否意味着我必须使用jQuery来编写整个事件？

任何帮助将不胜感激。什么我想要做的一个例子是在这里

http://www.andersenwindows.com/

这里是我到目前为止有： 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 *?

谢谢，

来源

2013-01-08 Charlie

您可以添加的jsfiddle？ http://jsfiddle.net –

这里是一个小提琴：http://jsfiddle.net/SwH2F/ –

但是，我找不到任何Javascript ...？ –

我迷失了所有的左/右导航的东西，所以我只做了一个中间导航。你可以把它看作是一个跳板点。 http://jsfiddle.net/MatthewDavis/4syjv/

这是JS ...这是非常通用的，但你应该能够编辑以适应。

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

来源

2013-01-08 22:30:01

你是否在寻找类似：

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

但首先你会先隐藏所有你的div并检查当前的div

来源

2013-01-08 22:31:29 SoluableNonagon

回答

相关问题