Navigation Bar Animation

问题

I am having a problem to order my navigation bar. I want to make navigation bar in horizontal style, but it's like a table now! I found this kind of navigation bar in: http://cssdeck.com/labs/navigation-dropdown-with-flip-effect, but it didn't show how can i make a complete horizontal navigation bar with that effect. At the same time i need to add that i want to make my Home and About section free of drop down list! How can i fix it? (I don't want to make my options horizontal just my About and Home bottom)

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

My 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;
}

回答1:

You just need two steps:

To avoid the table effect: place all the lists under the same div instead of in two different divs as it is right now.
To place all the menu items on the same height, add the vertical-align:top; to the navigation class.

You can see it working here: http://jsfiddle.net/0essn7yv/ (I changed the width from 250px to 150px to make the menu fit better in the small screen).

来源：https://stackoverflow.com/questions/26706665/navigation-bar-animation

标签

html

css

navigationbar

animated