5
Pure CSS Bootstrap Responsive Navbar (Navigation Bar)
source link: http://siongui.github.io/2017/03/23/css-only-bootstrap-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 Bootstrap Responsive Navbar (Navigation Bar)
March 23, 2017
CSS only responsive Bootstrap navbar (navigation bar) without JavaScript. Toggle mobile menu with CSS only. No JavaScript required.
I apply the technique of CSS only menu toggle to the responsive navbar code in Bootstrap, and create this responsive navigation bar.
The key points of the technique [1] [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 (ul.navbar-nav in demo)
- 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 Bootstrap nav bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
@media screen and (max-width: 768px) {
#menu-toggle:not(:checked) + .navbar-nav {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">
Theory and Practice
</a>
<label for="menu-toggle" class="navbar-toggle collapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
</div>
<input type="checkbox" id="menu-toggle" class="hidden"/>
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-item">About</a></li>
<li><a class="nav-item">Archives</a></li>
<li><a class="nav-item">Tags</a></li>
<ul>
</div>
</nav>
</body>
</html>
Tested on:
- Chromium Version 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)
- Bootstrap 3.3.7
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK