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

I have created the below navigation menu:

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

        <section >text</section>
        <section >text</section>
        <section >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.

CodePudding user response：

 <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>

CodePudding user response：

> 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>