Scribd
Upload
2 views14 pages

p61 Navigation

This document provides an introduction to creating navigation menus in HTML, emphasizing their importance for website usability. It includes examples of navigation menus using lists and anchor tags, as well as styling them with CSS to enhance appearance. The document also covers vertical navigation bars, hover effects, and the use of an 'active' class to indicate the current page.

Uploaded by

Eman Seguido
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views14 pages

p61 Navigation

This document provides an introduction to creating navigation menus in HTML, emphasizing their importance for website usability. It includes examples of navigation menus using lists and anchor tags, as well as styling them with CSS to enhance appearance. The document also covers vertical navigation bars, hover effects, and the use of an 'active' class to indicate the current page.

Uploaded by

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

INTRODUCTION TO WEB DESIGN

ITC 122
HTML NAVIGATION

In HTML, you can create navigation menus to help users


navigate through different sections or pages of a website.
Navigation menus play a crucial role in providing a clear and
organized structure to your web content.
INTRODUCTION

Navigation menus are essential for improving the usability and user experience of a
website. They allow users to navigate through different sections, pages, or categories of
content. HTML provides a simple yet effective way to create navigation menus using
lists and anchor tags. By structuring your navigation menus with HTML, you can create
intuitive and accessible navigation systems for your web pages.
CREATING NAVIGATION MENUS WITH LISTS AND ANCHOR TAGS

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

In the above example, the <nav> element represents the navigation section. Inside the <nav> element, we use an unordered
list <ul> to create the menu items. Each menu item is represented by a list item <li>, and the text of the menu item is
wrapped within an anchor tag <a>. The href attribute of the anchor tag specifies the target location or section.
EXAMPLE

<!DOCTYPE html>
<html>
<body>
<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>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
CSS NAVIGATION BAR

Having easy-to-use navigation is important for any web site.


With CSS you can transform boring HTML menus into good-looking
navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:
NOW LET'S REMOVE THE BULLETS AND THE MARGINS AND
PADDING FROM THE LIST:

<!DOCTYPE html> <p>In this example, we remove the bullets from the
<html> list, and its default padding and margin.</p>
<head>
<style> <ul>
ul { <li><a href="#home">Home</a></li>
list-style-type: none; <li><a href="#news">News</a></li>
margin: 0; <li><a href="#contact">Contact</a></li>
padding: 0; <li><a href="#about">About</a></li>
} </ul>
</style>
</head> </body>
<body> </html>
…

Now let's try a vertical navigation bar with a background color


added to the links to show the link area.
VERTICAL NAVIGATION BAR
<!DOCTYPE html>
<html> <ul>
<head> <li><a href="#home">Home</a></li>
<style> <li><a href="#news">News</a></li>
ul { <li><a href="#contact">Contact</a></li>
list-style-type: none; <li><a href="#about">About</a></li>
margin: 0; </ul>
padding: 0;
} <p>A background color is added to the links to show
the link area.</p>
li a { <p>Notice that the whole link area is clickable, not
display: block; just the text.</p>
width: 60px;
background-color: #dddddd; </body>
} </html>
</style>
</head>
<body>
EXAMPLE EXPLAINED:

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)
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. This
will produce the same result as our previous example:
<!DOCTYPE html>
<html> <body>
<head>
<style> <ul>
ul { <li><a href="#home">Home</a></li>
list-style-type: none; <li><a href="#news">News</a></li>
margin: 0; <li><a href="#contact">Contact</a></li>
padding: 0; <li><a href="#about">About</a></li>
width: 60px; </ul>
}
<p>A background color is added to the links to show
li a { the link area.</p>
display: block; <p>Notice that the whole link area is clickable, not
background-color: #dddddd; just the text.</p>
}
</style> </body>
</head> </html>
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:
<!DOCTYPE html>
/* Change the link color on hover */
<html>
li a:hover {
<head>
background-color: #555;
<style>
color: white;
ul {
}
list-style-type: none;
</style>
margin: 0;
</head>
padding: 0;
<body>
width: 200px;
<h2>Vertical Navigation Bar</h2>
background-color: #f1f1f1;
<ul>
}
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
li a {
<li><a href="#contact">Contact</a></li>
display: block;
<li><a href="#about">About</a></li>
color: #000;
</ul>
padding: 8px 16px;
</body>
text-decoration: none;
</html>
}
ACTIVE/CURRENT NAVIGATION LINK
ADD AN "ACTIVE" CLASS TO THE CURRENT LINK TO LET THE USER
KNOW WHICH PAGE HE/SHE IS ON:
<!DOCTYPE html>
li a:hover:not(.active) {
<html>
background-color: #555;
<head>
color: white;
<style>
}
ul {
</style>
list-style-type: none;
</head>
margin: 0;
<body>
padding: 0;
width: 200px;
<h2>Vertical Navigation Bar</h2>
background-color: #f1f1f1;
<p>In this example, we create an "active" class with a
}
green background color and a white text. The class is
added to the "Home" link.</p>
li a {
display: block;
<ul>
color: #000;
<li><a class="active" href="#home">Home</a></li>
padding: 8px 16px;
<li><a href="#news">News</a></li>
text-decoration: none;
<li><a href="#contact">Contact</a></li>
}
<li><a href="#about">About</a></li>
</ul>
li a.active {
background-color: #04AA6D;
</body>
color: white;
</html>
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy