CODEWITHSUNDEEP
csswebhtml
Nikki beeeeeeeeeez
Nikki beeeeeeeeeez

Reputation: 63

How to add link on navigation bar? html

so I've just started making my own personal website, however, I'm running into issues with my navigation bar. Basically I want to be able to click on the titles on my navigation bar and then it will direct me to section pertaining to that title on my page. To make things more clear. Take for example, this is what I have so far for my navigation bar:

<div class="about"> <a> About &nbsp; &nbsp; &nbsp;  </a> </div>
<div class="blog"> <a> Blog  &nbsp; &nbsp; &nbsp; </a> </div>
<div class="projects"> <a> Projects &nbsp; &nbsp; &nbsp </a> </div>

Now my nav bar should look something along the lines of this: About Blog Projects And the rest of my webpage looks likes this

<h1> About me </h1>
<p> Hi im nikki.. </p>

<h2> Blog </h2>
<p> This is my blog.. </p>

<h3> Projects </h3>
<p> First project last year .... </p>

Now what I want to be able to do to is to click on About on my navigation bar and make it take me to the About section on my page? How do I do this?

Thanks :)

Upvotes: 0

Views: 20748

Answers (2)

Aruna
Aruna

Reputation: 61

Try the below code, add the style to your stylesheet.

    <style>
    .nav:after {
    content:"";
    clear:both;
    display:block;
    }
    .nav li {
     float: left;
     list-style-type: none;
     }
     </style>
     <ul class="nav">
       <li><a href="#about">About</a></li>
       <li><a href="#blog">Blog</a></li>
       <li><a href="#projects">Projects</a></li>
     </ul>
    <div id="about">
      Lorem Ipsum
    </div>
    <div id="blog">
      Lorem Ipsum
    </div>
    <div id="projects">
      Lorem Ipsum
    </div>

Upvotes: 3

venkata krishnan
venkata krishnan

Reputation: 2046

Jquery UI Tabs

Do you need something like this ? Then easy way of doing it is , using JQuery-UI Tabs.

To know n learn more about it , just read through the documentation, Its easy comparatively doing it with plain css & JS.

reference Link : https://jqueryui.com/tabs/

Upvotes: 1

Related Questions