導航欄動畫

我在訂購我的導航欄時遇到問題。我想製作橫向導航欄，但現在就像一張桌子！我在http://cssdeck.com/labs/navigation-dropdown-with-flip-effect, 中發現了這種導航欄，但它沒有顯示如何製作具有該效果的完整水平導航欄。同時，我需要補充一點，我想讓我的主頁和關於部分免費下拉列表！我該如何解決它？（我不想讓我的選擇水平只是我的關於家庭和底部）導航欄動畫

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link href="StyleSheet.css" rel="stylesheet" /> 
    <title>Navigation Bar</title> 
</head> 
<body> 
    <div id="nav"> 
     <div id="nav_wrapper" style="margin:0 auto; display:inline-block;"> 
      <div> 
       <ul class="navigation"> 
        <a class="main" href="#url">Home</a> 

       </ul> 
       <ul class="navigation"> 
        <a class="main" href="#url">About</a> 

       </ul> 
      </div> 
      <div> 
       <ul class="navigation"> 
        <a class="main" href="#url">Navigation &#9660; </a> 

        <li class="n1"> 
         <a href="#">item #1</a> 
        </li> 
        <li class="n2"> 
         <a href="#">item #2</a> 
        </li> 
        <li class="n3"> 
         <a href="#">item #3</a> 
        </li> 
        <li class="n4"> 
         <a href="#">item #4</a> 
        </li> 
        <li class="n5"> 
         <a href="#">item #5</a> 
        </li> 
       </ul> 
       <ul class="navigation"> 
        <a class="main" href="#url">Navigation &#9660;</a> 

        <li class="n1"> 
         <a href="#">item #1</a> 
        </li> 
        <li class="n2"> 
         <a href="#">item #2</a> 
        </li> 
        <li class="n3"> 
         <a href="#">item #3</a> 
        </li> 
        <li class="n4"> 
         <a href="#">item #4</a> 
        </li> 
        <li class="n5"> 
         <a href="#">item #5</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

我的CSS：

body { 
    background: #E9E9E9; 
} 
h2 { 
    text-align: center; 
    color: #CCC; 
} 
a { 
    display: block; 
    text-decoration: none; 
    width: 100%; 
    height: 100%; 
    color: #999; 
} 
/* NAVIGATION */ 

.navigation { 
    list-style: none; 
    padding: 0; 
    width: 250px; 
    height: 40px; 
    margin: 0; 
    background: #95C11F; 
    position: relative; 
    z-index: 100; 
    display: inline-block; 
} 
.navigation, 
.navigation a.main { 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
} 
.navigation:hover, 
.navigation:hover a.main { 
    border-radius: 4px 4px 0 0; 
    -webkit-border-radius: 4px 4px 0 0; 
    -moz-border-radius: 4px 4px 0 0; 
} 
.navigation a.main { 
    height: 40px; 
    font: bold 15px/40px arial, sans-serif; 
    text-align: center; 
    text-decoration: none; 
    color: #FFF; 
    -webkit-transition: 0.2s ease-in-out; 
    -o-transition: 0.2s ease-in-out; 
    transition: 0.2s ease-in-out; 
    position: relative; 
    z-index: 100; 
    display: inline-block; 
} 
.navigation li { 
    width: 250px; 
    height: 40px; 
    background: #F7F7F7; 
    font: normal 12px/40px arial, sans-serif !important; 
    color: #999; 
    text-align: center; 
    margin: 0; 
    -webkit-transform-origin: 50% 0%; 
    -o-transform-origin: 50% 0%; 
    transform-origin: 50% 0%; 
    -webkit-transform: perspective(350px) rotateX(-90deg); 
    -o-transform: perspective(350px) rotateX(-90deg); 
    transform: perspective(350px) rotateX(-90deg); 
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05); 
    -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05); 
} 
.navigation li:nth-child(even) { 
    background: #F5F5F5; 
} 
.navigation li:nth-child(odd) { 
    background: #EFEFEF; 
} 
.navigation li.n1 { 
    -webkit-transition: 0.2s linear 0.8s; 
    -o-transition: 0.2s linear 0.8s; 
    transition: 0.2s linear 0.8s; 
} 
.navigation li.n2 { 
    -webkit-transition: 0.2s linear 0.6s; 
    -o-transition: 0.2s linear 0.6s; 
    transition: 0.2s linear 0.6s; 
} 
.navigation li.n3 { 
    -webkit-transition: 0.2s linear 0.4s; 
    -o-transition: 0.2s linear 0.4s; 
    transition: 0.2s linear 0.4s; 
} 
.navigation li.n4 { 
    -webkit-transition: 0.2s linear 0.2s; 
    -o-transition: 0.2s linear 0.2s; 
    transition: 0.2s linear 0.2s; 
} 
.navigation li.n5 { 
    border-radius: 0px 0px 4px 4px; 
    -webkit-transition: 0.2s linear 0s; 
    -o-transition: 0.2s linear 0s; 
    transition: 0.2s linear 0s; 
} 
.navigation:hover li { 
    -webkit-transform: perspective(350px) rotateX(0deg); 
    -o-transform: perspective(350px) rotateX(0deg); 
    transform: perspective(350px) rotateX(0deg); 
    -webkit-transition: 0.2s linear 0s; 
    -o-transition: 0.2s linear 0s; 
    transition: 0.2s linear 0s; 
} 
.navigation:hover .n2 { 
    -webkit-transition-delay: 0.2s; 
    -o-transition-delay: 0.2s; 
    transition-delay: 0.2s; 
} 
.navigation:hover .n3 { 
    -webkit-transition-delay: 0.4s; 
    -o-transition-delay: 0.4s; 
    transition-delay: 0.4s; 
} 
.navigation:hover .n4 { 
    transition-delay: 0.6s; 
    -o-transition-delay: 0.6s; 
    transition-delay: 0.6s; 
} 
.navigation:hover .n5 { 
    -webkit-transition-delay: 0.8s; 
    -o-transition-delay: 0.8s; 
    transition-delay: 0.8s; 
}

來源

2014-11-03 Faraz Akbari

你只需要兩個步驟：

爲了避免表效果：將所有列表放在相同的div下，而不是像現在一樣放在兩個不同的div之間。
要將所有菜單項放置在同一高度，請將vertical-align:top;添加到navigation類。

你可以看到它在這裏工作：http://jsfiddle.net/0essn7yv/（我改變了寬度從250px到150px，使菜單在小屏幕上更好地適應）。

來源

2014-11-03 02:05:19

非常感謝你，它的工作！ – 2014-11-03 04:20:06

回答

相關問題