Redirect to a particular section of a page using HTML/jQuery

Deyan
January 9, 2023
130 views
2 votes
3 Answers

I have created the below navigation menu:

I want the each sub menu to redirect to a particular section of the same page:

        <section class="sec-1">text</section>
        <section class="sec-2">text</section>
        <section class="sec-2">text</section>

Sub menu 1 redirects to section 1, sub menu 2 to section 2, etc..

I’ve tried:

enter image description here

Neither works. I also tried using HTML only with putting the section ID in the href field of the a attribute:

This kinda works, but is not the desired result. It doesn’t redirect exactly to the beginning of the section and after I close the sub menu, it returns back at the beginning.

Also I want the sub menu to be automatically closed, after the redirection, since it’s being opened by click and not by hovering over it.

Tags: html jquery

Answers

 <section id="sec-1">text</section>
         <section id="sec-2">text</section>
         <section id="sec-3">text</section>
 
 <!--id, not class..-->
 
 
 <!--At the nav:-->
 
 <li><a href="#sec-1">text</a></li> 
<li><a href="#sec-2">text2</a></li> 
<li><a href="#sec-3">text3</a></li>

> it redirects below the headline

put a headline in section part, not before.

The menu is not closing ‘automatically’.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <nav>
      <li>
        <a href="#" id="sub-click" onclick="show()" >menu1</a>
        <ul id="sub-menu" onclick="hide()">
          <li>sub-menu</li>
          <li>sub-menu2</li>
          <li>sub-menu3</li>
        </ul>

      </li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </nav>
<script>
function hide(){
document.getElementById('sub-menu').style.display = "none";

}
function show(){
  document.getElementById('sub-menu').style.display = "block";

}


</script>

  </body>
</html>

Deyan this will work now:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      #navbar{

          position:sticky;
          top:0;

          background-color: red;
      }
      section{
        height: 100vh;
        background-color: blue;

      }


    </style>
  </head>
  <body  onmousemove="visible()">
    <nav id="navbar">
      <li>
        <a href="#" id="sub-click" onclick="show()" >menu1</a>
        <ul id="sub-menu" onclick="hide();transparent()">
          <li><a href="#one">sub-menu</a></li>
          <li><a href="#two">sub-menu2</a></li>
          <li><a href="#three">sub-menu3</a></li>
        </ul>

      </li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </nav>
    <section id="one">
      <h1>bla la</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
          t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
          t anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
             Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="two">
      <h1>bla la</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
          t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
          t anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
             Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="three">
      <h1>bla la</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
          t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
          t anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
             Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
<script>
function hide(){
document.getElementById('sub-menu').style.display = "none";

}
function show(){
  document.getElementById('sub-menu').style.display = "block";

}
function transparent(){

  document.getElementById('navbar').style.opacity="0.0";
}
function visible(){

  document.getElementById('navbar').style.opacity="1.0";
}
</script>

  </body>
</html>

The header is transparent until you move your mouse. You can change the event (onmousemove), if you want, in the body tag.

Please signup or login to give your own answer.

Click here to cancel reply.