세로 전체 페이지 너비 & 높이 아코디언 타입 메뉴

나는이 일에 열심히 노력하고 있지만 결론에 도달하지는 않습니다.세로 전체 페이지 너비 & 높이 아코디언 타입 메뉴

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<link type="text/css" rel="stylesheet" href="style2.css"/> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="static"><a href="#"><img src="unai.jpg"/></a></div> 
     <div class="menu"><div class="content"></div> <a href="#"><img src="unai.jpg"/></a></div> 
     <div class="menu"><div class="content"></div> <a href="#"><img src="unai.jpg"/></a></div> 
     <div class="menu"><div class="content"></div> <a href="#"><img src="unai.jpg"/></a></div> 
     <div class="menu"><div class="content"></div> <a href="#"><img src="unai.jpg"/></a></div> 
    </div> 
</body> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="javascript2.js"></script> 
</html>

CSS : 내 HTML 지금 CSS 모양 같은 것을 이것은

*{ 
    margin: 0; 
    padding: 0; 
    } 

html, body, #wrapper, #wrapper div{ 
    height:100%; 
    } 

#wrapper{ 
    width: 100%; 
    } 
    #wrapper #static{ 
     float: left; 
     } 

    #wrapper > div{ 
     position: relative; 
     width: 20%; 
     background-color: #9F81F7;  
     float: right; 
     z-index: 9999; 
     } 
     #wrapper div.content{ 
      position: relative; 
      left: 0; 
      top: 0; 
      width: 100%; 
      opacity: 0.01; 
      background-color: #FF0000; 
      z-index: -1; 
      } 
     #wrapper div:last-child:after{ 
      content: " "; 
      clear: both; 
     } 

    #wrapper a{ 
     width: 137px; 
     position:absolute; 
     top:50%; 
     left: 68px; 
     margin-top: -106px; 
    }

그리고 내가 무엇을 달성하는 데 필요한입니다 : 나는 모든 앉아 봤는데

ACCORDION

오늘은 아무것도 아니지만 아직은. 일부 JQuery 코드를 시도했지만 필요한 것은 아무 것도없는 것 같습니다.
필요한 것은이 아코디언 효과를 얻는 것입니다. 나머지는 나 자신을 할 수있다. 도움을 주시면 감사하겠습니다.

출처

2012-02-15 daniel.tosaba

당신은 이미 일부 jQuery를 시도했다고 말했죠. 전체 스 니펫을 요구하는 것은 정말 과장입니다. – Purag

개념은 매우 간단합니다. 이미지에서 클릭 이벤트를 캡처하고 누른 이미지의 상위 컨테이너의 모든 형제의 너비를 재설정 한 다음 너비를 늘리려합니다. 이처럼 간단

뭔가 작동합니다

$(document).on("click", "#wrapper div.content a", function(){ 
    var $this = $(this); 
    $this 
     .closest("div.content") 
     .css("width","300px") 
     .siblings() 
     .css("width","50px"); 
});

on() 버전 1.7으로 jQuery를 추가했다. 이전 버전을 사용하는 경우 live() 또는 bind()을 사용하십시오. 함수의 구문이 변경되었으므로주의해야합니다.

document 대신 얻을 수있는 부모가 가까울수록 이벤트 위임이 좋습니다.

300px 및 50px은이 경우의 예입니다. 원하는 너비를 사용할 수 있습니다.

그리고 전체 페이지 너비면에서 Apple.com은 확장 검색 막대를 준수하기 위해 탐색에 매우 부적절한 작업을 수행합니다. 그들은 각각의 nav 요소에 display:table-cell을 적용 했으므로 하나가 확장되면 다른 요소도 확장됩니다. 그것은 매우 독창적입니다. 실제로 상황에 적용 할 수 있습니다.

출처

2012-02-15 03:27:20 Purag

세로 전체 페이지 너비 & 높이 아코디언 타입 메뉴

답변

관련 문제