srcmini本文概述
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="#" class="pure-menu-link">Home</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">About Us</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Privacy Policy</a>
</li>
<li class="pure-menu-item">
<a href="#" 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="#" class="pure-menu-link">Home</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">About Us</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Privacy Policy</a>
</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">Blog</a>
</li>
</ul>
</div>
</html>立即测试
输出
创建水平菜单
你可以通过添加类名称” pure-menu-horizontal”将上述垂直菜单更改为水平菜单
使用以下链接将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="#" class="pure-menu-heading pure-menu-link"></a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">BRAND</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" 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="#"
class="pure-menu-link">Selected</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Normal</a></li>
<li class="pure-menu-item pure-menu-disabled">Disabled</li>
</ul>
</div>
</html>立即测试
输出
评论前必须登录！
注册