当前位置：酷客网 > Bulma教程 > Bulma基础教程 > Bulma创建导航栏

Bulma创建导航栏

2020-09-09 分类：Bulma基础教程 阅读(1244) 评论(0)

Bulma创建导航栏，Bulma提供了灵活的响应式导航组件，可用于展示如下内容：

  • 公司logo，也是可跳转到首页的超链接；
  • 导航的移动端图标；
  • 品牌理念；
  • 用户名；
  • 下拉菜单，包含用户信息、报告问题的按钮和退出登录的按钮。
<nav class="navbar has-shadow">  
    <div class="navbar-brand">    
    <! -- logo、品牌理念和navbar-burger -->    
    </div>
    <div class="navbar-menu">    
    <! -- 用户名、下拉菜单 -->  
    </div>   
</nav>

导航品牌标志

导航栏会展示公司logo。借助Bulma提供的修饰符类，可以确保logo在所有终端设备上恰当展现，而不用编写额外的样式代码。

导航logo在导航栏的左侧。它总是可见的，可以包含导航子元素，也具有navbar-burger类，可用于控制导航菜单的显示或隐藏。

添加公司logo和品牌理念，如图所示:

<div class="navbar-brand">    
  <a class="navbar-item"> 
  <img src="images/coolcou_logo.png">    
  </a>   
</div>

Bulma创建导航栏

这里无须指定logo图片的大小，因为Bulma会控制navbar-brand下图片大小自适应。

现在导航栏还没有什么有用的功能，因为还未添加导航链接。下面创建3个<span>
标签，每个标签将作为汉堡图标的一行。现在点击汉堡图标，还没有任何交互功能。可以使用navbar-burger组件类来实现汉堡图标。

接下来添加navbar-burger类，navbar-burger图标仅在终端设备宽度小于1024像素的情况下显示，如图所示:

<div class="navbar-brand">      
    <a class="navbar-item">    
    <img src="images/coolcou_logo.png">    
    </a>    
    <div class="navbar-burger">       
    <span></span>    
    <span></span>     
    <span></span>     
    </div>  
</div>

Bulma创建导航栏
这样就完成了导航栏左侧的功能，接下来编写右侧的功能。

完整代码如下:

<! DOCTYPE html>    
<html>      
    <head>  
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">        
        <title>Login</title>      
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">     
    </head>     
    <body>        
    <! -- 在此处编写页面内容代码 -->      
    <section class="hero is-fullheight">
        <nav class="navbar has-shadow">  
            <div class="navbar-brand">    
                <! -- logo、品牌理念和navbar-burger -->  
                <a class="navbar-item"> 
                    <img src="images/coolcou_logo.png">
                </a> 
                <div class="navbar-burger">       
                    <span></span>    
                    <span></span>     
                    <span></span>     
                </div> 
            </div>
            <div class="navbar-menu">    
            <! -- 用户名、下拉菜单 -->  
            </div>   
        </nav>

    </section>

    </body>    
</html>

导航菜单

Bulma的navbar-menu类包含剩余所有导航元素，当点击navbar-burger展开的时候，就会显示这部分内容。navbar-menu内容是默认隐藏的，可以通过添加is-active来更改默认显示状态。

在桌面设备上，navbar-menu的内容始终显示，并且会自适应导航栏剩余空间。

导航菜单拆分成两部分:

  • navbar-start：左侧部分，紧挨着navbar-brand。
  • navbar-end：右侧部分。

左侧部分比较适合展示品牌理念，添加在navbar-brand之后的位置，如图所示:

<div class="navbar-menu"> 
    <div class="navbar-start">   
    <div class="navbar-item">   
    <small>Publishing at the speed of technology</small>  
    </div>    
    </div>   
</div>

Bulma创建导航栏

如果调整浏览器窗口大小，就会发现在窗口大于1024像素时品牌理念部分才会显示。

下拉菜单

在导航元素nav-start后面添加nav-end元素创建下拉菜单：

<div class="navbar-end">
</div>

navbar-end元素包含可点击的导航链接。当鼠标指针移动到用户名上时下拉菜单会展开，显示用户Alex Johnson的信息。
既然“Alex Johnson”是导航中的链接，因此可以使用Bulma的narbar-item类来适配导航中的链接样式，该类同样适用于下拉菜单中的导航链接。可以通过has-dropdown修饰符来隐藏下拉菜单，除非鼠标指针悬浮在菜单之上，如图所示。

<div class="navbar-end">  
    <div class="navbar-item has-dropdown">  
        <div class="navbar-link">    
        Alex Johnson    
        </div>      
        <div class="navbar-dropdown">     
        Dropdown content     
        </div>      
    </div>    
</div>

Bulma创建导航栏

  • has-dropdown：给navbar-item添加该类会隐藏其内部的下拉菜单。
  • navbar-link：该导航链接元素总是可见的，并会触发下拉菜单。
  • navbar-dropdown：下拉菜单容器。

navbar-dropdown元素默认是隐藏的，可以通过鼠标或是CSS类来控制是否显示，用鼠标指针悬浮控制状态更为简单，给navbar-item添加is-hoverable类即可实现。

<div class="navbar-item has-dropdown is-hoverable">

鼠标指针悬浮到Alex Johnson菜单项上，便会展开下拉菜单，如图所示:

Bulma创建导航栏

在navbar-dropdown元素下也可以添加navbar-item元素，下面增加3个带图标的导航子项。
将之前代码的“Dropdown content”内容改为如下代码，效果如图所示:

<div class="navbar-dropdown">    
  <a class="navbar-item">  
      <div>        
      <span class="icon is-small">     
      <i class="fa fa-user-circle-o"></i>    
      </span>      
      Profile  
      </div>   
  </a>   
  <a class="navbar-item">     
      <div>      
      <span class="icon is-small">   
      <i class="fa fa-bug"></i>  
      </span>     
      Report bug   
      </div>   
  </a>   
  <a class="navbar-item">  
      <div>      
      <span class="icon is-small">   
      <i class="fa fa-sign-out"></i>    
      </span>      
      Sign Out   
      </div>
  </a>  
</div>

这样就编写好了管理页面的响应式导航栏，如图所示:
Bulma创建导航栏

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit book</title>
    <link rel="stylesheet" href="icons/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/website.css">
  </head>
  <body>

    <nav class="navbar has-shadow">
      <div class="navbar-brand">
        <a class="navbar-item">
          <img src="images/coolcou_icon.png">
        </a>
        <div class="navbar-burger burger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div class="navbar-menu">
        <div class="navbar-start">
          <div class="navbar-item">
            <div>
              <img src="images/coolcou_type.png" width="250.5" height="21">
              <br>
              <small>Publishing at the speed of technology</small>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <div class="navbar-item has-dropdown is-hoverable">
            <div class="navbar-link">
              Alex Johnson
            </div>
            <div class="navbar-dropdown is-right">
              <a class="navbar-item">
                <div>
                  <span class="icon is-small">
                    <i class="fa fa-user-circle-o"></i>
                  </span>
                  Profile
                </div>
              </a>
              <a class="navbar-item">
                <div>
                  <span class="icon is-small">
                    <i class="fa fa-bug"></i>
                  </span>
                  Report bug
                </div>
              </a>
              <a class="navbar-item">
                <div>
                  <span class="icon is-small">
                    <i class="fa fa-sign-out"></i>
                  </span>
                  Sign Out
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </body>
</html>

输出如图所示:
Bulma创建导航栏

赞(1)

相关推荐

评论 抢沙发

评论前必须登录！

 

Bulma基础教程