CODEWITHSUNDEEP
javascripthtmlcssgmail
Basit
Basit

Reputation: 17184

how to build gmail like menu header

how can i build fixed menu like gmail menu. i have tried css, but the div stays in middle, it doesnt come up like the gmail menu does on scroll.

open in large image gmail menu scroll effect

i have tried using css property, following is some example code (not real code):

.menu {
    position:fixed;
    height: 36px;
    background-color:#fff;
}

Upvotes: 2

Views: 3198

Answers (5)

itswadesh.wordpress.com
itswadesh.wordpress.com

Reputation: 76

Here is a very simple trick to implement your requirement explained with example and a link to download. http://itswadesh.wordpress.com/2012/02/24/google-like-top-bar-with-drop-down-menu-using-html-css-and-jquery/

Upvotes: 0

Praveen Gowda I V
Praveen Gowda I V

Reputation: 9637

May be this is what you are looking for http://blog.geotitles.com/2011/10/creating-top-fixed-menu-bar-with-css3-buttons-found-in-gmail/

Upvotes: 0

herkulano
herkulano

Reputation: 558

A good and easy to use jQuery Plugin for this is Waypoints

Here you can see a working example:
http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

Upvotes: 2

smdrager
smdrager

Reputation: 7417

Position fixed alone is not enough to achieve this effect. Also, position:fixed does not work in IE7 or below, so you'll probably want to have fallback.

You need to use javascript (jQuery makes it easy) to dynamically change the position of the element based upon how far scrolled down the page you are.

Look into .scrollTop()

http://api.jquery.com/scrollTop/

var scrollTop = $(window).scrollTop();

Upvotes: 1

nw.
nw.

Reputation: 5155

You need to use javascript to check the scrollTop and set the position of your menu to fixed if if the scrollTop is more than the height of your header. 

    function getScrollTop() {
        if(typeof pageYOffset!= 'undefined') {
            //most browsers
            return pageYOffset;
        }
        else {
            var b = document.body; //IE 'quirks'
            var d = document.documentElement; //IE with doctype
            d = (d.clientHeight) ? d : b;
            return d.scrollTop;
        }
    }

    function onScroll() {
        var menu = document.getElementById('divMyMenu');
        var headerAndNavHeight = document.getElementById('divHeader').clientHeight
            + document.getElementById('tsMain').clientHeight;

        if (getScrollTop() < headerAndNavHeight) {
            menu.style.top = headerAndNavHeight + 'px';
            menu.style.position = 'absolute';
        }
        else {
            menu.style.top = '0px';
            menu.style.position = 'fixed';
        }
    }

Upvotes: 2

Related Questions