Question

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

Answer 1

您只需要两个步骤：

要避免表格效果：将所有列表放在同一div下，而不是现在放在两个不同的div中。
要将所有菜单项置于同一高度，请将vertical-align:top;添加到navigation课程。

你可以看到它在这里工作：http://jsfiddle.net/0essn7yv/（我将宽度从250px更改为150px以使菜单在小屏幕中更好地适应。）

导航栏动画

1 个答案: