How to Create a Smooth Scrolling Navigation with jQuery using a dropdown list instead of a nav bar

Question

So I've created this smooth scrolling navigation bar using html and some jQuery however I would like to just use a dropdown list instead of the full blow navigation bar. So I want to get rid of the nav bar and just create a dropdown list that functions the same way. How would i go about doing this?

 $(document).ready(function() { $('#main-nav li a').click(function(e) { var targetHref = $(this).attr('href'); $('html, body').animate({ scrollTop: $(targetHref).offset().top }, 1000); e.preventDefault(); }); });

 body { padding: 20px; font-family: Helvetica; } section { margin: 300px 0; background: #f0f0f0; } #main-nav { background: #f0f0f0; text-align: center; } #main-nav li { display: inline-block; } #main-nav li a { padding: 15px; display: block; text-decoration: none; color: #373737; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="main-nav"> <li><a href="#about">About</a></li> <li><a href="#how-it-works">How It Works</a></li> <li><a href="#submit-case">Submit a Case</a></li> <li><a href="#contact">Contact</a></li> </ul> <section id="about"> <h2>About Section</h2> </section> <section id="how-it-works"> <h2>How It Works Section</h2> </section> <section id="submit-case"> <h2>Submit a Case Section</h2> </section> <section id="contact"> <h2>Contact Section</h2> </section>

Answer 1

I took the existing code and built a very simple dropdown menu for you.

HTML:

<ul id="main-nav">
  <li id="dropdown_menu">Dropdown
    <ul id="the_menu" class='hidden'>
      <li><a href="#about">About</a></li>
      <li><a href="#how-it-works">How It Works</a></li>
      <li><a href="#submit-case">Submit a Case</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </li>
</ul>

<section id="about">
  <h2>About Section</h2>
</section>

<section id="how-it-works">
  <h2>How It Works Section</h2>
</section>

<section id="submit-case">
  <h2>Submit a Case Section</h2>
</section>

<section id="contact">
  <h2>Contact Section</h2>
</section>

CSS:

body {
  padding: 20px;
  font-family: Helvetica;
}

section {
  margin: 300px 0;
  background: #f0f0f0;
}

#main-nav {
  background: #f0f0f0;
  text-align: center;
}

#main-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#dropdown_menu { 
  padding: 15px 0;
  list-style-type: none;
  margin: 0;
  display: block;
  width: 100%;
  cursor: pointer;
}

#dropdown_menu:hover {
  background: #dddddd;
}

.hidden {
  display: none;
}

#main-nav li a {
  padding: 15px;
  display: block;
  text-decoration: none;
  color: #373737;
} 

JS:

$(document).ready(function() {
  $('#main-nav li a').click(function(e) {

    var targetHref = $(this).attr('href');

    $('html, body').animate({
      scrollTop: $(targetHref).offset().top
    }, 1000);

    e.preventDefault();
  });
  
  // dropdown
  $("#dropdown_menu").click(function() {
    $("#the_menu").slideToggle('hidden'); 
  })
});