导航栏动画 [英] Navigation Bar Animation

查看：207
本文介绍了导航栏动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个问题，为了我的导航栏。我想让导航栏水平的风格，但它现在就像一个表！
我发现这种导航条中： http://cssdeck.com/labs/导航下拉，与翻转效果，
但它并没有显示我怎样才能让与效果完全水平的导航栏。
同时我要补充一点，我想我的家庭和公司一款免费的下拉列表！
我该如何解决呢？ （我不想让我的选择水平只是我的关于家庭和底部）

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
    ＆LT;链接HREF =stylesheet.css中的rel =stylesheet属性/＆GT;
    ＆LT;标题＆GT;导航栏＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; D​​IV ID =导航＆GT;
        ＆LT; D​​IV ID =nav_wrapper的风格=保证金：0汽车;显示：inline-block的;＆GT;
            ＆LT; D​​IV＆GT;
                ＆LT; UL类=导航＆GT;
                    ＆LT;一类=主要的href =＃网址＆GT;家庭和LT; / A＆GT;                ＆LT; / UL＆GT;
                ＆LT; UL类=导航＆GT;
                    ＆LT;一类=主要的href =＃网址＆gt;关于＆LT; / A＆GT;                ＆LT; / UL＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV＆GT;
                ＆LT; UL类=导航＆GT;
                    ＆LT;一类=主要的href =＃网址＆GT;导航和放大器;＃9660; ＆所述; / A＆GT;                    ＆LT;李班=N1＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃1＆LT; / A＆GT;
                    ＆LT; /李＆GT;
                    ＆LT;李班=N2＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃2'; / A＆GT;
                    ＆LT; /李＆GT;
                    ＆LT;李班=N3＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃3'; / A＆GT;
                    ＆LT; /李＆GT;
                    ＆LT;李班=N4＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃4℃; / A＆GT;
                    ＆LT; /李＆GT;
                    ＆LT;李班=N5＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃5℃; / A＆GT;
                    ＆LT; /李＆GT;
                ＆LT; / UL＆GT;
                ＆LT; UL类=导航＆GT;
                    ＆LT;一类=主要的href =＃网址＆GT;导航和放大器;＃9660;＆LT; / A＆GT;                    ＆LT;李班=N1＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃1＆LT; / A＆GT;
                    ＆LT; /李＆GT;
                    ＆LT;李班=N2＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃2'; / A＆GT;
                    ＆LT; /李＆GT;
                    ＆LT;李班=N3＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃3'; / A＆GT;
                    ＆LT; /李＆GT;
                    ＆LT;李班=N4＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃4℃; / A＆GT;
                    ＆LT; /李＆GT;
                    ＆LT;李班=N5＆GT;
                        ＆LT; A HREF =＃＆GT;项目＃5℃; / A＆GT;
                    ＆LT; /李＆GT;
                ＆LT; / UL＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

我的CSS：

  {体
  背景：＃E9E9E9;
}
H2 {
  文本对齐：中心;
  颜色：#CCC;
}
一个 {
  显示：块;
  文字修饰：无;
  宽度：100％;
  高度：100％;
  颜色：＃999;
}
/ * *导航/{的.navigation
  列表样式：无;
  填充：0;
  宽度：250像素;
  高度：40像素;
  保证金：0;
  背景：＃95C11F;
  位置：相对;
  的z-index：100;
  显示：inline-block的;
}
。导航，
的.navigation a。主{
  边界半径：4PX;
  -webkit-边界半径：4PX;
  -moz-边界半径：4PX;
}
的.navigation：悬停，
的.navigation：悬停a。主{
  边界半径：4PX递四方0 0;
  -webkit-边界半径：4PX递四方0 0;
  -moz-边界半径：4PX递四方0 0;
}
的.navigation a。主{
  高度：40像素;
  字体：加粗15像素/ 40像素宋体，无衬线;
  文本对齐：中心;
  文字修饰：无;
  颜色：#FFF;
  -webkit-过渡：0.2S易于在出;
  -o过渡：0.2S易于在出;
  过渡：0.2S易于在出;
  位置：相对;
  的z-index：100;
  显示：inline-block的;
}
李的.navigation {
  宽度：250像素;
  高度：40像素;
  背景：＃F7F7F7;
  字体：12px的正常/ 40像素宋体，无衬线很重要;！
  颜色：＃999;
  文本对齐：中心;
  保证金：0;
  -webkit-变换原点：50％0％
  -o-变换原点：50％0％
  变换原点：50％0％
  -webkit-变换：观点（350像素）rotateX（-90deg）;
  -o变换：观点（350像素）rotateX（-90deg）;
  变换：视角（350像素）rotateX（-90deg）;
  的box-shadow：0像素2px的10px的RGBA（0，0，0，0.05）。
  -webkit-的box-shadow：0像素2px的10px的RGBA（0，0，0，0.05）。
  -moz-的box-shadow：0像素2px的10px的RGBA（0，0，0，0.05）。
}
李的.navigation：第n个孩子（甚至）{
  背景：＃F5F5F5;
}
李的.navigation：第n个孩子（奇数）{
  背景：#EFEFEF;
}
的.navigation li.n1 {
  -webkit-过渡：0.2秒线性0.8S;
  -o过渡：0.2秒线性0.8S;
  过渡：0.2S线性0.8S;
}
的.navigation li.n2 {
  -webkit-过渡：0.2秒线性0.6秒;
  -o过渡：0.2秒线性0.6秒;
  过渡：0.2S线性0.6秒;
}
的.navigation li.n3 {
  -webkit-过渡：0.2秒线性0.4秒;
  -o过渡：0.2秒线性0.4秒;
  过渡：0.2S线性0.4秒;
}
的.navigation li.n4 {
  -webkit-过渡：0.2秒线性0.2S;
  -o过渡：0.2秒线性0.2S;
  过渡：0.2S 0.2S线性;
}
的.navigation li.n5 {
  边界半径：0像素0像素4PX 4PX;
  -webkit-过渡：0.2秒线性0;
  -o过渡：0.2秒线性0;
  过渡：0.2S线性0;
}
的.navigation：悬停李{
  -webkit-变换：观点（350像素）rotateX（0deg）;
  -o变换：观点（350像素）rotateX（0deg）;
  变换：视角（350像素）rotateX（0deg）;
  -webkit-过渡：0.2秒线性0;
  -o过渡：0.2秒线性0;
  过渡：0.2S线性0;
}
的.navigation：悬停.n2 {
  -webkit-过渡延迟：0.2秒;
  -o过渡延迟：0.2秒;
  过渡延迟：0.2秒;
}
的.navigation：悬停.n3 {
  -webkit-过渡延迟：0.4秒;
  -o过渡延迟：0.4秒;
  过渡延迟：0.4秒;
}
的.navigation：悬停.n4 {
  过渡延迟：0.6秒;
  -o过渡延迟：0.6秒;
  过渡延迟：0.6秒;
}
的.navigation：悬停.n5 {
  -webkit-过渡延迟：0.8秒;
  -o过渡延迟：0.8秒;
  过渡延迟：0.8秒;
}


解决方案

您只需要两个步骤：


  • 要避免表效应：地方所有列表下，而不是在同一个 DIV 在两个不同的 DIV 取值因为它是现在。

  • 要放在同一高度的所有菜单项，添加垂直对齐：首位; 到导航类。

您可以看到它在这里工作： http://jsfiddle.net/0essn7yv/ （我改变了宽度为250像素到150像素使菜单更适合在小屏幕）。

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

解决方案

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).

这篇关于导航栏动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