Sticky Menu

Quick navigation? The sticky menu is one option that keeps your menu visible, allowing users to move across other parts of the site easily without needing them to scroll to the very top. Such navigation systems also cover up quite less space while allowing you to place your logo on the menu. These menus are a brilliant choice for sites offering long-form content as they may increase the user experience. You can find a more detailed review here.

With Dropdown Menu Generator, you can create customized sticky menus within minutes.

This example shows the menu which is fixed relative to its container. When you scroll down, it remains in the same position – so you can quickly access the navigation, no matter where you are on the webpage. The sticky menu is always locked into place and does not go away when a user scrolls down the page.

Download Demo

Sticky Menus are the Best

While it is super important to provide users with a comfortable way to navigate through your site, it is not the easiest thing to do. Sticky menus help to save time. We all know how precious everyone’s time is and that is the entire point about the digital world. Isn’t it? Imagine going back a hundred pages to access the basic buttons, or the “next page” button. Yes! Sticky menus provide a user-friendly interface by being consistently visible even when users scroll down the page.

The vertical menu in the left column also has a “Sticky” feature. When you scroll down the page, it remains visible. The user always has access to the root menu items as well as to the dropdown submenus.

Download Demo

Make Sticky Menus with Ease

Our online application has all the necessary tools to make a website navigation menu quickly. To alter the default menu behavior and make it sticky, you should use a couple of lines of additional code.

It is worth drawing attention to the jQuery plugin named “Sticky” which is an easy-to-use component that adds “Sticky” functionality to the container with navigation links. It is required only a few lines of code. All you need is to add a reference to the plugin library and call the sticky() method of the menu's container. Take a look at the code snippet below. Key lines are marked with bold text.

<!DOCTYPE html>
<html>
<head>

    <title>Sticky Menu</title>

    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.sticky.js"></script>
    
    <script type="text/javascript">
        $(window).load(function(){
            $("#Navigation").sticky({ topSpacing: 0, center:true});
        });
    </script>

</head>

<body>

    <div id="Navigation">
        <script type="text/javascript" src="./MyMenu1/MyMenu1.js"></script>
        <div id="MyMenu1"></div>
    </div>
        
</body>
</html>

Download Full Code

“I am really pleased to have found the Menu Generator - it has provided exactly the sort of simple to use and very professional looking menu system for my site which I was looking for, I have had very positive feedback from my users on the new menu system and I would recommend it to anyone.” - Jeremy Young.