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

回答

相關問題