二级导航菜单全屏展示

 实现效果:

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

转载于:https://www.cnblogs.com/xxx91hx/p/5781353.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值