二级导航菜单全屏展示

 实现效果:

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.一级导航和二级导航是分开的两块,如果有三级导航如何添加,封装成组件;

posted @ 2016-08-17 18:50  星耀学园  阅读(1539)  评论(0编辑  收藏  举报