4

Pure CSS Bulma Responsive Nav Bar (Navigation Bar)

 2 years ago
source link: http://siongui.github.io/2017/02/22/css-only-bulma-responsive-navbar/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Pure CSS Bulma Responsive Nav Bar (Navigation Bar)

Updated: July 14, 2020

[Update] This post is for earlier version of Bulma such as 0.3.1 or 0.4.0. Please see new post [5] for new Bulma 0.9.0.

CSS only responsive Bulma nav bar (navigation bar) without JavaScript. Toggle mobile menu with CSS only. No JavaScript required.

Demo

I apply the technique of CSS only menu toggle to the responsive nav bar code in Bulma, and create this responsive navigation bar.

The key points of the technique [2]:

  • A visible HTML label element (only visible on small screen < 768px).
  • A invisible HTML input checkbox element, referenced by the label element.
  • The menu to be toggled
  • A CSS rule to hide/show the menu according to whether the checkbox is checked.

When users click or touch on the visible label element, it will make the invisible input checkbox checked/unchecked. And the CSS rule will show the menu if the checkbox is checked, or hide the menu if the checkbox is unchecked.

Full source code is as follows:

index.html | repository | view raw 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS only Bulma nav bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
  <style>
    @media screen and (max-width: 768px) {
      #menu-toggle:checked + .nav-menu {
        display: block;
      }
    }
  </style>
</head>
<body>

<nav class="nav">
  <div class="container">
    <div class="nav-left">
      <a class="nav-item">
        Theory and Practice
      </a>
    </div>

    <label for="menu-toggle" class="nav-toggle">
      <span></span>
      <span></span>
      <span></span>
    </label>
    <input type="checkbox" id="menu-toggle" class="is-hidden"/>

    <div class="nav-right nav-menu">
      <a class="nav-item">
        About
      </a>
      <a class="nav-item">
        Archives
      </a>
      <a class="nav-item">
        Tags
      </a>
    </div>
  </div>
</nav>

</body>
</html>

Note: If you use Bulma 0.4.0 and the screen width is between 769px and 999px, the div.nav-right element will be shifted to left. If you want to keep it to the right, you can remove the div.container.

Tested on:

  • Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit), Bulma 0.3.1
  • Chromium Version 57.0.2987.98 Built on Ubuntu , running on Ubuntu 16.10 (64-bit), Bulma 0.4.0

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK