Scribd
Upload
57 views

CSS Navigation

nav bar

Uploaded by

chrstnmae85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
57 views

CSS Navigation

nav bar

Uploaded by

chrstnmae85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

CSS NAVIGATION

BAR
Lynelle Angelie Villania
NAVIGATION BAR
-A navigation bar (also called a Navbar) is a
user interface element within a webpage that
contains links to other sections of the website.

NAVIGATION BAR = LIST OF


LINKS
A navigation bar is basically a list of links, so
using the <ul> and <li> elements.
Example:
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

Result:
• .
HOME
• .
NEWS
• .
CONTACT
• .
ABOUT
Now let's remove the bullets and the margins
and padding from the list:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
</ul>

Result:
HOME
NEWS
• list-style-type: none; - Removes the
bullets. A navigation bar does not need
list markers
• Set margin: 0; and padding: 0; to
remove browser default settings

The code in the example above is the


standard code used in both vertical, and
horizontal navigation bars.
VERTICAL NAVIGATION BAR

To build a vertical navigation bar, you can


style the <a> elements inside the list.
• 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 (and padding,
margin, height, etc. if you want)
02
• width: 60px; - Block elements take up the full width
available by default. We want to specify a 60 pixels width

You can also set the width of <ul>, and remove the width
of <a>, as they will take up the full width available when
displayed as block elements.
Example:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}li a { Result:
display: block; Home
width: 60px;
background-color: #dddddd; News
} Contact
</style>
</head> About
<body>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">News</a></li>
<li><a
VERTICAL NAVIGATION BAR
EXAMPLE
Create a basic vertical navigation bar with a gray
background color and change the background color of
the links when the user moves the mouse over them:
Active/Current Navigation
Link
Add an "active" class to the current link to let
the user know which page he/she is on:
.active {
background-color: #04AA6D;
color: white;
}
CENTER LINKS & ADD
BORDERS
Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the
navbar. If you also want borders inside the navbar, add a
border-bottom to all <li> elements, except for the last one:

ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
FULL-HEIGHT FIXED VERTICAL
NAVBAR
Create a full-height, "sticky" side navigation:

ul {
list-style-type: none;
scroll
margin: 0; down

padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too
much content */
}
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.
li {
display: inline; Home News Contact
}
• 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
li { navigation links:
float: left;
}
a{
display: block; Home News Contact
padding: 8px;
background-color: #dddddd;
}
• 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

Add the background-color to <ul> instead of each <a>


element if you want a full-width background color
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; </style>
overflow: hidden; </head>
background-color: #333; <body>
} <ul>
li { <li><a class="active"
float: left; href="#home">Home</a><
} /li>
li a { <li><a
display: block; href="#news">News</a></l
color: white; i>
text-align: center; <li><a
padding: 14px 16px; href="#contact">Contact</a
text-decoration: none; ></li>
} <li><a
/* Change the link color to #111 (black) on hover */ href="#about">About</a><
li a:hover { /li>
background-color: #111; </ul>
}
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:

/* 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
ul {
position: fixed;
top: 0; SCROLL
width: 100%; DOWN

}
FIXED BOTTOM

ul {
SCROLL
position: fixed; DOWN
bottom: 0;
width: 100%;
}
GRAY HORIZONTAL
NAVBAR
An example of a gray horizontal navigation bar with a
thin gray border:
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
STICKY NAVBAR
Add position: sticky; to <ul> to create a sticky navbar.
A sticky element toggles between relative and fixed,
depending on the scroll position. It is positioned
relative until a given offset position is met in the
viewport - then it "sticks" in place (like position:fixed).

ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
SCROLL SCROLL
DOWN DOWN
THANK YOU
FOR YOUR ATTENTION

You might also like