导航栏动画

我在订购我的导航栏时遇到问题。我想制作横向导航栏，但现在就像一张桌子！我在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

回答

相关问题