个性化阅读
专注于IT技术分析

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>

立即测试

输出

PureCSS菜单1

创建水平菜单

你可以通过添加类名称” pure-menu-horizo​​ntal”将上述垂直菜单更改为水平菜单

使用以下链接将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>

立即测试

输出

PureCSS菜单2

选定和禁用菜单项

你可以使用类别名称” 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>

立即测试

输出

PureCSS菜单3
赞(0) 打赏
未经允许不得转载:srcmini » Pure.CSS菜单组件用法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