CSS Navigation



The Navigation Bar is used to helps the visitor in accessing some information.it is the layout of the element on a web document that have links for the other section of the web pages.

Generally the navigation bar is placeed on the top of the web pages.sometimes it desplays vertically.

Horizontal Navigation Bar CSS

It is mostly on the top of the web page.it contains number of links.

Example

<!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0px;
      overflow: hidden;
      background-color: pink;
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: blue;
     font-size:20px;
      text-align: center;
      padding: 10px 20px;
      text-decoration: none;
    }
    .active{
    background-color: purple;
    color: white;
    }
    li a:hover {
      background-color: red;
      color: white;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
    
    </body>
    </html>
    
     
    


Click on the "Run This Code" button to see how it works.


Fixed Navigation bar

Example

<!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
      list-style-type: none;
      position: fixed;
      width:100%;
      top:0;
      margin: 0;
      padding: 0px;
      overflow: hidden;
      background-color: pink;
    }
    
    li {
      float: left;
        border-right: 1px solid yellow;
    }
    
    li a {
      display: block;
      color: red;
     font-size:20px;
      text-align: center;
      padding: 10px 20px;
      text-decoration: none;
    }
    .active{
    background-color: purple;
    color: white;
    }
    li a:hover {
      background-color: red;
      color: white;
    }
    </style>
    </head>
    <body>
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
    <h1 style="padding-top: 100px; text-align: center;">Hello World</h1>
    <h2 style="padding-bottom: 2000px; text-align: center;">Scroll down the page to see the fixed navigation bar</h2>
    
    </body>
    </html>
    
     
    


Click on the "Run This Code" button to see how it works.


Vertical Navigation bar

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: pink;
}

li a {
  display: block;
  color: red;
  font-size:20px;
  padding: 8px 16px;
  text-decoration: none;
}
.active{
  background-color: purple;
  color: white;
}
li a:hover {
  background-color: red;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#" class ="active">Home</a></li>
  <li><a href ="#">Java</a></li>
  <li><a href ="#">CSS</a></li>
  <li><a href ="#">HTML</a></li>
  <li><a href ="#">Bootstrap</a></li>
</ul>

</body>
</html>

 


Click on the "Run This Code" button to see how it works.





CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units