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

问题描述

限时删除!!

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

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

我的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 取值因为它是现在。

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

您可以看到它在这里工作:(我改变了宽度为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).

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

1403页,肝出来的..

09-06 19:39