Thursday, January 15, 2015

How to Create a Custom Navigation Menu in HTML and CSS

Navigation bar allow you to present your website in a organized and intuitive manner. Having a navigation bar is very important for a website in order to provide a better easy navigation to your website for visitors. We can add navigation bar gadget to a blog from the Blogger dashboard.

Custom Navigation menu

Here, In this tutorial I am going to explain you how to create and add your customized navigation bar for your website.

To create a navigation bar. First we are going to create a list of links by using Unordered list (ul) and List item (li) then we will add style to the list with CSS.

<ul id="mynavbar">
<li><a href="www.eknowmax.com">Home</a></li>
<li><a href="www.eknowmax.com/p/windows.html">Windows</a></li>
<li><a href="http://www.eknowmax.com/p/how-to.html">How-To</a></li>
<li><a href="http://www.eknowmax.com/p/about-us.html"></a>About us</li>
<li><a href="http://www.eknowmax.com/p/contact-us.html">Contact us</a></li>
</ul>

In above block of code <ul> tag defines an unordered bulleted list , <li> tag defines each element of the list and <a> tags defines a hyperlink.


make sure you replace href values with your pages link href=”YOUR PAGE URL”. You can also add your custom name for each link.


<li><a href=”YOUR PAGE URL”>YOUR CUSTOM NAME OF URL</a></li>


If we open the above html code in browser then it looks like the below image.


step 1


Now let’s remove the bullets, margins and padding from the list.


#mynavbar ul {
list-style-type
: none;
margin
: 0;
padding
: 0;
}

In the above css code <ul> is a selector. The element selector selects based on the element name. Here, we are selecting all <ul> element of the above html code.


list-style-type: none – It removes the bullets.


margin: 0 and padding: 0 – remove browser default settings.


With the above CSS style the html code will looks like the below image.


step 2


Make the above list menu horizontal by floating li elements with css. We can also use display: inline to make the list displays horizontally.


#mynavbar li{
float
: left;
}

Now, the list displays as horizontal menu.


step 3


Now, We are going to make all the link clickable and displays all the link as a block .


#mynavbar a {
display
: block;
width
: 100px;
}

Here, In the above code display: block – Display the links as a block elements and make the whole area clickable.


width: 100px – Specify the width of the link to 100px. The list displays like the below image.


step 4


We can add different CSS style to change the font-colors, background-color, font-size .



#mynavbar a {
display
: block;
width
: 100px;
height
: 80px;
margin
: auto;
background-repeat
: no-repeat;
background-position
: right;
padding-right
: 32px;
padding-left
: 32px;
display
: block;
line-height
: 80px;
text-decoration
: none;
font-family
: Georgia, "Times New Roman", Times, serif;
font-size
: 21px;
color
: #371C1C;
background-color
: #dddddd;
}

With the above CSS style the navigation bar looks like the below screen print.


step 5


Add some more CSS background style and the navigation bar looks like the below image.


image


If you like this navigation bar and wants to add it to your blog. Download the source code from here and follow the below tutorial how to add a custom navigation bar to blogger.


You can customized your background color of the navigation bar by adding background style. To create your customized background: style CSS code click here .


Please let me know your feedback and queries in comments section.


You may like:


How to add a custom gadget to Blogger.

5 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.




    Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training

    ReplyDelete
  2. I'm shakshi.I am working in India top most Escort service Mumbai Call girls.If u want to join the all facility of escorts Puri call girls
    pls call me & whatssap Cuttack call girls
    visit the sites. Bhubaneswar call girls

    ReplyDelete

badge