CODEWITHSUNDEEP
javascriptjqueryhtmlcss
rolory
rolory

Reputation: 362

Creating a floating menu

I have been trying to create a floating menu with SMINT. The meaning is that if you scroll down the page, the menu stays up.
The problem is, as you see in the code, the menu is combined from divs.
I want a menu which divided with lis and ul, a regular one, so I've tried to change the divs, but the code isn't the same - he isn't stay up when I'm scrolling down the page; Demo.
I know that it's possible to create a menu with ul lis, because I saw the menu at Infinity Network Floating Code . It is made with lists nad it is floating when you are scrolling down.
So I must did something wrong in my code if it doesn't work well.

Q: What did I do wrong in my code or what can I do to make it work?
Thanks in advance.

Upvotes: 1

Views: 400

Answers (2)

davidkonrad
davidkonrad

Reputation: 85538

You lack the javascript logic in order to make this to work. You must detect when the user is scrolling, and when he or she has stopped scrolling, update the position of the menu.

Give your <ul> an id :

<ul class="subMenu" id="submenu">

Add position: absolute and a z-index to your subMenu class :

.subMenu {
    position: absolute;
    z-index: 100;
}

Then add the following script at the end of your page :

var submenu = document.getElementById('submenu');
var scrollTimer;
window.onscroll = function() {
    submenu.style.visibility='hidden';
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        submenu.style.visibility='visible';        
        submenu.style.top=parseInt(scrollTop)+'px';
    }, 500);
}

This approach will also give you the desired delayed effect (try experiment with the timeout value).

See fiddle (lacks some styling) -> http://jsfiddle.net/puzN4/

Upvotes: 1

Ted
Ted

Reputation: 14927

In your example, you could simply set the .submenu to position:fixed and z-index:99999

Upvotes: 0

Related Questions