How to create a Menu Bar with hover effect using HTML & CSS

by Salitha Chathuranga August 06, 2017 0 Comments
When we are visiting web sites, there's a very common section in almost every web site. That's the navigation bar or menu bar. To simplify more, it can be considered as the part including some common words such as Home, About, Contact and etc. Many sites use this to navigate to different web pages of a site. When we move on the cursor on one element of the menu, you can see its color is changed or another effect. After we click on that element, it takes us to a new web page usually. I'm going to explain how to create this type of a menu bar. The special feature is the Responsiveness. This  menu is  responsive which means when the browser is resized to a mobile phone range it will change the way of appearing.

First you need to  create two files as usual called index.html and style.css.

index.html

<!DOCTYPE html>
<html>
<head>
<title>CSS Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <ul id="menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">News</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Gallery</a></li>
 </ul>
</body>
</html>

I think now you are familiar with basic HTML tags such as head, link, title. Among these, link tag is linking the stylesheet to add styles to the structure of menu. As usual the meta tag within the head section, is for the responsive part of this menu bar. s

Here ul tag is used to make a list of the links of the web pages. The basic structure of the unordereed list is like this. 
    <ul><li></li</ul>
List items are included as li tags. Within li tags I have included the anchor tags to refer to the pages of each link. But here "#" is placed for the href attribute. I did so because in this article I'm not going to create or use web pages the other links. This hash sign tells to reload the same when it is clicked.You can create them and include in the anchor tags.Now you have the basic menu with the links called Home, About, News, Contact, Gallery. Let's move on to the styling part.

You can download source files from here.

First, unordered list is given a property and  a value called list-style-type: none; to remove the dot marks existing for the list items. The padding and margin is set as zero. Therefore there's no spacing around the ul part. Then the list items in the list are arranged horizontally using display: inline-block. List is moved to the left side of the page using float: left.

Next you need to style the links. Here display: block is placing the links in a center position within the each block. Height of the links should be given carefully not to exceed the link list wrapping area. I centered the text lines(here - links) and gave #FFF color for links. Background means the color background area of the of the links. With the property and value called text-decoration: none;

Do you want to change the color of links  when you move the cursor on them? Hover is the hero doing this job. Set a background as your want. Now you have completed the styling and you have a menu bar like this.


The final part is arrange this menu into a responsive one.

As I told in a previous article, media queries should be used for this. I have set a max-width to the style indicating when the browser is keeping the width below 760 pixels, it will shows the styles included within the media queries. If the browser exceeds the width of 760 pixels, then the appearance will be same as you coded before. To do this I set the width as 100% for the list, list items and links. By doing this, all those tags will use the full width of the re arranged browser untill it exceeds 760 pixels. Final preview will be like this.


Now you have a nice and simple design for a responsive menu bar. I think you have created it. If you have any problem, let me know by dropping a comment.
Good Luck!








0 Comments