8/4/13

CSS Navigation Bar

Search w3schools.com: Select Language

HOME

HTML

C SS

JAVASC RIPT

JQUERY

XML

ASP.NET

PHP

SQL

MORE...

R EFER ENC ES

EXAMPLES

FO R UM

ABO UT

Get Certified
Study Web Technologies and get a diploma at w3schools.com

Web Designing in 12 mths Le arn HTML, Javascript & Flash Join course at Are na! www.Are na-Multim e dia.com

SHARE THIS PAGE

3D Animation Courses R e giste r Now! Ge t Info on Anim ation C olle ge s, C ourse s, & Studio De tail. HTC am pus.C om /Anim ation+Institute Design logos & websites 12-m onth course to work in m e dia Join MAAC Multim e dia course today! www.m aacindia.com
Like 76k

CSS Basic
CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To

CSS Navigation Bar

Previous Next Chapter

WEB HOSTING
Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email

Demo: Navigation Bar

HOME NEWS ARTICLES FORUM CONTACT ABOUT

CSS Styling
Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables

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.

WEB BUILDING
Download XML Editor FREE Website BUILDER FREE Website C reator Best Website Templates

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: STATISTICS
Browser Statistics OS Statistics Display Statistics

CSS Box Model

CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

Example
< u l > < l i > < ah r e f = " d e f a u l t . a s p " > H o m e < / a > < / l i > < l i > < ah r e f = " n e w s . a s p " > N e w s < / a > < / l i > < l i > < ah r e f = " c o n t a c t . a s p " > C o n t a c t < / a > < / l i > < l i > < ah r e f = " a b o u t . a s p " > A b o u t < / a > < / l i > < / u l >
Try it yourself Now let's remove the bullets and the margins and padding from the list:

CSS Advanced
CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors CSS Summary

Example
u l { l i s t s t y l e t y p e : n o n e ; m a r g i n : 0 ; p a d d i n g : 0 ; }
Try it yourself Example explained: list-style-type:none - Removes the bullets. A navigation bar does not need list markers Setting margins and padding to 0 to remove browser default settings The code in the example above is the standard code used in both vertical, and horizontal navigation bars.

CSS Examples
CSS Examples CSS Quiz CSS Certificate

CSS References
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX

Vertical Navigation Bar

To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:

Example
a { d i s p l a y : b l o c k ; w i d t h : 6 0 p x ; }
Try it yourself Example explained: display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width width:60px - Block elements take up the full width available by default. We want to specify a 60 px width Tip: Also take a look at our fully styled vertical navigation bar example. Note: Always specify the width for <a> elements in a vertical navigation bar. If you omit the width, IE6 can produce unexpected results.

www.w3schools.com/css/css_navbar.asp

1/3

8/4/13

CSS Navigation Bar

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items. Both methods work fine, but if you want the links to be the same size, you have to use the floating method.

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 above:

Example
l i { d i s p l a y : i n l i n e ; }
Try it yourself Example explained: display:inline; - By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line Tip: Also take a look at our fully styled horizontal navigation bar example.

Floating List Items

In the example above the links have different widths. For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements:

Example
l i { f l o a t : l e f t ; } a { d i s p l a y : b l o c k ; w i d t h : 6 0 p x ; }
Try it yourself Example explained: float:left - use float to get block elements to slide next to each other display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width width:60px - Since block elements take up the full width available, they cannot float next to each other. We specify the width of the links to 60px Tip: Also take a look at our fully styled horizontal navigation bar example.

Previous

Next Chapter

22,756,521 Sites Built with Wix. Create yours today!

Click here to make a stunning website for Free. Wix.com offers an easy-to-use online platform that enables anyone to design and publish professional, beautiful websites for free. With total design control, eCommerce features and superior search engine results, Wix offers a complete solution for launching an exquisite website while saving tons of money.

Altova MapForce Graphical XML Conversion Tool from the Developers of XMLSpy

Need an easy way to get data into XML, or transform XML to another format? MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data. Then it transforms data instantly or auto-generates royalty-free code for recurrent conversions. New features in Version 2013! Easy-to-use, graphical data mapping interface Instant data transformation XSLT 1.0/2.0 and XQuery code generation Java, C#, and C++ code generation Advanced data processing functions Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more Integration with Altova StyleVision for report rendering Visual Studio & Eclipse integration Available in 32-bit and 64-bit versions Download a fully-functional trial today!

Try it now!

www.w3schools.com/css/css_navbar.asp

2/3

8/4/13

CSS Navigation Bar

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family, and career building. More than 10 000 certificates already issued!

Get Your Certificate

The HTML Certificate documents your knowledge of HTML. The HTML5 Certificate documents your knowledge of advanced HTML5. The CSS Certificate documents your knowledge of advanced CSS. The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM. The jQuery Certificate documents your knowledge of jQuery. The XML Certificate documents your knowledge of XML, XML DOM and XSLT. The ASP Certificate documents your knowledge of ASP, SQL, and ADO. The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics
Browser Statistics Browser OS Browser Display

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

A D V E RT I SE WI T H U S

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

www.w3schools.com/css/css_navbar.asp

3/3