垂直整頁寬度和高度手風琴類型菜單

我真的在努力工作，但沒有得出結論。這是什麼樣的我的HTML和CSS現在看：垂直整頁寬度和高度手風琴類型菜單

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

*{ 
    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 2012-02-15 03:18:03

這個概念很簡單。您想要捕獲圖像上的單擊事件，重置所壓縮圖像的父容器的所有同級的寬度，然後繼續展開其寬度。

東西這樣簡單的工作原理：

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

on()加入jQuery的爲1.7版本。如果您使用的是早期版本，請使用live()或bind()。請記住，該功能的語法已更改，因此請注意。

您可以代替document獲得的父母越親密，事件授權就越好。

300px和50px就是這種情況下的例子。你可以使用任何你想要的寬度。

而在整頁寬度方面，Apple.com做了一個非常鬼鬼祟祟的事情，用他們的導航來遵守他們不斷擴大的搜索欄。他們已經在每個導航元素上應用display:table-cell，這樣當一個擴展時，另一個擴展。實際上，它非常巧妙，你可以將它應用於你的情況。

來源

2012-02-15 03:27:20 Purag

垂直整頁寬度和高度手風琴類型菜單

回答

相關問題