CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6 PDF Download
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
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 from the previous page:
Example
li {
display: inline;
}
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
Floating List Items
Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links:
Example
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
Example explained:
- float: left; - Use float to get block elements to float next to each other
- display: block; - Allows us to specify padding (and height, width, margins, etc. if you want)
- padding: 8px; - Specify some padding between each <a> element, to make them look good
- background-color: #dddddd; - Add a gray background-color to each <a> element
Tip: Add the background-color to <ul> instead of each <a> element if you want a full-width background color:
Example
ul {
background-color: #dddddd;
}
Horizontal Navigation Bar Examples
Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page he/she is on:
Example
.active {
background-color: #04AA6D;
}
Right-Align Links
Right-align links by floating the list items to the right (float:right;):
Example
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
Border Dividers
Add the border-right property to <li> to create link dividers:
Example
/* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Fixed Navigation Bar
Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page:
Fixed Top NavThe navigation bar will stay at the top of the page while scrolling
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Fixed Bottom Nav
The navigation bar will stay at the bottom of the page while scrolling
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
Some text some text some text some text..
|
10 videos|41 docs|23 tests
|
|
Dec 25, 2024 Last updated |
|
Explore Courses for Class 6 exam
|
|
Important questions
,past year papers
,Summary
,CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6
,CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6
,ppt
,Previous Year Questions with Solutions
,Free
,Extra Questions
,practice quizzes
,Semester Notes
,Exam
,CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6
,Objective type Questions
,Sample Paper
,mock tests for examination
,shortcuts and tricks
,MCQs
,study material
,Viva Questions
,video lectures
;
CSS Navigation Bar- Horizontal Navbar Free PDF Download
Importance of CSS Navigation Bar- Horizontal Navbar
CSS Navigation Bar- Horizontal Navbar Notes
CSS Navigation Bar- Horizontal Navbar Class 6 Questions
Study CSS Navigation Bar- Horizontal Navbar on the App
|
© EduRev
|
Education Revolution
|
|
