Materialize CSS如何实现导航栏？代码示例

2021年4月3日17:37:13 发表评论 948 次浏览

本文概述

导航栏是网页中的一个用户界面元素, 其中包含指向网站其他部分的链接。它显示为每页顶部的水平链接列表。它放置在页面主要内容之前或标题下方。导航栏包含在HTML5中<nav>然后是一个容器" div", 其中包含容器的2个主要部分导航栏。一种徽标或品牌链接和导航链接。链接可以根据应用要求向左或向右对齐。

以下是使用导航栏的不同方式。

1.右对齐：为了使导航栏链接向右对齐，在<ul>元素中添加right类。

HTML示例

<!DOCTYPE html>
<html>
  
<head>
     <!--Import Google Icon Font-->
     <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
         rel = "stylesheet">
  
     <!-- 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 browser know website is
         optimized for mobile -->
     <meta name = "viewport" content =
         "width=device-width, initial-scale=1.0" />
</head>
  
<body>
     <nav>
         <div class = "nav-wrapper green">
             <a href = "#" class = "brand-logo">
                 Materialize
             </a>
              
             <ul id = "nav-mobile" class =
                 "right hide-on-med-and-down">
                 <li>
                     <a href =
"https://www.lsbin.org/materialize-css-tables/?ref=rp">
                         Table
                     </a>
                 </li>
                  
                 <li>
                     <a href =
"https://www.lsbin.org/materialize-css-colors/?ref=rp">
                         Colors
                     </a>
                 </li>
                  
                 <li><a href =
"https://www.lsbin.org/materialize-css-typography/?ref=rp">
                         Typography
                     </a>
                 </li>
             </ul>
         </div>
     </nav>
  
     <!-- Compiled and minified JavaScript -->
     <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
     </script>
</body>
  
</html>

输出如下：

Materialize CSS如何实现导航栏？代码示例1

左对齐：要左对齐导航栏链接, 左课被添加到<ul>元素。

HTML示例

<!DOCTYPE html>
<html>
  
<head>
     <!--Import Google Icon Font-->
     <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
         rel = "stylesheet">
  
     <!-- 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 browser know website is 
         optimized for mobile -->
     <meta name = "viewport" content =
         "width=device-width, initial-scale=1.0" />
</head>
  
<body>
     <nav>
         <div class = "nav-wrapper green">
             <a href = "#" class="brand-logo 
                 right">Materialize
             </a>
              
             <ul id = "nav-mobile" class =
                 "left hide-on-med-and-down">
                  
                 <li>
                     <a href =
"https://www.lsbin.org/materialize-css-tables/?ref=rp">
                         Table
                     </a>
                 </li>
                  
                 <li>
                     <a href =
"https://www.lsbin.org/materialize-css-colors/?ref=rp">
                         Colors
                     </a>
                 </li>
                  
                 <li>
                     <a href =
"https://www.lsbin.org/materialize-css-typography/?ref=rp">
                         Typography
                     </a>
                 </li>
             </ul>
         </div>
     </nav>
  
     <!-- Compiled and minified JavaScript -->
     <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
     </script>
</body>
  
</html>

输出如下：

Materialize CSS如何实现导航栏？代码示例2

中心徽标：

为了使徽标居中对齐,

中心课

被添加到<a class="brand-logo">。尽管徽标将在中下屏幕上居中显示。使用此功能时, 请确保链接不重叠。

HTML示例

<!DOCTYPE html>
<html>
  
<head>
     <!--Import Google Icon Font-->
     <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
         rel = "stylesheet">
  
     <!-- 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 browser know website is 
         optimized for mobile -->
     <meta name = "viewport" content =
         "width=device-width, initial-scale=1.0" />
</head>
  
<body>
     <nav>
         <div class = "nav-wrapper green">
             <a href = "#" class="brand-logo 
                 center">Materialize
             </a>
              
             <ul id = "nav-mobile" class =
                 "left hide-on-med-and-down">
                  
                 <li>
                     <a href =
"https://www.lsbin.org/materialize-css-tables/?ref=rp">
                         Table
                     </a>
                 </li>
                  
                 <li><a href =
"https://www.lsbin.org/materialize-css-colors/?ref=rp">
                         Colors
                     </a>
                 </li>
                  
                 <li><a href =
"https://www.lsbin.org/materialize-css-typography/?ref=rp">
                         Typography
                     </a>
                 </li>
             </ul>
         </div>
     </nav>
  
     <!-- Compiled and minified JavaScript -->
     <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
     </script>
</body>
  
</html>

输出如下：

Materialize CSS如何实现导航栏？代码示例3

活动项目：为此, 它用于表示当前活动页面活性类添加到" li"标签中。

HTML示例

<!DOCTYPE html>
<html>
  
