+2349075995114

Creating Navigation Bars Using List of Links

.quick-links-wrapper { background-color: #040273; padding: 12px 0; margin-bottom: 20px; overflow-x: auto; } .quick-links-scroll { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .quick-links-scroll::-webkit-scrollbar { height: 6px; } .quick-links-scroll::-webkit-scrollbar-thumb { background: #4a90e2; border-radius: 3px; } .quick-links-scroll a { flex: 0 0 auto; min-width: 120px; background: #0a4fbd; color: #fff; padding: 10px; border-radius: 6px; text-decoration: none; font-weight: bold; text-align: center; white-space: nowrap; } @media (min-width: 768px) { .quick-links-scroll { justify-content: center; } }
Students Teachers N.T.I POS Apps Blogs Training Search

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

.div-pre-code-css { display: block; text-align: center; background-color: green; color: white; padding-bottom: 0px; border-bottom: 0px; } .pre-code-css { background-color: white; max-width: 300px; display: inline-block; text-align: left; }
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
				

				

				

				

					
* {box-sizing: border-box}
/* body {font-family: Verdana, sans-serif; margin:0} */

/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}

/* Slides */
.mySlides {
  display: none;
  padding: 10px 60px;
  text-align: left;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}









     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. Please check our Training Programes Here.


   
   
   



				

				

				

				

					
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.
								

				

				

		

				

				

					

.example {
  background-color: yellow;
  padding: 20px;
}
@media screen and (max-width: 600px) {
  .example {
    display: none;
  }
}

div.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
}

.generic { 
    background-color: lightgray;
}



    

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 !!