How to create top menu Navigation with HTML and CSS





Your website content will be here



Add your website content here, text, phontos, videos, media, etc.



Bottom footer



Try yourself >>



In this lesson you will learn how to create top menu Navigation


This lesson include:


  • HTML Instructions
  • CSS Instructions

We will add comments inside the example code boxes to explain as much as we can, comments are in grey color.





Part 1


Add HTML



Follow our comments inside the code example box ( in grey ).


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>


Visit our HTML Forms Guide to learn more about HTML Forms


Visit our CSS Forms Guide to learn more about CSS Forms


Code Example:

              <div class="topnavigation">
  <a class="active" href="#home">Home</a>
  <a href="#articles">Articles</a>
  <a href="#categories">Categories</a>
  <a href="#contact us">Contact us</a>
   </div>  
  




Part 2


Add CSS

Add the style sheets:


Code Example:

        <style>
      /* the font type and margin */
body{margin: 0;
  font-family: Arial, Helvetica, sans-serif;  
}

/* the background color */
.topnavigation{    
  overflow: hidden;  
  background-color: #333;
}

/* the link style(each box) */
.topnavigation a{  
  color: #f2f2f2;
  float: left;
  text-align: center;
  padding: 13px 15px;
  font-size: 19px;
  text-decoration: none;
}

/*when you hover on top of links */
.topnavigation a:hover{  
  color: black; 
  background-color: #CFD2D3;
}

  /* which link is highlighted with color */
.topnavigation a.active{  
  color: white;  
  background-color: #32a7a4;
}
</style>  
  
Try yourself >>


Visit our CSS Media Queries tutorial to create responsive mobile friendly navigation menus and more CSS Media Queries tutorial



we hope you enjoyed this lesson, we provide computer coding classes online free , with us you can easily learn programming online, our main goal is to allow students to learn computer programming, learn front end development to server side development easily and free,we are free and always will be learnprogramming

Navigation