CSS3二级导航菜单制作步骤详解
假如想要实现网页的二级导航，我们可以用法JS技术，动态的显示和躲藏二级菜单，固然也可以用法CSS技术来实现。并且这里推举用法CSS，由于其效率更高，更流畅。这里将介绍二级菜单的动态显示与躲藏。

1结构

普通导航的主体我们主要是用法ulli标签


















首页






产品





小程序



企业站










服务





技术支持

产品外包








关于我们

人才聘请












2布局

导航的布局，因为子元素要随着父元素，所以对二级菜单选取定位布局。要想让多个li在一行中显示，那么就需要让li举行浮动。





body{margin:0;font-size:14px;color:666}

ul,ol{margin:0;padding:0;list-style:none;}

a{text-decoration:none;color:666;}

/*一级导航*/

/*背景*/

ul.menu,ul.submenu{

background-color:ededed;

}


/*一级导航浮动*/

ul.menu::after{

content:&39;&39;;

display:block;

clear:both;

}

ul.menu>li{

float:left;

width:120px;

line-height:3em;

height:3em;

text-align:center;

cursor:pointer;

}

/*二级导航项分割线*/


ul.submenu{

/*默认躲藏*/

display:none;

}

ul.submenu>li{

border-bottom:1pxsolidfff;

}

/
*内容区*/

.content{

min-height:800px;

background-color:fff;

}

3.二级菜单显示特效

光标放到导航上，当前元素背景变深，字体彩变淡。

假如有二级菜单，显示二级菜单


为了实现上述两个特效，我们可以利用伪类挑选器（:hover）来捕获光标悬浮的操作。并且用法伪类挑选器（:hover）来挑选到当前菜单对应的二级菜单

利用如下CSS可以迅速实现该特效。

/*选中特效*/

ul.menu>li:hover{

background-color:666;

}

ul.menu>li:hover>a{


color:fff;

}

ul.menu>li:hover>ul.submenu{

display:block;

}

4.动画

上述代码中二级菜单的显示是眨眼的。能否提供一个缓慢动画过渡的效果，固然也是没问题。这里需要用法animation来举行动画的配置，那么动画帧可以自己写或者是寻求第三方
代码库（animate.css）的支持。这里我将用法透亮     度来实现这个淡入效果



/*动画帧*/

@keyframesfade{

from{

opacity:0;

}

to{


opacity:1;

}

}
导航菜单
/*基础动画样式*/

.animated{

animation-duration:1s;

animation-fill-mode:both;

}

.fadeIn{

animation-name:fade;

animation-direction:normal;

}

动画定义好后，可以挺直将动画样式引用到ul.submenu上，注重，假如用法的是animate.css，那么上述步骤将省略，挺直用其提供好的动画样式即可。






小程序



企业站




   
   
   
   
   
   
    本文转载自中文网

     

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。