ana.tech360@gmail.com +2349075995114

Creating Navigation Bars Using List of Links

eLearning | eClasses | Past Questions & Answers | Solar Electricity | Project Management  > HTML/CSS Webpage Formatting >  Creating Navigation Bars Using List of Links
Students Quiz Exam Teachers NTI TRCN Schools

Sub-Topics
Introduction to Unordered List
Creating Unordered List Without Bullets
Types of Navigation Bar
Vertical Navigation Bar
Horizontal Navigation Bar
Scrollable Vertical Navigation Bar
Scrollable Horizontal Navigation Bar

Creating Navigation Bars Using List of Links

A navigation bar is basically a list of links. Therefore, it is logical to use the <ul> and <li> elements to create navigation bar.
Navigation Bar = List of Links
Meanwhile, there are other approaches used in creating navigation bar. In this article, we shall discuss the use of unordered list to create navigation bar under the following sub topics:

  • Introduction to Unordered list
  • Creating Unordered List Without Bullets
  • Types of Navigation Bar
  • Vertical Navigation Bar
  • Horizontal Navigation Bar
  • Scrollable Vertical Navigation Bar

Introduction to Unordered List

An example of unordered list is shown below: 
 
 

    
		

				

				

				

							
The code snippet can be used to create the sub topics above. However, list markers (e.g. bullets) is a default property of list while browsers usually add margins and paddings to list by default. These three properties are not required in a navigation bar.
						

				

				

				

			
What do we do?
		

				

				

				

							
We shall remove the bullets from the list, and its default paddings and margins.
						

				

				

				

			
So, how do we get rid of them?
		

				

				

				

							
We shall address this concern in the next topic.
						

				

				

				

			
Creating Unordered List Without Bullets
		

				

				

				

							
There are four methods to achieve this and each of them is discussed below.
						

				

				

				

			
Method 1: Element Type Selector
		

				

				

				

							
Create a selector “ul” to remove bullets, margins and paddings for all <ul> and <li>. Note that this will affect all pages.
						

				

				

				

			
 
    
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>   
    



		

				

				

				

							
Explanation
list-style-type: none; – removes the bullets. A navigation bar does not need list markers.
margin: 0; and padding: 0; – remove browser default settings
The code in the example above is the standard code used in both vertical and horizontal navigation bars created from unordered list.
						

				

				

				

			
Method 2: Inline CSS
		

				

				

				

			
 
    
<ul style="list-style-type: none; margin: 0; padding: 0;">
<li><a href="#home">Home</a></li>
<li><a href="#eLearning">eLearning</a></li>
<li><a href="#eClasses">eClasses</a></li>
<li><a href="#about-us">About Us</a></li>
</ul>   
    



		

				

				

				

			
Method 3: Selector for Specific Pages
		

				

				

				

							
Create a CSS selector “ul” to remove bullets, margins and paddings for all <ul> and <li> on some specific pages.
						

				

				

				

			
 
    
<style>
ul.no-bullets {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<ul class="no-bullets">
<li><a href="#home">Home</a></li>
<li><a href="#eLearning">eLearning</a></li>
<li><a href="#eClasses">eClasses</a></li>
<li><a href="#about-us">About Us</a></li>
</ul>   
    



		

				

				

				

			
Method 4: Using JavaScript
		

				

				

				

							
Create a CSS selector “ul” to remove bullets, margins and paddings for all <ul> and <li> on some specific pages. Then use JavaScript getElementById to apply the style.
						

				

				

				

			
 
    
<style>
ul.no-bullets {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<ul id="noBulletsList">
<li><a href="#home">Home</a></li>
<li><a href="#eLearning">eLearning</a></li>
<li><a href="#eClasses">eClasses</a></li>
<li><a href="#about-us">About Us</a></li>
</ul>
<script>
document.getElementById('noBulletsList').style.listStyleType = 'none';
document.getElementById('noBulletsList').style.padding = '0';
document.getElementById('noBulletsList').style.margin = '0';
</script>   
    



		

				

				

				

			
Quiz Questions
		

				

				

				

			








     The following are the attributes not required in navigation bar created from unordered list except ---


A. bullets
B. margins
C. paddings
D. color








      A navigation bar basically consists of ---


A. list of links
B. buttons
C. ordered list
D. tabs








      The CSS selector “ul” is used to remove bullets, margins and paddings for all ul and li on ---


A. two pages of a website
B. three pages of a website
C. four pages of a website
A. all pages of a website








Of course making it work is not as easy as writing these steps. You will have to explore on how to getting this done. Don't worry, we can guide you on this when you contact us.


   
   
   



		

				

				

				

			
Vertical Navigation Bar
		

				

				

				

							
To make the whole link area clickable (not just the text) in a vertical navigation bar, style the <a> elements inside the list as block elements using display: block. By default, block elements consume the whole space in the horizontal direction.
						

				

				

				

			
 
    
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
}
</style>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#eLearning">eLearning</a></li>
<li><a href="#eClasses">eClasses</a></li>
<li><a href="#about-us">About Us</a></li>
</ul>   
    



		

				

				

				

							
After you have style the <a> element as block, you can specify its width (and padding, margin, height, etc. if you want).
						

				

				

				

			
 
    
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: blue;
}
</style>
    



		

				

				

				

			
Scrollable Vertical Navigation Bar
		

				

				

				

							
Style a <div> container by using overflow: auto and white-space: nowrap. Also set the height of the <div>. Then place the navigation bar inside the <div>.
						

				

				

				

			
 
    
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 80px;
}
li a {
display: block;
background-color: red;
text-align: center;
}

.divVerScrollable {
background-color: #333;
overflow: auto;
white-space: nowrap;
height: 50px;
}
</style>

<div class="divVerScrollable">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#eLearning">eLearning</a></li>
<li><a href="#eClasses">eClasses</a></li>
<li><a href="#about-us">About Us</a></li>
</ul>
</div>
    



		

				

				

				

							
Summary
A well-structured group of links make it easier and quicker for site users and search engines to find valuable content on a web page. A navigation bar can be used to organise your links in a well-structured format. This can help boost visitors’ UX
Kindly contact us for your website design training or to build and host your website.
						

				

				

		

				

				

			


    

Sticky






1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1


1




		

				

				

				

				

		

  Ana Arm
  

    
Author: Ana Arm

    
    
Estd. 2013

  



	
			
		
	
error: Content is protected !!