ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

How To Create Simple And Beautiful Navigation Bar Using HTML CSS

Updated on January 18, 2016

Hello everybody, today we are going to learn how to create horizontal navigation bar using HTML(Hyper Text Markup Language) and CSS (Cascading Style Sheet).

first open your editor and save as nav.html.

HTML CSS Script For Horizontal Navigation

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Beautiful Nav </title>
<style type="text/css"  rel="stylesheet">

*{
margin: 0 ; padding: 0;
}

nav
{
width:100%; 
}

nav ul
{
width:100%; list-style-type:none; background:orange; overflow:hidden;
}
nav ul li{
float:left;
}
nav ul li a{
display: block; padding:15px 15px; color:White; font-family:verdana; text-decoration:none;
}
nav ul li a:hover{
background:black;
}
</style> 

</head>
<body>
<nav>
	<ul>
<li><a href=”#”>Home</a></li>

<li><a href=”#”>Contact Us</a></li>

<li><a href=”#”>About Us</a></li>
</ul>
</nav>
</body>
</html>

HTML Script Explanation


Let’s explain from "nav" element.

First we will create <nav></nav> tags, it is html 5 element, used for creating horizontal and vertical navigation bar.

<ul></ul> it is used for un-order list.

<li></li> called list, we use this element for creating list.

<a href="#"></a> this element is used for creating link.


  • (*) star we use for select all the elements in CSS
  • We applied some property to all the elements by using star, we have set margin:0; padding:0; property to all the elements as a default html elements they have some margin and padding, so we have set the margin 0 and padding 0.

Now our navigation look like this

We have set <nav> element CSS width: 100%.

We have set <ul> element CSS width: 100%.

Set <ul> element CSS list-style-type: none; it will remove the list type like bullets, circle etc.

Set the <li> elements CSS float property, float property use for to set the element to right or left, <li> elements CSS float: left; this will set all the <li> elements to left, it is important to set this property for creating horizontal navigation bar.

We will apply a background property to set the background color of <ul> element css background: orange.

Now comes to <a> element now we set the <a> elements as block, set the property <a> elements CSS display:block; now we have <a> element as block like a box.

Set the <a> element CSS padding: 15px 15px.

Set the <a> element CSS color: white.

Set the <a> element CSS font-family: verdana.

Set the <a> element CSS text-decoration: none; it will remove the underlines from <a> elements text.

Now set the effect, ul li a:hover, this will add effect when we take mouse over the element it will change the background color or text color depend on your customization.

Set the background: black; when we take mouse over the element it will change from orange to black background.

Congratulations, We Have Created Simple Nice Looking Navigation Bar, Hope You’ll Like It, Please Comment Feedback, If You Face Any Problem Then Comment Below.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.