CSS摺頁像菜單問題

我試圖建立，將有像摺紙過渡菜單，還挺像這樣的：CSS摺頁像菜單問題

enter image description here

現場測試：http://www.cssplay.co.uk/menus/cssplay-3d-unfolding-menu.html

這裏是我的代碼：

HTML

<nav> 
    <li class="hov">Hover Me! 
    <ul class="main"> 
     <li>Item1</li> 
     <li>Item2</li> 
     <li>Item3</li> 
     <li>Item4</li> 
    </ul> 
    </li> 
</nav>

CSS

nav{ 

} 

ul,li{ 
    margin: 0; 
    padding: 0; 
} 
.main{ 
    position:absolute; 
    z-index:1; 

} 
.main li{ 
    list-style:none; 
    background: blue; 
    width:100px; 
    padding: 0 5px; 
    border: 1px solid black; 
    height: 30px; 

    line-height: 30px; 
    /*margin-top: -30px;*/ 

    -webkit-transition: all .5s ease-in-out; 

} 

.main li:nth-child(odd){ 

    -webkit-transform-origin: top; 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
} 

.main li:nth-child(even){ 

    -webkit-transform-origin: bottom; 
    -webkit-transform: perspective(350px) rotateX(90deg); 
} 

.main { 

    -webkit-transition: all .5s ease-in-out; 
    -webkit-transform-origin: 50% 0%; 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
} 

.hov:hover .main { 

    -webkit-transform-origin: top; 
    -webkit-transform: perspective(350px) rotateX(0deg); 
} 

.hov:hover li:nth-child(odd){ 
    -webkit-transform-origin: top; 
    -webkit-transform: perspective(350px) rotateX(0deg); 
    margin-top:0; 
} 

.hov:hover li:nth-child(even){ 
    -webkit-transform-origin: bottom; 
    -webkit-transform: perspective(350px) rotateX(0deg); 
    margin-top:0; 
} 

.main li:first-child{ 
    margin-top:0; 
} 

.hov{ 
    position:relative; 
    height: 40px; 
    width:112px; 
    background: green; 
    color: white; 
    font-size: 13px; 
    font-family: Helvetica; 
    font-weight:bold; 
    text-align: center; 
    line-height: 40px; 
    list-style:none; 
    z-index:2; 



}

現場演示

http://codepen.io/razvan-tudosa/pen/BxgJl

問：

我怎樣才能讓子菜單粘在一起作爲例子嗎？

來源

2013-06-21 Peter_Fretter

'http：// codepen.io/razvan-tudosa/pen/BxgJl'不適用於FF。 – Nitesh

你需要在這裏發佈你的代碼，而不僅僅是鏈接，就好像鏈接將會死亡一樣，你的問題不會對未來的訪問者有用，因此投下近距離投票，希望你很快添加代碼到你的問題中。 –

這個問題'我怎樣才能讓子菜單不粘在一起？' – Baba

他想提高子菜單。

對於這樣做編輯這些CSS類喜歡到這裏：

.main li:nth-child(even){ 
    margin-top:-65px; 
    -webkit-transform-origin: bottom; 
    -webkit-transform: perspective(350px) rotateX(90deg); 
} 

.hov:hover li:nth-child(odd){ 
    -webkit-transform-origin: top; 
    -webkit-transform: perspective(30px) rotateX(0deg); 
    margin-top:0; 
} 

.hov:hover li:nth-child(even){ 
    -webkit-transform-origin: bottom; 
    -webkit-transform: perspective(30px) rotateX(0deg); 
    margin-top:0; 
}

然後它似乎真的接近其他效果。

UPDATE：

示例here。

nav{ 
 

 
} 
 

 
ul,li{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main{ 
 
    position:absolute; 
 
    z-index:1; 
 
    
 
} 
 
.main li{ 
 
    list-style:none; 
 
    background: blue; 
 
    width:100px; 
 
    padding: 0 5px; 
 
    border: 1px solid black; 
 
    height: 30px; 
 

 
    line-height: 30px; 
 
    /*margin-top: -30px;*/ 
 
    
 
    -webkit-transition: all .5s ease-in-out; 
 
    
 
} 
 

 
.main li:nth-child(odd){ 
 
    
 
    -webkit-transform-origin: top; 
 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
 
} 
 

 
.main li:nth-child(even){ 
 
    margin-top:-65px; 
 
    -webkit-transform-origin: bottom; 
 
    -webkit-transform: perspective(350px) rotateX(90deg); 
 
} 
 

 
.main { 
 
    
 
    -webkit-transition: all .5s ease-in-out; 
 
    -webkit-transform-origin: 50% 0%; 
 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
 
} 
 

 
.hov:hover .main { 
 
    
 
    -webkit-transform-origin: top; 
 
    -webkit-transform: perspective(350px) rotateX(0deg); 
 
} 
 

 
.hov:hover li:nth-child(odd){ 
 
    -webkit-transform-origin: top; 
 
    -webkit-transform: perspective(30px) rotateX(0deg); 
 
    margin-top:0; 
 
} 
 

 
.hov:hover li:nth-child(even){ 
 
    -webkit-transform-origin: bottom; 
 
    -webkit-transform: perspective(30px) rotateX(0deg); 
 
    margin-top:0; 
 
} 
 

 
.main li:first-child{ 
 
    margin-top:0; 
 
} 
 

 
.hov{ 
 
    position:relative; 
 
    height: 40px; 
 
    width:112px; 
 
    background: green; 
 
    color: white; 
 
    font-size: 13px; 
 
    font-family: Helvetica; 
 
    font-weight:bold; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    list-style:none; 
 
    z-index:2; 
 
    
 
    
 
    
 
}

<nav> 
 
    <li class="hov">Hover Me! 
 
    <ul class="main"> 
 
     <li>Item1</li> 
 
     <li>Item2</li> 
 
     <li>Item3</li> 
 
     <li>Item4</li> 
 
    </ul> 
 
    </li> 
 
</nav>

來源

2013-06-21 12:12:00 rkpasia

謝謝你！你真棒！ –

-1

如果您在cssplay網站查看源代碼，你會發現，斯圖尼科耳使用的div每個項目 - 不是李

<div class="odd first">... 
    <div class="even">... 
    <div class="odd">... 
    <div class="even">... 
    <div class="odd last">... 
</div></div></div></div></div>

的CSS的通過處理每個類使用HTML5轉換

.concertina div.odd {background:#ddd; 
-webkit-transform:perspective(350px) rotateX(-90deg); 
-o-transform:perspective(350px) rotateX(-90deg); 
transform: perspective(350px) rotateX(-90deg); 
} 
.concertina div.even {background:#ccc; 
-webkit-transform:perspective(350px) rotateX(90deg); 
-o-transform:perspective(350px) rotateX(90deg); 
transform: perspective(350px) rotateX(90deg); 
}

檢查www.caniuse.com以查看瀏覽器兼容性。

來源

2013-06-21 12:12:44 jeff

CSS摺頁像菜單問題

回答

相關問題