<head>
     <!--Import Google Icon Font-->
     <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
         rel = "stylesheet">
  
     <!-- 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 browser know website is 
         optimized for mobile -->
     <meta name = "viewport" content =
         "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  
     <nav>
         <div class = "nav-wrapper green">
             <a href = "#" class="brand-logo 
                 center">Materialize
             </a>
              
             <ul id = "nav-mobile" class =
                 "left hide-on-med-and-down">
                 <li>
                     <a href =
"https://www.lsbin.org/materialize-css-tables/?ref=rp">
                         Table
                     </a>
                 </li>
                  
                 <li class = "active">
                     <a href =
"https://www.lsbin.org/materialize-css-colors/?ref=rp">
                         Colors
                     </a>
                 </li>
                  
                 <li><a href =
"https://www.lsbin.org/materialize-css-typography/?ref=rp">
                         Typography
                     </a>
                 </li>
             </ul>
         </div>
     </nav>
  
     <!-- Compiled and minified JavaScript -->
     <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
     </script>
</body>
  
</html>

输出如下：

Materialize CSS如何实现导航栏？代码示例4

带有标签的导航栏：它用于扩展导航栏的组件。要使用这个导航扩展类添加到外部" nav"标签。这将允许" nav-wrapper"和" height"内的选项卡组件可变。

HTML示例

<!DOCTYPE html>
<html>
  
<head>
     <!--Import Google Icon Font-->
     <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
         rel = "stylesheet">
  
     <!-- 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 browser know website 
         is optimized for mobile -->
     <meta name = "viewport" content =
         "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  
     <nav class = "nav-extended green">
         <div class = "nav-wrapper">
             <div class = "container">
                 <a href = "#" class = "brand-logo">
                     LOGO
                 </a>
                  
                 <a href = "#" data-activates = "mobile-menu"
                     class = "button-collapse">
                     <i class = "material-icons">menu</i>
                 </a>
  
                 <ul class = "right hide-on-med-and-down">
                     <li><a href = "#">item1</a></li>
                     <li><a href = "#">item2</a></li>
                     <li><a href = "#">item3</a></li>
                     <li><a href = "#">item4</a></li>
                 </ul>
                 <ul class = "side-nav" id = "mobile-menu">
                     <li><a href = "#">item1</a></li>
                     <li><a href = "#">item2</a></li>
                     <li><a href = "#">item3</a></li>
                     <li><a href = "#">item4</a></li>
                 </ul>
                 <!-- tabs items -->
                 <ul class = "tabs tabs-transparent">
                     <li class = "tab"><a href = "#test1">
                         Test 1
                     </a></li>
  
                     <li class = "tab"><a class = "active" 
                         href = "#test2">Test 2</a></li>
                     <li class = "tab disabled"><a href =
                         "#test3">Disabled Tab</a></li>
                     <li class = "tab"><a href = "#test4">
                         Test 4
                     </a></li>
                 </ul>
             </div>
         </div>
     </nav>
     <!-- tabs content -->
     <div id = "test1" class = "col s12">Test 1</div>
     <div id = "test2" class = "col s12">Test 2</div>
     <div id = "test3" class = "col s12">Test 3</div>
     <div id = "test4" class = "col s12">Test 4</div>
  
     <!-- Compiled and minified JavaScript -->
     <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
     </script>
</body>
  
</html>

输出如下：

Materialize CSS如何实现导航栏？代码示例5

下拉式菜单：要添加导航栏下拉菜单, " ul"下拉结构将添加到页面中。然后, 添加一个元素以触发下拉菜单。下拉菜单结构的" id"提供给下拉菜单的" data-target"属性。

HTML示例

<!DOCTYPE html>
<html>
  
<head>
   <!--Import Google Icon Font-->
   <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons" 
     rel = "stylesheet">
  
   <!-- 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 browser know website 
     is optimized for mobile -->
   <meta name = "viewport" content =
     "width=device-width, initial-scale=1.0" />
</head>
  
<body>
   <nav>
     <div class = "nav-wrapper green">
       <div class = "container">
         <a href = "#" class = "brand-logo">LOGO</a>
         <!-- mobile menu trigger -->
         <a href = "#" data-activates = "mobile-menu"
           class = "button-collapse">
           <i class = "material-icons">menu</i>
         </a>
         <!-- desktop menu content -->
         <ul class = "right hide-on-med-and-down">
           <li><a href = "#">Option-1</a></li>
           <li><a href = "#">Option-2</a></li>
           <!-- desktop menu dropdown trigger -->
           <li><a class = "dropdown-button" href = "#!"
               data-activates = "dropdown1">
               Dropdown
               <i class = "material-icons right">
                 arrow_drop_down
               </i>
             </a></li>
           <li><a href = "#">Option-3</a></li>
           <!-- desktop menu dropdown content -->
           <ul id = 'dropdown1' class =
             'dropdown-content green-text'>
             <li><a href = "#!">sub-dropdown1</a></li>
             <li><a href = "#!">sub-dropdown2</a></li>
             <li><a href = "#!">sub-dropdown3</a></li>
             <li><a href = "#!">sub-dropdown4</a></li>
           </ul>
         </ul>
         <!-- mobile and tablet menu content -->
         <ul id = "mobile-menu" class = "side-nav">
           <li>
             <div class = "userView">
               <div class = "background">
                 <img src =
