elementui导航栏内容右对齐_前端组件之垂直导航栏

今天继续组件文章的分享。结合上一次讲到的水平导航栏，今天就讲讲垂直导航栏。其实原理和水平导航栏原理其实差不多类似，那么就来谈谈。

说道垂直导航栏，用到最多的地方就是电商网页，特别像淘宝，天猫，京东，苏宁这些网站都有垂直导航栏。垂直导航栏能展示到更多的子项目供用户链接到想了解的地方。这里结合天猫的垂直导航栏来说说垂直导航栏如何写完成。

天猫商城的垂直导航栏

首先肯定需要一个最外层的盒子来装载全部的内容。然后就是商品分类那一栏和下面的导航区。因为有的网页比较喜欢隐藏导航栏，然后通过滑动鼠标或者点击鼠标到商品导航栏。所以比较建议把商品分类和下面的导航区域分成两个不同的div装载。

第一步：先创建放载导航栏的div盒子

代码清单:html代码

<

清除并改变一下一些浏览器的默认样式

代码清单:css代码

* 

第二步：创建一级垂直导航

有了盒子,那么就来做垂直导航部分。当然最好就是使用ul和li啦。那么就以一个li为例，分析一下垂直导航栏中有什么结构。