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="#" 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>

立即测试

输出

本文概述

注意：使用以下代码在你的HTML页面中添加Pure。

创建垂直菜单的语法

垂直菜单(默认)

创建水平菜单

选定和禁用菜单项

猜你喜欢