Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Navigation Bar- Navbar

CSS Navigation Bar- Navbar | CSS for Beginners - Class 6 PDF Download

Navigation Bars


Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links


A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
Example

<ul>

  <li><a href="default.asp">Home</a></li>

  <li><a href="news.asp">News</a></li>

  <li><a href="contact.asp">Contact</a></li>

  <li><a href="about.asp">About</a></li>

</ul>

Now let's remove the bullets and the margins and padding from the list:
Example

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}

Example explained:

  • list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
  • Set margin: θ; and padding: θ; to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.

The document CSS Navigation Bar- Navbar | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Exam

,

shortcuts and tricks

,

past year papers

,

pdf

,

Important questions

,

Sample Paper

,

Viva Questions

,

practice quizzes

,

Objective type Questions

,

video lectures

,

Summary

,

MCQs

,

CSS Navigation Bar- Navbar | CSS for Beginners - Class 6

,

Extra Questions

,

Free

,

Previous Year Questions with Solutions

,

study material

,

Semester Notes

,

CSS Navigation Bar- Navbar | CSS for Beginners - Class 6

,

ppt

,

CSS Navigation Bar- Navbar | CSS for Beginners - Class 6

,

mock tests for examination

;