Floating Menu bar like gmail

Question

4.00/5 (1 vote)

See more:

Hi,

I am making a website and in it I want to provide dynamic floating menu bar like Gmail(current one). I have searched over internet for it but there i found menu bar whose co-ordinates are fixed.

I mean if menu bar is on center of page and you scroll page a little then menu will also scroll but when menu bar comes to top of page then menu bar is fixed along with the page and will be shown throughout the whole page. For Example see Gmail menu bar having options like move, delete etc.

I need some help regarding this.

Thanks.
Sammy

Posted 9-Aug-11 0:03am

Sam_IDEA

Updated 9-Aug-11 6:16am

v3

Add a Solution

Comments

Slacker007 9-Aug-11 6:42am

Edited for readability.

MallikarjunaGupta 9-Aug-11 7:40am

you are talking about Archive,spam, delete,move to menu bar.

Sam_IDEA 9-Aug-11 9:30am

yeah.
I'm talking about the same.
for more details about my question please scroll down the page.
thnx
Sammy

2 solutions

Solution 1

you can use position:fixed in your css code for the div which you want to fixed.

Posted 9-Aug-11 1:43am

123arvind123

Comments

Sam_IDEA 9-Aug-11 9:29am

thnx 123arvind123 for your time.
As I mentioned I need to provide menu bar just like gmail is using(Archive,spam, delete,move to menu bar). If I uses position: fixed attribute, then menu bar will be fixed at that exact point only. I need when user scroll down the page, menu bar should scroll down until top of page is achieved and after that it should fix on top. I need some jquery snippets for this purpose.
Thnx
Sammy

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Matt Bradley · Accepted Answer · 2011-08-09T06:41:00

Solution 2

Check out my blog post on this subject: http://www.dittocode.com/how-to-emulate-gmails-floating-menu-bar-with-jquery/[^]

Posted 9-Aug-11 6:41am

Matt Bradley

Comments

Matt Bradley 9-Aug-11 13:23pm

The example works (http://www.dittocode.com/sandbox/floating-menu-bar1.html), and the snippets are taken from the example. Are you forgetting to include the jQuery source? What problems are you actually having?

Sam_IDEA 9-Aug-11 13:28pm

Sorry.
Same as you mention, I forgot to include jQuery source. But I included before your comment. :)

Thnxx a lot. It was great help. :)