Prevent navigation to the top of the page after click on fixed top menu

Dawid Zbiński

I've been working on a new project recently and used the fixed top menu. In the top navigation menu I have and unnumbered inline list. I've got an element which is clickable and after click() it shows the vertical options that are inside the div.

I'm not sure if it's just the css mistake I did or I need to add something to make this work, but every time I click on this <li> element it navigates me to the top of the page and then shows the content of the div.

It's working at least, but I want the users to be satisfied with the functions on website, so I don't want the click() function to navigate me to the top of the page, but just to show fixed <div> from navbar that is aligned to my fixed navbar. Thanks for help.

**EDIT:**I forgot to say that after the <div> show() function I can easily move with that showed div on the site and it's fixed where it should be, but once again when I click on it to collapse it, the click() function navigates me to the top.

Here's the code:

HTML:

<li class="navbar_item navbar_item_left navbar_item_actions" onclick=">
                <a class="navbar_item_link navbar_item_link_for_actions refresher" href="#">Click me!</a>
                <div class="actions-dropdown">
                    <a href="#">First link</a>
                    <a href="#">Second link</a>
                    <a href="#">Third link</a>
                </div>
</li>

CSS:

.actions-dropdown {display: none; position: fixed; background-color: rgba(154, 210, 78, 1); width: 250px;}
.actions-dropdown a {color: rgb(250, 250, 250); padding: 8px; font-size: 15px; text-decoration: none; display: block; text-align: left; float: left; width: 234px;}

JS:

$(document).ready(function(){
   $(".navbar_item_actions").click(function(){
        var display = $(".actions-dropdown").css('display');
        if(display == 'none'){
            $(".actions-dropdown").show(400);
        } else {
            $(".actions-dropdown").hide(400);
        }
   });
});
epascarello

Cancel the click so the default action (following the link) will not execute.

$(".navbar_item_actions").click(function(e){
    e.preventDefault();
    /* rest of code */
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Fixed top navigation disappears after page reload

From Dev

Prevent a Fixed Positioned Background from Jumping to the Top of a Page on a Click Event?

From Dev

Fixed navigation on top after scroll

From Dev

page jumps to top on menu click

From Dev

Fixed Top Banner + Navigation

From Dev

How to prevent (bootstrap) fixed top navigation from zooming on mobile

From Dev

Flip Menu with Fixed Top Menu

From Dev

A navigation menu that stays on top

From Dev

jQuery Fix page scrolling to top after click

From Dev

Prevent page scrolling to top upon adding fixed position

From Dev

Transparent navigation at top of page

From Dev

Fixed top-menu troubles

From Dev

How to make a responsive navigation menu remain at the top of a page?

From Dev

Revealing A Div Fixed to Page Top After Scrolling 95 Pixels

From Dev

Fixed sidebar menu on the left and fixed header on top

From Dev

How can I refresh navigation page from left menu master page if navigation page is already on top of the stack?

From Dev

How to prevent white space "bounce" after scrolling to the top of the page and the bottom

From Dev

Prevent page from scrolling to top

From Dev

After ajax call when i click something page jump to top

From Dev

After trigger click using a hash in the URL the page needs to scroll to top

From Dev

Links in Top-Fixed Navigation Bar Not Responding

From Dev

Need centered Logo with top fixed navigation bootstrap

From Dev

How to change Fixed to top Navigation to Static top without space?

From Dev

Keep menu bar on top without position:fixed

From Dev

CSS: Fixed/pinned top menu bar

From Dev

fixed menu scroller with scrollbar and stop on top

From Dev

Make menu bar fixed on top when scrolling

From Dev

Return to top after click on image

From Dev

Zend Framework 2 Navigation Submenu (Top menu)

Related Related

  1. 1

    Fixed top navigation disappears after page reload

  2. 2

    Prevent a Fixed Positioned Background from Jumping to the Top of a Page on a Click Event?

  3. 3

    Fixed navigation on top after scroll

  4. 4

    page jumps to top on menu click

  5. 5

    Fixed Top Banner + Navigation

  6. 6

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

  7. 7

    Flip Menu with Fixed Top Menu

  8. 8

    A navigation menu that stays on top

  9. 9

    jQuery Fix page scrolling to top after click

  10. 10

    Prevent page scrolling to top upon adding fixed position

  11. 11

    Transparent navigation at top of page

  12. 12

    Fixed top-menu troubles

  13. 13

    How to make a responsive navigation menu remain at the top of a page?

  14. 14

    Revealing A Div Fixed to Page Top After Scrolling 95 Pixels

  15. 15

    Fixed sidebar menu on the left and fixed header on top

  16. 16

    How can I refresh navigation page from left menu master page if navigation page is already on top of the stack?

  17. 17

    How to prevent white space "bounce" after scrolling to the top of the page and the bottom

  18. 18

    Prevent page from scrolling to top

  19. 19

    After ajax call when i click something page jump to top

  20. 20

    After trigger click using a hash in the URL the page needs to scroll to top

  21. 21

    Links in Top-Fixed Navigation Bar Not Responding

  22. 22

    Need centered Logo with top fixed navigation bootstrap

  23. 23

    How to change Fixed to top Navigation to Static top without space?

  24. 24

    Keep menu bar on top without position:fixed

  25. 25

    CSS: Fixed/pinned top menu bar

  26. 26

    fixed menu scroller with scrollbar and stop on top

  27. 27

    Make menu bar fixed on top when scrolling

  28. 28

    Return to top after click on image

  29. 29

    Zend Framework 2 Navigation Submenu (Top menu)

HotTag

Archive