index.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <title>导航</title>
  2. <div class="layui-card layadmin-header">
  3. <div class="layui-breadcrumb" lay-filter="breadcrumb">
  4. <a lay-href="">主页</a>
  5. <a><cite>组件</cite></a>
  6. <a><cite>导航</cite></a>
  7. </div>
  8. </div>
  9. <style>
  10. /* 这段样式只是用于演示 */
  11. #LAY-component-nav .layui-nav-tree {vertical-align: top;}
  12. </style>
  13. <div class="layui-fluid" id="LAY-component-nav">
  14. <div class="layui-row layui-col-space15">
  15. <div class="layui-col-md6">
  16. <div class="layui-card">
  17. <div class="layui-card-header">水平导航菜单</div>
  18. <div class="layui-card-body">
  19. <ul class="layui-nav" lay-filter="component-nav">
  20. <li class="layui-nav-item"><a href="javascript:;">最新活动</a></li>
  21. <li class="layui-nav-item layui-this">
  22. <a href="javascript:;">产品</a>
  23. <dl class="layui-nav-child">
  24. <dd><a href="javascript:;">选项1</a></dd>
  25. <dd><a href="javascript:;">选项2</a></dd>
  26. <dd><a href="javascript:;">选项3</a></dd>
  27. </dl>
  28. </li>
  29. <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
  30. <li class="layui-nav-item">
  31. <a href="javascript:;">解决方案</a>
  32. <dl class="layui-nav-child">
  33. <dd><a href="javascript:;">移动模块</a></dd>
  34. <dd><a href="javascript:;">后台模版</a></dd>
  35. <dd class="layui-this"><a href="javascript:;">选中项</a></dd>
  36. <dd><a href="javascript:;">电商平台</a></dd>
  37. </dl>
  38. </li>
  39. <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
  40. </ul>
  41. </div>
  42. </div>
  43. <div class="layui-card">
  44. <div class="layui-card-header">导航带徽章和图片</div>
  45. <div class="layui-card-body">
  46. <ul class="layui-nav" lay-filter="component-nav">
  47. <li class="layui-nav-item">
  48. <a href="javascript:;">控制台<span class="layui-badge">9</span></a>
  49. </li>
  50. <li class="layui-nav-item">
  51. <a href="javascript:;">个人中心<span class="layui-badge-dot"></span></a>
  52. </li>
  53. <li class="layui-nav-item" lay-unselect="">
  54. <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
  55. <dl class="layui-nav-child">
  56. <dd><a href="javascript:;">修改信息</a></dd>
  57. <dd><a href="javascript:;">安全管理</a></dd>
  58. <dd><a href="javascript:;">退了</a></dd>
  59. </dl>
  60. </li>
  61. </ul>
  62. </div>
  63. </div>
  64. <div class="layui-card">
  65. <div class="layui-card-header">导航主题</div>
  66. <div class="layui-card-body">
  67. <ul class="layui-nav layui-bg-cyan" lay-filter="component-nav">
  68. <li class="layui-nav-item"><a href="javascript:;">藏青导航</a></li>
  69. <li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
  70. <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
  71. <li class="layui-nav-item">
  72. <a href="javascript:;">解决方案</a>
  73. <dl class="layui-nav-child">
  74. <dd><a href="javascript:;">移动模块</a></dd>
  75. <dd><a href="javascript:;">后台模版</a></dd>
  76. <dd><a href="javascript:;">电商平台</a></dd>
  77. </dl>
  78. </li>
  79. <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
  80. </ul>
  81. <br>
  82. <ul class="layui-nav layui-bg-green" lay-filter="component-nav">
  83. <li class="layui-nav-item"><a href="javascript:;">墨绿导航</a></li>
  84. <li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
  85. <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
  86. <li class="layui-nav-item">
  87. <a href="javascript:;">解决方案</a>
  88. <dl class="layui-nav-child">
  89. <dd><a href="javascript:;">移动模块</a></dd>
  90. <dd><a href="javascript:;">后台模版</a></dd>
  91. <dd><a href="javascript:;">电商平台</a></dd>
  92. </dl>
  93. </li>
  94. <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
  95. </ul>
  96. <br>
  97. <ul class="layui-nav layui-bg-blue" lay-filter="component-nav">
  98. <li class="layui-nav-item"><a href="javascript:;">艳蓝导航</a></li>
  99. <li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
  100. <li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
  101. <li class="layui-nav-item">
  102. <a href="javascript:;">解决方案</a>
  103. <dl class="layui-nav-child">
  104. <dd><a href="javascript:;">移动模块</a></dd>
  105. <dd><a href="javascript:;">后台模版</a></dd>
  106. <dd><a href="javascript:;">电商平台</a></dd>
  107. </dl>
  108. </li>
  109. <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
  110. </ul>
  111. </div>
  112. </div>
  113. </div>
  114. <div class="layui-col-md6">
  115. <div class="layui-card">
  116. <div class="layui-card-header">垂直导航菜单</div>
  117. <div class="layui-card-body">
  118. <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="component-nav-active" style="margin-right: 10px;">
  119. <li class="layui-nav-item layui-nav-itemed">
  120. <a href="javascript:;">默认展开</a>
  121. <dl class="layui-nav-child">
  122. <dd><a href="javascript:;">选项一</a></dd>
  123. <dd><a href="javascript:;">选项二</a></dd>
  124. <dd><a href="javascript:;">选项三</a></dd>
  125. <dd><a href="javascript:;">跳转项</a></dd>
  126. </dl>
  127. </li>
  128. <li class="layui-nav-item">
  129. <a href="javascript:;">解决方案</a>
  130. <dl class="layui-nav-child">
  131. <dd><a href="javascript:;">移动模块</a></dd>
  132. <dd><a href="javascript:;">后台模版</a></dd>
  133. <dd><a href="javascript:;">电商平台</a></dd>
  134. </dl>
  135. </li>
  136. <li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
  137. <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
  138. </ul>
  139. <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="component-nav-active">
  140. <li class="layui-nav-item layui-nav-itemed">
  141. <a href="javascript:;">默认展开</a>
  142. <dl class="layui-nav-child">
  143. <dd><a href="javascript:;">选项一</a></dd>
  144. <dd><a href="javascript:;">选项二</a></dd>
  145. <dd><a href="javascript:;">选项三</a></dd>
  146. <dd><a href="http://www.layui.com/admin/" target="_blank">跳转项</a></dd>
  147. </dl>
  148. </li>
  149. <li class="layui-nav-item">
  150. <a href="javascript:;">解决方案</a>
  151. <dl class="layui-nav-child">
  152. <dd><a href="javascript:;">移动模块</a></dd>
  153. <dd><a href="javascript:;">后台模版</a></dd>
  154. <dd><a href="javascript:;">电商平台</a></dd>
  155. </dl>
  156. </li>
  157. <li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
  158. <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
  159. </ul>
  160. </div>
  161. </div>
  162. <div class="layui-card">
  163. <div class="layui-card-header">面包屑</div>
  164. <div class="layui-card-body">
  165. <span class="layui-breadcrumb" lay-filter="breadcrumb">
  166. <a href="javascript:;">首页</a>
  167. <a href="javascript:;">演示</a>
  168. <a><cite>导航元素</cite></a>
  169. </span>
  170. <br>
  171. <span class="layui-breadcrumb" lay-separator="-" lay-filter="breadcrumb">
  172. <a href="javascript:;">首页</a>
  173. <a href="javascript:;">演示</a>
  174. <a><cite>导航元素</cite></a>
  175. </span>
  176. <br>
  177. <span class="layui-breadcrumb" lay-separator="\" lay-filter="breadcrumb">
  178. <a href="javascript:;">首页</a>
  179. <a href="javascript:;">演示</a>
  180. <a><cite>导航元素</cite></a>
  181. </span>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. <script>
  188. layui.use(['admin'], function(){
  189. var $ = layui.$
  190. ,admin = layui.admin
  191. ,element = layui.element;
  192. element.render('nav', 'component-nav');
  193. element.render('nav', 'component-nav-active');
  194. element.on('nav(component-nav-active)', function(elem){
  195. layer.msg(elem.text());
  196. });
  197. });
  198. </script>