縦フルページ幅＆高さアコーディオンタイプメニュー

私は本当にこの1つに取り組んでいますが、結論には至りません。縦フルページ幅＆高さアコーディオンタイプメニュー

<!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

縦フルページ幅＆高さアコーディオンタイプメニュー

答えて

関連する問題