CSS Dropdown menu - with JavaScript

Question

I am not too familiar with JavaScript, but I need some help with a dropdown menu originally built only using CSS. As the page developed, we had a developer add some JavaScript to autofill in the list items (li) using information stored in our .js file.

When clicked, the JavaScript links do not totally refresh the page. The links just pull content from our .js file and update the content on the page. It does not close the dropdown menu. How do I get the dropdown menu to collapse on click?

This is the code for the first half of our current (working) navbar.

    <div class="row" style="padding-bottom: 15px; z-index: 3;">
        <div class="col-lg-12 topmenu" ng-controller='HeaderCtrl' top-nav=''>

                <ul>
                    <li class="drop">
                    <a href="#">Color</a>
                    <ul class="hiddennav three-col">
                        <!-- <ul class='colors-ul'> -->
                        <li ng-repeat='color_name in uniq_colors'>
                        <a ng-bind='color_name' ng-href='#/?color={{color_name}}'></a>
                        </li>
                    </ul>
                    </li>

You will need to provide more information about your code. What is the approach used to show/hide the drop down? Is it still only CSS or JavaScript/jQuery? If CSS, please provide the style sheet snippet, otherwise state specifically the way it is done. — Siavas
– Siavas, Commented Dec 20, 2016 at 17:57
could you please share related CSS or create a JSFiddle. I can take care of the Javascript part no problem. — Maher Fattouh
– Maher Fattouh, Commented Dec 20, 2016 at 17:59

Peter Chon · Accepted Answer · 2016-12-20 17:59:21Z

1

You need to stop the default event of the anchor tag. You can either remove the href="#" or need to call a .preventDefault() on the event like so:

document.querySelector('your-selector').onclick = function(Event) {
  Event.preventDefault();
  // do the things

});

answered Dec 20, 2016 at 17:59

Peter Chon

424 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Dropdown menu - with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related