Labels

HTML Navigation Menu using Lists

The Navigation Menu are used a lot Nowadays, on many websites, to provide a proper navigation to respective pages on the Website. 

We will learn here, how to create such navigation menu using  HTML Lists.

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Navigation Menu - HTML Code

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Above is the HTML Code for creating a list. We will customize its design with CSS, to make it work like a navigation menu.

The List items are the links, that points to the respective page on the website. You can learn more about links (<a>) in our links tutorial.

We can also add more menu items in lists, according to our needs.

Navigation Menu - CSS Styles

<style type="text/css">
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>

Above is the CSS Styles for Lists. We had enclosed it in the <style> tag. All the CSS Styling for a webpage always lies within <style> tag.

Always put the CSS above the HTML Code, so that the CSS styles will load first, then, HTML. This will provide a smooth experience to the user.

Navigation Menu

Above is the Navigation menu using HTML Lists, styled with CSS. We can customize it's style according to our needs.

Navigation Menu - Customizing Styles

background-color

We can customize the background color of the menu, by changing the background-color to any another color (HEX, RGB, RGBA etc.).

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff; /* Change color */
}

color

We can customize link color of the menu, by changing the color to any another color (HEX, RGB, RGBA etc.).

li a {
  display: block;
  color: #000; /* Change color */
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

background-color of link hover

We can customize link hover color (mouse is over the link) by changing the color to any another color (HEX, RGB, RGBA etc.)

li a:hover {
  background-color: #000; /* change background color */
  color: #fff; /* change text color */
}

Navigation menu created.

Tags

Comments

Post a Comment