Scribd
Upload
54 views

Ul Li Home Li Li About Us Li Li Community Li Li Careers Li Ul

The CSS Navigation Bar is created using an unordered list (<ul>) and links (<a>). It involves 4 steps: 1) Create a <ul> with list items (<li>), 2) Add <a> links to the list items, 3) Remove the bullet style from the list, 4) Add additional CSS styles. Examples are provided for horizontal and vertical navigation bars with CSS for layout, colors, padding, and hover effects.

Uploaded by

azezedsx
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
54 views

Ul Li Home Li Li About Us Li Li Community Li Li Careers Li Ul

The CSS Navigation Bar is created using an unordered list (<ul>) and links (<a>). It involves 4 steps: 1) Create a <ul> with list items (<li>), 2) Add <a> links to the list items, 3) Remove the bullet style from the list, 4) Add additional CSS styles. Examples are provided for horizontal and vertical navigation bars with CSS for layout, colors, padding, and hover effects.

Uploaded by

azezedsx
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Navigation Bar (source: https://www.tutorialbrain.

com)

The CSS Navigation Bar is the combination of Lists and Links.

How to start creating Navigation bars


Step1 : Create an unordered list like below – 

<ul>
<li>Home</li>
<li>About Us</li>
<li>Community</li>
<li>Careers</li>
</ul>

Step2 : Add links to the list items using <a> tag so that the list items becomes
clickable.

<ul id="#ul-nb">
<a href="#"><li>Home</li></a>
<a href="#"><li>About Us</li></a>
<a href="#"><li>Community</li></a>
<a href="#"><li>Careers</li></a>
</ul>

Step3 : Remove the style from the list which makes it look like a bullet list.

#ul-nb {
list-style: none;
}

Step4 : You can  set other style related properties on the list items based on what you
want like –
 Float properties like  float:left
 Background color of the link list
 Margin, Padding properties – You might require to set Margin and Padding values
as 0 if required
 Width & Height related properties
 text-decoration:none is often used to remove the underline from the link
 overflow:hidden is often used to stop the list items to go beyond the list boundary
 text-align property etc
 Examples:

Horizontal Navigation Bar


Vertical Navigation Bar

<!DOCTYPE html>
<html>
<head> <!DOCTYPE html>
<style> <html>
#ul-nb { <head>
list-style: none; <style>
margin:2px; #ul-nb {
padding:3px; list-style: none;
} overflow:hidden;
#ul-nb li { background:aqua;
float:left; margin:0;
padding:10px; padding:0;
background:orange; width:100px;
text-align: center; }
margin-left:5px; #ul-nb li a {
} padding-bottom:5px;
#ul-nb li:hover { width:80px;
background:red; }
opacity:0.8; #ul-nb li:hover {
color:white; background:brown;
} }
</style> a{
</head> display:block;
<body> }
<ul id="ul-nb"> </style>
<li><a href="#">Home</a></li> </head>
<li><a href="#">About Us</a></li> <body>
<li><a href="#">Community</a></li> <ul id="ul-nb">
<li><a href="#">Careers</a></li> <li><a href="#">Home</a></li>
</ul> <li><a href="#">About Us</a></li>
</body> <li><a href="#">Community</a></li>
</html> <li><a href="#">Careers</a></li>
</ul>
</body>
</html>

You might also like