Creating Navbar Without Using Bootstrap
The example we will make in this lesson is similar to the navbar class in the BootStrap library. In other words, we will prepare the navbar class that is available with BootStrap ourselves.
If you say what is needed, our aim is to learn and to make our site design more original. For example, it will be up to us to set the screen width from which the menu will merge.
You can see an example of the navbar class offered with BootStrap at the top of the site you are currently visiting. The most important feature of this class is that when the screen width drops below 768 px, the menu merges to become the Collapsible Menu. Because in this way, it will be more useful on mobile devices.
Thanks to the new features that come with CSS3, it has become very easy to prepare such menus. Of course, you can guess that we will also use some JavaScript for this.
Let's show the codes of the example, which you can find in the Topic Examples section at the bottom of the page, as follows:
Html Part:
We create the content of our menu with html elements. The active class has been applied to the first element of the menu, and this element will always appear. It also allows us to give a different look than other links.
If you look carefully at the a tag at the end, you will see 3 empty divs inside. A menu icon is designed here. How the menu icon will appear will also be adjusted with css codes.
We can increase or decrease the number of links as much as we want.
<div class="menu" id="topMenu">
<a href="index.html" class="active">Home</a>
<a href="gallery.html">Gallery</a>
<a href="p1.html">Page 1</a>
<a href="p2.html">Page 2</a>
<a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<div></div>
<div></div>
<div></div>
</a>
</div>
Css Part:
The appearance of the menu is determined by css styles as below. You can make the necessary arrangements according to your own design. An explanation has been added as a comment line for each of the features.
The most important operation here is to hide the menu icon on large screens. And this width is set to 800px with media query. You can write the value that suits you here. In this way, the menu icon will appear on screens narrower than the specified width and the menu items will be placed vertically.
/* menu general properties */
.menu {
background-color: #555;
overflow: hidden;
}
/* links */
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* links hover */
.menu a:hover {
background-color: #ddd;
color: black;
}
/* style to differentiate the leftmost element */
.active {
background-color: #000;
font-weight:bold;
color: white;
}
/* hide the menu button */
.menu .icon {
display: none;
}
/* menu icon */
.menu .icon div {
width: 35px;
height: 3px;
background-color: white;
margin: 3px 0;
}
/* When the width is below 800px, hide all but the first element and show the menu icon. */
@media screen and (max-width: 800px) {
.menu a:not(:first-child) {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The responsive class will be applied to the menu with javascript (on clicking the icon), so the menu will be vertical on small screens. */
@media screen and (max-width: 600px) {
.menu.responsive {position: relative;}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: left;
}
}
JavaScript Part:
Using js function below, we ensure that the responsive class is applied to the menu when the menu icon is clicked for the first time, and removed when it is clicked again.
function myFunction() {
var x = document.getElementById("topMenu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
Making navbar without using bootstrap, how to make flexible menu, change when navbar collapse, bootstrap set navbar hide width, what width to merge top menu
EXERCISES
|
Responsive Menu Using CSS
|
Try It
|
Let's prepare a menu that automatically resizes according to the screen and becomes a pop-up menu when it falls below a certain width.
Click the Try It Yourself button to see the full working version.
Read 606 times.