码迷,mamicode.com
首页 > 其他好文 > 详细

二级导航菜单全屏展示

时间:2016-08-17 19:35:32      阅读:350      评论:0      收藏:0      [点我收藏+]

标签:

 实现效果:

1.二级菜单下拉展示的全屏展示,下拉内容块居中

2.一级菜单 并不是所有都有二级下拉菜单 ,不能使用,通过比较标签内的属性来确认具体是哪个一级导航有下拉菜单,比如 <div index="product"></div>对比一级菜单和二级菜单的index属性来显示对应的内容;

<ul>

<li>

<a href="#">一级导航</a>

<div class="sub_nav">二级导航</div> 这里二级导航就不方便控制全屏效果 ,只能单独分离出来,所有的

</li>

</ul> 

技术分享

 

 

 注意 一级导航块和二级导航块在同一个面内 z-index:99

技术分享

 

代码实现需要注意的效果

1.获取对应属性 index

2.一级导航保持选中状态

3.一级导航和二级导航是分开的两块,如果有三级导航如何添加,封装成组件;

二级导航菜单全屏展示

标签:

原文地址:http://www.cnblogs.com/xxx91hx/p/5781353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!