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

video lectures

,

Summary

,

pdf

,

MCQs

,

Semester Notes

,

ppt

,

mock tests for examination

,

Exam

,

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

,

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

,

Important questions

,

practice quizzes

,

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

,

Extra Questions

,

Objective type Questions

,

Sample Paper

,

Previous Year Questions with Solutions

,

Free

,

Viva Questions

,

shortcuts and tricks

,

past year papers

,

study material

;