element/examples/docs/guideline.md

选择合适的导航

选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。

侧栏导航：

可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。

一级类目	适用于结构简单的网站；只有一级页面时，不需要使用面包屑。
二级类目	侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。
三级类目	适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。

顶部导航：

顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。

一级类目	适用于导航较少，页面篇幅较长的网站；

<script> import Lightbox from 'examples/components/lightbox'; module.exports = { name: 'guideline', components: { Lightbox }, data() { return { showIndexDialog1: false, showIndexDialog2: false, showIndexDialog3: false, showIndexDialog4: false }; } }; </script> <style lang="css"> .guideline { img { width: 500px; display: block; margin-bottom: 19px; box-shadow: 1px 2px 3px rgba(0, 0, 0, .2); } table { background-color: #f8f8f8; width: 100%; p { margin: 0; width: 500px; } } td { padding: 36px; } tr { border-bottom: 1px solid #e4e4e4; &:last-child { border-bottom: 0; } } td:first-child { background-color: #f3f3f3; width: 21%; min-width: 100px; text-align: center; color: #666; font-size: 14px; } } </style>