Pure.CSS菜单组件用法菜单|Pure.CSS

本文概述

创建垂直菜单的语法
垂直菜单(默认)
创建水平菜单
选定和禁用菜单项

Pure.CSS默认情况下提供垂直菜单。在Pure.CSS中自定义菜单非常容易, 因为样式最少且使用的特异性较低。
注意：使用以下代码在你的HTML页面中添加Pure。

< link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

创建垂直菜单的语法

< div class="pure-menu"> < span class="pure-menu-heading"> Brand Name< /span> < ul class="pure-menu-list"> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Home< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> About Us< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Privacy Policy< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Blog< /a> < /li> < /ul> < /div>

垂直菜单(默认) 例子

< !DOCTYPE html> < html> < div class="pure-menu"> < span class="pure-menu-heading"> Brand Name< /span> < ul class="pure-menu-list"> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Home< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> About Us< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Privacy Policy< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Blog< /a> < /li> < /ul> < /div> < /html>

立即测试
输出

文章图片
创建水平菜单你可以通过添加类名称” pure-menu-horizo??ntal” 将上述垂直菜单更改为水平菜单
【Pure.CSS菜单组件用法】使用以下链接将Pure添加到HTML。

< link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

例子

< !DOCTYPE html> < html> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> < div class="pure-menu pure-menu-horizontal"> < a href="http://www.srcmini.com/#" class="pure-menu-heading pure-menu-link"> < /a> < ul class="pure-menu-list"> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> BRAND< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> News< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Sports< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Finance< /a> < /li> < /ul> < /div> < /html>

立即测试
输出

文章图片
选定和禁用菜单项你可以使用类别名称” pure-menu-selected” 将菜单项标记为选中, 使用类别名称” pure-menu-disabled” 将菜单项标记为禁用
例子

< !DOCTYPE html> < html> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> < div class="pure-menu pure-menu-horizontal"> < ul class="pure-menu-list"> < li class="pure-menu-item pure-menu-selected"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Selected< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Normal< /a> < /li> < li class="pure-menu-item pure-menu-disabled"> Disabled< /li> < /ul> < /div> < /html>

立即测试
输出