"http://lorempixel.com/output/abstract-q-c-640-480-10.jpg" alt = "">
               </div>
             </div>
           </li>
           <li><a href = "#!">Option-1</a></li>
           <li><a href = "#!">Option-2</a></li>
           <li class = "no-padding">
             <ul class = "collapsible collapsible-accordion">
               <li>
                 <!-- Mobile and tablet menu dropdown trigger -->
                 <a class = "collapsible-header">Dropdown
                   <i class = "material-icons right">
                     arrow_drop_down
                   </i>
                 </a>
                 <div class = "collapsible-body">
                   <!-- Mobile and tablet dropdown content -->
                   <ul>
                     <li><a href = "#!">sub-dropdown1</a></li>
                     <li><a href = "#!">sub-dropdown2</a></li>
                     <li><a href = "#!">sub-dropdown3</a></li>
                     <li><a href = "#!">sub-dropdown4</a></li>
                   </ul>
                 </div>
               </li>
             </ul>
           </li>
           <li><a href = "#!">Option-3</a></li>
         </ul>
       </div>
     </div>
   </nav>
    
   <!-- Compiled and minified JavaScript -->
   <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
   </script>
</body>
  
</html>

输出如下：

Materialize CSS如何实现导航栏？代码示例6

固定导航栏：为了使导航栏固定, 外包装" div"与导航栏固定类已添加。这将抵消所有其他内容, 同时使导航栏固定。

HTML示例

<!DOCTYPE html>
<html>
  
<head>
   <!--Import Google Icon Font-->
   <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
     rel = "stylesheet">
  
   <!-- 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 browser know website 
       is optimized for mobile -->
   <meta name = "viewport" content =
     "width=device-width, initial-scale=1.0" />
</head>
  
<body>
   <div class = "navbar-fixed ">
     <nav>
       <div class = "nav-wrapper green">
         <a href = "#" class = "brand-logo">LOGO</a>
         <a href = "#" data-activates =
           "mobile-menu" class = "button-collapse">
           <i class = "material-icons">menu</i></a>
         <ul class = "right hide-on-med-and-down">
           <li><a href = "#">item1</a></li>
           <li><a href = "#">item2</a></li>
           <li><a href = "#">item3</a></li>
           <li><a href = "#">item4</a></li>
         </ul>
         <ul class = "side-nav" id = "mobile-menu">
           <li><a href = "#">item1</a></li>
           <li><a href = "#">item2</a></li>
           <li><a href = "#">item3</a></li>
           <li><a href = "#">item4</a></li>
         </ul>
       </div>
     </nav>
   </div>
   <h1>lsbin</h1>
   <h1>lsbin</h1>
   <h1>lsbin</h1>
   <h1>lsbin</h1>
   <h1>lsbin</h1>
   <h1>lsbin</h1>
   <h1>lsbin</h1>
   <h1>lsbin</h1>
  
   <!-- Compiled and minified JavaScript -->
   <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
   </script>
</body>
  
</html>

输出如下：

Materialize CSS如何实现导航栏？代码示例7

图标链接：可以将图标添加到导航栏。对于"图标"作为链接, 无需添加其他类, 只需使用一世标签。

HTML示例

<!DOCTYPE html>
<html>
  
<head>
   <!--Import Google Icon Font-->
   <link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
     rel = "stylesheet">
  
   <!-- 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 browser know website 
     is optimized for mobile -->
   <meta name = "viewport" content =
     "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  
   <nav>
     <div class = "nav-wrapper green">
       <a href = "#!" class = "brand-logo">
         <i class = "material-icons">
           account_box
         </i>Logo
       </a>
        
       <ul class = "right hide-on-med-and-down">
         <li><a href = "sass.html"><i class =
           "material-icons">search</i></a>
         </li>
          
         <li><a href = "badges.html"><i class =
           "material-icons">add_to_photos</i></a>
         </li>
         <li><a href = "collapsible.html">
           <i class = "material-icons">refresh</i></a>
         </li>
         <li><a href = "mobile.html"><i class =
           "material-icons">dehaze</i></a>
         </li>
       </ul>
     </div>
   </nav>
    
   <!-- Compiled and minified JavaScript -->
   <script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
   </script>
  
</body>
  
</html>

输出如下：

Materialize CSS如何实现导航栏？代码示例8
木子山

发表评论

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