how to Create username hover dropdown menu

Question

0.00/5 (No votes)

See more:

Hi all,

I am look to create a dropdown menu on logged in username hover. Like on this(codeproject) site when you hover over your username it brings a dropdown menu.

similar example is the linkedin website ..

Please provide some ideas on how to implement this with examples if possible?

Many thanks,

Posted 29-Jan-13 2:19am

spankyleo123

Add a Solution

3 solutions

Solution 1

Please provide some ideas on how to implement this
There can be multiple ways to do it. AFAIK, here at CP, it's CSS driven. Define a hover style for the username. In the style, set display property of the dropdown div element as to display.

Underlying logic is to have a div that is hidden by default. based on some event, you need to show this div. Here, hover is that event that is being used. If you don't want CSS way, you can define onmouseover event for username and then in JavScript, show the needed div. On mouseout, hide it back.

Examples, you yourself posted couple of them in question! Now, try out and post specific issues if you face any.

Posted 29-Jan-13 2:24am

Sandeep Mewara

Comments

spankyleo123 29-Jan-13 11:59am

Hi thanks for your reply. I will give it a try.

However by examples I meant..code examples.

Thanks again for your reply.

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)

**Joezer BH** · Accepted Answer · 2013-01-29T02:25:00

Solution 2

Hi Spankyleo,

See example[^]

Basically it's mostly a lot of CSS styling to set your desired style and behavior.

Cheers,
Edo

Posted 29-Jan-13 2:25am

Joezer BH

Comments

spankyleo123 29-Jan-13 12:00pm

Thanks I'll give it a try.

Herbisaurus 18-Aug-13 2:34am

Good one

Arun kumar Gauttam · Accepted Answer · 2013-01-29T18:08:00

Solution 4

use Flex Level Drop Down Menu at dynemicDrivie Site:

The link is

http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm[^]

Posted 29-Jan-13 18:08pm

Arun kumar Gauttam