Navigation on same page in HTML

Navigation on same page in HTML

Hello everyone,  this post is to tell that how you can navigate on the same page of your web page . In HTML 5 we use the ID names or class name to jump over the section . Earlier we use “ goto function“ but now it is easier to use id names for navigation.
We use the anchor tag <a>..</a> and give the hyperlink reference of the id to jump over.
Here is a short code for navigation on same page and also the styling of the <a> for making the look of link different .

//*** Make sure the page is long enough to see the navigation on diiferent sections of web page **//
//** HTML code **//

<!DOCTYPE html>
<html>
<head>
          <title>Intoduction</title>
          <link rel="stylesheet" type="text/css" href="intro.css">
</head>
<body>
<header id="head"><h2>Coder99</h2></header>
<ul class="toplist">
                   <li>About</li>
                   <li>Login</li>
                   <li>Navigation
                             <ul> <li><a href="#head">Top</a></li>  <li><a href="#two">Middle</a></li>  <li><a href="#four">Bottom</a></li></ul>
                   </li>
                   <li>Contact Us
                             <ul> <li>Call Us</li><li>Message</li><li>E-mail</li> </ul>
                   </li>
          </ul>
          <p id="one">     Content for a long page so that you can see navigation.          </p>
          <p id="two">     Content for a long page so that you can see navigation.          </p>
<p id="three">  Content for a long page so that you can see navigation.          </p>
<p id="four">    Content for a long page so that you can see navigation.          </p>
</body>
</html>  
Check out For Better understanding[English]
Check Out for Hindi Explanation

//** CSS file saved as intro.css **//
body
{
          margin: 0px;
}
#head
{
          background :black;
          color: white;
          padding: .5em;
          margin-bottom: 2px;

}
.toplist
{
          list-style-type: none;
          padding: 0px;
          margin: 0px;
          position: fixed;
          margin-left: 45.5%;
}
.toplist li
{
          background-color: green;
          color: white;
          width: 7em;
          padding: .3em;
          float: right;
          margin-right: 2px;
          text-align: center;
          overflow: hidden;
}
.toplist ul
{
          display: none;
}
.toplist li:hover ul
{
          display: block;
}
a
{
          text-decoration: none;
          color: white;
}
p
{       
height: 15em;
          width: 30em;
          background-color: blue;
}


//** save the file and enjoy navigating **//

Comments

Post a Comment