Live Navigation in HTML

How to Repurpose the Code to add live navigation to multiple pages of your document. 

Download: LIVE_NAV_SOURCE_FIES 2_column_template_with Navigation_practice

How to create a very basic live navigation in HTML (part 01)

How to create a very basic live navigation in HTML (part 02)

How to create a very basic live navigation in HTML (part 03)

How to create a very basic live navigation in HTML (part 04)

Live Navigation and Repeating html background Source Files

LIVE_NAV_SOURCE_CODE_FILES

 This Code should go into the HEAD tag of your page.

<style type=”text/css”>
ul {
list-style-type: none;
margin-top: 30px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;

}

li a {
display: block;
width: 5px;
margin-left: 50px;
color: #523F24;
font-style: normal;
font-family: “Gill Sans”, “Gill Sans MT”, “Myriad Pro”, “DejaVu Sans Condensed”, Helvetica, Arial, sans-serif;
}

</style>

 

This code should go into the HEADER tag of your website. The HEADER tag is inside the BODY tag of your page. Don’t confuse it with the HEAD tag.

<div id=”header”>
<ul>
<li></li>
<li><a href=”#”>HOME </a>
<a href=”#”>ABOUT </a>
<a href=”#”>CONTACT</a></li>

</ul>


 

Positioning Live Navigation on HTML Pages


Creating a Selected State For Live Navigation

Instructions

1- Copy and paste the rule below to your CSS document.

.active a {

color: rgba(15,179,183,1.00);

text-decoration: none;

}

( you can modify the rule later to match your design)

2- To add a selected state to your button on the HTML page, copy: 

<li class=’active’><a href=’index.html’>Home</a></li> and apply the code to the selected state for another button.

For example to add a selected state to ABOUT page,  Replace: <li><a href=”about.html”>About</a></li>

WITH <li class=’active’><a href=‘about.html’>About</a></li>

COMPLETED CODE WITH HOME AS THE SELECTED STATE

<ul>

<li class=’active’><a href=’index.html’>Home</a></li>

<li><a href=”about.html”>About</a></li>

<li><a href=”portfolio.html”>

Portfolio

<ul>

<li><a href=”webdesign.html”>Web Design</li>

<li><a href=”motion.html”>Motion Design</li>

<li><a href=”photo.html”>Photography</li>

</ul>

</a></li>

<li><a href=”blog.html”>Blog</a></li>

<li><a href=”contact.html”>Contact</a></li>

</ul>

 


ADVANCED LIVE NAVIGATION ( jQUERY)


 

CSS Menu Maker Tutorial


 

Live nav and WOW Slider Gallery Tutorial

 


 

Code for basic navigation with CSS and HTML

EXTERNAL CSS CODE: ( you can copy and paste in a new CSS document

#navigation {

}

#navigation li a {

padding-right: 39px;

}

ul {

list-style-type: none;

}

li {

display: inline-block;

}

HTML CODE ( you can copy and paste in a new html document.

<!doctype html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Untitled Document</title>

<link href=”file:///hard drive/Users/ezenhari/Desktop/untitled folder/navigation.css” rel=”stylesheet” type=”text/css”>

</head>

<body>

<ul>

<div id=”navigation”>

<li><a href=”index.html”>home </a><a href=”gallery.html”>gallery </a><a href=”contact.html”>contact</a></li>

<li></li>

</div>

</ul>

</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *