materialize CSS如何实现下拉菜单？

2021年3月19日12:54:32 发表评论 851 次浏览

本文概述

Materialize CSS提供了一个下拉功能, 允许用户从列表中的一组给定值中选择一个值。要将下拉列表添加到任何按钮, 必须确保data-target属性与id在<ul>标记中。

下拉菜单中使用的主要类和属性是： 

  1. 的下拉内容类用于标识应将哪个<ul>标记用作Materialize下拉组件。
  2. 的数据激活属性用于指定下拉<ul>元素的ID.

语法如下：

的HTML

<!-- Dropdown Trigger -->
< h5 >
   < a class = 'dropdown-button btn green' 
      href = '#'
      data-activates = 'dropdown1' >
     Drop Me!
     < i class = "large material-icons" >
       arrow_drop_down
     </ i >
   </ a >
</ h5 >

在下拉列表中, 可以添加以下元素：

  • 通过使用分频器类。可以将其添加到空的<li>标记中以显示分隔符。
  • 通过使用添加图标物质图标使用<i>标记的类。可以指定要使用的图标, 该图标将显示在列表项的文本旁边。

例子：

的HTML

<!DOCTYPE html>
< html >
  
< head >
     <!--Import Google Icon Font-->
     < link rel = "stylesheet" href =
"https://fonts.googleapis.com/icon?family=Material+Icons" >
  
     <!-- Compiled and minified CSS -->
     < link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" >
  
     < script type = "text/javascript" src =
         "https://code.jquery.com/jquery-2.1.1.min.js" >
     </ script >
  
     <!-- Let the browser know that the
   website is optimized for mobile -->
     < meta name = "viewport" content =
         "width=device-width, initial-scale=1.0" />
</ head >
  
< body >
     < h4 >Dropdown in Materialize:</ h4 >
     <!-- Dropdown Trigger -->
     < h5 >< a class = 'dropdown-button btn green'
             href = '#' data-activates = 'dropdown1' >
             Drop Me!
             < i class = "large material-icons" >
                 arrow_drop_down
             </ i >
         </ a >
     </ h5 >
  
     <!-- Dropdown Structure -->
     < ul id = 'dropdown1' class = 'dropdown-content' >
  
         <!-- Define the links in the dropdown -->
         < li >
             < a href =
"https://www.lsbin.org/materialize-css-collections/?ref=rp" >
                 Collections
             </ a >
         </ li >
         < li >
             < a href =
"https://www.lsbin.org/materialize-css-icons/?ref=rp" >
                 Icons
             </ a >
         </ li >
  
         <!-- Define a divider -->
         < li class = "divider" ></ li >
         < li >< a href = "#!" >Table</ a ></ li >
  
         <!-- Define a list item with an icon -->
         < li >
             < a href = "#!" >
                 < i class = "material-icons" >
                     view_module
                 </ i >
                 Home
             </ a >
         </ li >
     </ ul >
  
     <!-- Compiled and minified JavaScript -->
     < script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
     </ script >
</ body >
  
</ html >

输出如下：

实现CSS下拉菜单1
实现CSS下拉菜单2
木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: