On hover display menu

Question

I am wondering if there's a tutorial to display a context-like menu when hovering a button, this is very similar to Google Plus onHover menu effect seen below:

enter image description here

Any tutorial on this is appreciated, thanks!

I was thinking of a way to display it when hovering, like the usage of an "open" to "toggle" class, but not sure, any help or tutorial on this is appreciated, thanks a lot! — John Smith, Oct 18 '13 at 12:39
[Type of Questions to Avoid](http://stackoverflow.com/help/dont-ask) — Alex W, Oct 18 '13 at 12:39
@NathanLee do you know of any way to achieve this result? Thanks a lot in advance. — John Smith, Oct 18 '13 at 12:41
Is your Google search broken? There are dozens of links you could follow instead of asking someone else to do the work for you, right? — David Navarre, Oct 18 '13 at 12:42
I'm pretty sure you're trying to get us to do your work for you here...because you've obviously not even gone to google — pythonian29033, Oct 18 '13 at 12:42
You are proably not using the right keywords. Regardless, this doesn't look diffcult to achieve and im sure there are thousands on ppl on SO who can answer this in 5 mins completely to the detail. But every1 would like to see you make an effort — MarsOne, Oct 18 '13 at 12:47
You could take a look at how Bootstrap does it, http://getbootstrap.com/javascript/#dropdowns - Basically you'd have a `container element` with a `trigger` and a `menu` inside. When the trigger is clicked/hovered, the menu appears. — Matt W, Oct 18 '13 at 13:11
@M_Willett thanks for you effort, but bootstrap is nothing I want to follow. If there's a better way to do this practically, I'd be happy to see the solutions or the tutorial on it, thanks a lot. — John Smith, Oct 18 '13 at 13:13

score 5 · Answer 1 · answered Oct 18 '13 at 12:45

5

You might find the below link helpful:

http://medialize.github.io/jQuery-contextMenu/demo/trigger-hover-autohide.html

answered Oct 18 '13 at 12:45

honor

7,378
10
48
76

1

This is very close to what I was looking for, is there a way to achieve this with pure CSS 2.0? – John Smith Oct 18 '13 at 12:47
You mean without any javascript or jquery? – honor Oct 18 '13 at 12:48
1

@sr. Yes if possible, not sure if G+ uses jQuery or if they achieved this with pure CSS. – John Smith Oct 18 '13 at 12:49
2

@JohnSmith, almost every website you see now uses jQuery. – MarsOne Oct 18 '13 at 12:51
The menu is drawn by the PHP when the page is generated, but it will remain hidden until Hover of course. – John Smith Oct 18 '13 at 12:51
@MarsOne sure, but what about backward-compatibility with older browsers? – John Smith Oct 18 '13 at 12:52
@john With CSS3 that could be done I think. With CSS2 I am not sure. – honor Oct 18 '13 at 12:52
Which older browsers are you talking about , IE6, IE7? jQuery 1.X is supported in ie6+, jquery 2.X is supported in ie9+. I think ie8 is almost dead now and dont even bother with 6 & 7 – MarsOne Oct 18 '13 at 12:53
1

@JohnSmith cleanest way will be to build and hide your HTML menu on your page, and show it using javascript on hover. That is all it takes. Easy :) What you want is a clean and nice looking menu like Google's. Showing and hiding is easy. But that sample I provided is also cool, and easy. You could still try that. – honor Oct 18 '13 at 13:02
Reagrding the code, the code is clean and minimal. Hardly 12 lines of it. – MarsOne Oct 18 '13 at 13:03
Check this http://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered/184673#184673 for hilarious code – MarsOne Oct 18 '13 at 13:03
@MarsOne LOL! LOL! LOL! LOL! – John Smith Oct 18 '13 at 13:05

score 1 · Answer 2 · answered Oct 18 '13 at 12:43

1

The best way in my opinion is using pure css

CSS:

.button {
    position: relative;
}

    .button .hovermenu {
        position: absolute;
        top: 25px;
        left: 0px;
        display: none;
    }

    .button:hover .hovermenu {
        display: block;
    }

HTML:

<ul>
    <li class="button">
        This has a hovermenu!
        <div class="hovermenu">
            <ul>
                <li>Submenu item</li>
            </ul>
        </div>
    </li>
</ul>

answered Oct 18 '13 at 12:43

Tum

6,937
2
25
23

The advantage of this is that you can add as much buttons with a submenu as you like (`

Tum

Oct 18 '13 at 12:52

provide a fiddle sample plz! Thanks a lot! – John Smith Oct 18 '13 at 12:58

@JohnSmith http://jsfiddle.net/Tumtum/gF7eh/ – Tum Oct 18 '13 at 16:15

score 1 · Answer 3 · answered Oct 18 '13 at 12:44

https://www.google.co.in/search?q=css+drop+down+menu+tutorial&aq=2&oq=css+drop+downs&aqs=chrome.3.57j0l3j62l2.4118j0&sourceid=chrome&ie=UTF-8

This will give hundreds of tutorials about what you want,

you can create such a menu with simple css only, have a look here,

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

hope this helps you

score 0 · Answer 4 · answered Oct 18 '13 at 12:45

0

ok you've got two event optins here, here's the OBVIOUS one;

$( "img" ).hover(
  function() {
    showMenu(); //hyperthetical function to show whatever
  }, function() {
     hideMenu();//hyperthetical function to show whatever
});

answered Oct 18 '13 at 12:45

pythonian29033

5,148
5
31
56

score 0 · Answer 5 · answered Oct 18 '13 at 12:46

You don't need a tutorial to do that. It's simple css.

//Your button
<input type="button" class="btn" />

//Your div that contains the contextual-like menu
<div class="contextualMenu">
   your contextual menu goes here
</div>

//And the css code is (menu is hidden by default and shows up only when you hover the button)
.contextualMenu{display:none;}
.btn:hover .contextualMenu{display:block;}

Hope this is useful for you. Cheers!

score 0 · Accepted Answer · answered Oct 18 '13 at 13:24

Copying the very good method used in Bootstrap (this is how I'd do it):

Have a container, a trigger and a menu.

HTML

<div class="dropdown_container">

    <a class="dropdown_trigger">Button</a>

    <ul class="dropdown_menu">
        <li><a>...</a></li>
        <li><a>...</a></li>
        ...
    </ul>
</div>

CSS

.dropdown_container { position: relative; }
.dropdown_trigger { display: block; }
.dropdown_menu { position:aboslute; top: 100%; display: none; }
.show_dropdown .dropdown_menu { display: block; }

JS

// On click
$('.dropdown_trigger').click( function() {
    $(".dropdown_menu").addClass("show_dropdown");
});

// On hover
$('.dropdown_trigger').hover( function() {
    $(".dropdown_menu").addClass("show_dropdown");
});

// Or add the css directly
$('.dropdown_trigger').hover( function() {
    $(".dropdown_menu").css("display", "block");
});

On hover display menu

6 Answers6