CSS Navigation Bar

-

CSS Navigation Bar
Navigation Bar is the important component of a website. It gives us ease of navigating important links at one place.
Normally there are two types of Navigation Bars
1)     Vertical
2)     Horizontal
Vertical Navigation Bar
Let us create a vertical navigation bar in a step by step manner. A navigation bar needs standard HTML as a base. In this chapter we will use lists to create navigation bars. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense: So the basic html code would look like this.
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>

This was just basic HTML. Now let's remove the bullets and the margins and padding from the list using CSS:
ul{
        background-color:orange;
        list-style-type:none;
        margin:0;
        padding:0;
        width:100px;
        font-weight:bold;
        height:100%;
        position:fixed;
        border:1px solid blue;
        }
Here list-style-type: none; - Removes the bullets. and  margin: 0; and padding: 0; to remove browser  default settings and makes margin and paddding 0. we will set width of 60px. Position:fixed will make ul block fixed irrespective of scrollbar.

Now we will tweak a tag. since a tag is inside li tag so our style will go like this.

 li a {
  display: block;
}

display: block; - Displaying the links as block elements makes the whole link area , width: 60px; - Block elements take up the full width available by default. We want to specify a 100 pixels width
You can also set the width of <ul>, and remove the width of <a>, as they will take up the full width available when displayed as block elements. This will produce the same result as our previous example:

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
Center Links & Add Borders
Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:
<!DOCTYPE html>
<html>
<head>
<style>
ul{
        background-color:#ffffff;
        list-style-type:none;
        width:200px;
        height:100%;
        margin:0 auto;
        padding:0;
        font-weight:bold;
        border:1px solid blue;
        align:center;
        position:fixed;
        background-color:yellow;
        }
li{
        display:inline-block;
        width:200px;
        padding:20px 10px;
        text-align:center;
       
        }
li a {
  li a {
  display: block;
  color: #000;
  padding: 16px 8px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<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>
  <li><a href="#Products">Products</a></li>
</ul>

</body>
</html>
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code from the previous page:
display: inline; -  <li> elements are block elements by default. Here, we assign as much width required by li tag and remove the line breaks before and after each list item, to display them on one line
<!DOCTYPE html>
<html>
<head>
<style>
ul{
        background-color:#ffffff;
        list-style-type:none;
        width:80%;
        margin:0 auto;
        padding:0;
        font-weight:bold;
        border:1px solid blue;
        align:center;
        }
li{
        display:inline-block;
        width:212.6px;
        text-align:center;
        background-color:skyblue;
        }
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  align:center;
  margin:auto;
}
li a:hover {
  background-color: #555;
  color: white;
}


</style>
</head>
<body>

<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>
  <li><a href="#Products">Products</a></li>
</ul>

</body>
</html>
Horizontal Navigation Bar using Floating List Items
Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links:
li {
  float: left;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul{
        background-color:white;
        list-style-type:none;
        width:80%;
        margin:0 auto;
        padding:0;
        font-weight:bold;
       
       
        }

li{
        float:left;
        width:215.8px;
        text-align:center;
        background-color:skyblue;
        }
       
li a {
  display: block;
  align:center;
   color: #000;
  padding: 8px 16px;
  text-decoration: none;
  border:1px solid green;

}
li a:hover {
  background-color: #555;
  color: white;
}


</style>
</head>
<body>

<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>
  <li><a href="#Products">Products</a></li>
</ul>

</body>
</html>

float: left; - use float to get block elements to slide next to each other


Comments

Post a Comment

Most Popular Posts

RCM- Reverse Charge Mechanism

-
Image
RCM - REVERSE CHARGE MECHANISM Under normal circumstances, the supplier of goods or services collects the tax and pays it to the Govt. But in case of Reverse Charge, the receiver becomes liable to pay the tax to the Govt., which means the chargeability gets reversed. Reverse charge is a mechanism where the recipient of the goods and/or services who is a registered dealer is liable to pay GST instead of the supplier. Normal GST Transaction Flow   RCM Transaction When is Reverse Charge Applicable A. Supply from an Unregistered dealer to a Registered dealer If a vendor who is not registered under GST, supplies goods to a person who is registered under GST, then Reverse Charge would apply. This means that the GST will have to be paid directly by the receiver to the Government instead of the supplier. The registered dealer who has to pay GST under reverse charge has to do self-invoicing for the purchases made. For Inter-state purchases the buyer ...
Read more

HTML CSS mcq Question Bank

-
Multiple Choice Questions 1) What does CSS stands for?        A) Creative Style Sheet                      B) Colorful Style Sheet     C) Cascading Style Sheet                    D) none of the above       2) Which HTML attribute is used to define inline style?      A) Style                                         B) font   C) Styles                             ...
Read more

Learn How to Create Company in Tally.ERP9

-
Image
Company Creation Tally.ERP9 Tally.ERP 9 is not a just an  accounting software  but its a complete ERP solution to business organisations such as managing Accounts, Inventory, Payroll and taxations (GST)   compatibility from version Tally.ERP 9 release 6. How to create a company in Tally.ERP 9? To create a company in Tally.ERP 9, Double Click on   tally icon on the desktop. Press Alt+F3 -> Create Company Details to be filled in company creation screen Directory The tally directory will store all data you entered in Tally ERP 9. By default, the data storage will be inside the installation folder. i.e. c:\users\public\tally.erp9\data Name In this field, we are required to type the name of the company, for example. XYZ INC. Primary mailing details Mailing name In this field, we are required to type the name of the company, for example. XYZ INC. Address In this data field, we are required to enter the address of the company. ...
Read more