JS 드롭 다운 메뉴

좋아, 나는 이것이 게으르다는 것처럼 느껴진다. 그러나 나는 내 머리카락을 모두 찢어 버리기에 너무 가깝다. 나는 많은 웹 사이트를 통해 trawled하고 24 시간 후 스택에서 도움이 필요해!JS 드롭 다운 메뉴

레벨 1 학부모가 CLICKED되면 모든 어린이가 페이지 내용을 아래로 밀어 내려고 다음 레벨 1 부모를 클릭하면 이전 어린이가 사라지고 새 어린이가 들어올 때 드롭 다운 메뉴를 만들려고합니다.

내 연구에서 나는 토글을 사용해야한다는 것을 알고 있지만 나 자신을 혼란스럽게 만들었고 나는 JS 녀석이별로 없다. 나는 또한 내가 midnav에 대한 내 CSS에 숨겨진 오버플로를 사용해야 할 것입니다 알고 있습니다. 또한 jQuery 효과를 사용하여 어린이 ul을 위아래로 슬라이드 시키려면 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

을 확인까요? http://jsfiddle.net –

여기는 바이올린 : http://jsfiddle.net/SwH2F/ –

그러나, 나는 어떤 자바 스크립트를 찾을 수 없습니다 ...? –

나는 모든 왼쪽/오른쪽 nav 물건들 때문에 길을 잃었으므로, 나는 단지 중간 nav를 가지고 그렇게했다. 점프 포인트라고 생각할 수 있습니다. 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의를 숨기고 당신이 jsFiddle를 추가 할 수 현재 사업부

출처

2013-01-08 22:31:29 SoluableNonagon

JS 드롭 다운 메뉴

답변

관련 문제