CODEWITHSUNDEEP
javascripthtmlcssnavigationmouseover
Muhamad Jafarnejad
Muhamad Jafarnejad

Reputation: 2571

Submenu - Fade in and Fade out submenu in menu bar

I want to create a menu bar in which on hover, a related extra menu should appears beside the item, and when mouse pointer goes out, it should disappears.

For example when you place your mouse pointer on your username at the top of this page, you'll see a menu contains activity, privileges, logout etc.

I want to implement such a menu.

Toggling the visibility(or changing the display) attribute of the extra menu element(such as div) is obvious.

But my problem is how could I detect that the mouse pointer is hovering over the extra menu, and it should NOT disappear till mouse pointer goes out!

I don't want to use JQuery.

Upvotes: 0

Views: 2578

Answers (6)

Muhamad Jafarnejad
Muhamad Jafarnejad

Reputation: 2571

Thank you all for your helps and ideas.

I Think I've solved the problem:

First I've created a simple with fixed width and height attributes:

<div id="menu" style="width:200px; height:50px; overflow:visible;">

</div>

Then I've added another INSIDE the menu DIV !

Here I use relative position to use z-index attribute. (absolute position is OK too.)

The left attribute let my sub-menu appear in correct position.

The display attribute is set to none; Changing it in javascript code will display the DIV.

<div id="menu" style="width:200px; height:50px; overflow:visible;">
    <div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
        ... items in sub-menu
    </div>
</div>

After that I've added two javascript functions for MouseOver and MouseOut :

<div id="menu" style="width:200px; height:50px; overflow:visible;" onmouseover="javascript: MouseOver();" onmouseout="javascript: MouseOut();">
    <div id="sub-menu" style="width:200px; height:300px; position:relative; left:200px; display:none">
        ... items in sub-menu
    </div>
</div>

Javascript:

function MouseOver(){
    document.getElementById("sub-menu").style.display = "inline-block";
}

function MouseOut(){
    document.getElementById("sub-menu").style.display = "none";
}

In this way when mouse pointer goes over the menu DIV, the sub-menu DIV appears, and when mouse pointer goes through the sub-menu DIV, it IS STILL over the menu DIV too, so MouseOut function will not invoked !

The trick was just adding the sub-menu DIV INSIDE the main menu DIV, and use relative position for it ! changin the display attribute was obvious ;)

Excuse my bad explanation. Thanks.

Upvotes: 0

Mx.
Mx.

Reputation: 3665

I would advice to use jQuery for this kind of stuff but here's the solution for your hover problem:

Attach your animation to the mouse events of your menu and your username. 

 var elem =  getelementbyid("yourTrigger");
 var elem2 = getelementbyid("yourElementToShow");
 elem.onmouseover = function(e) {
        elem2.style.display = "block";
    };
    elem.onmouseout = function(e) {
        elem2.style.display = "none";
    };
    elem2.onmouseover = function(e) {
        elem2.style.display = "block";
    };
    elem2.onmouseout = function(e) {
        elem2.style.display = "none";
    };

Upvotes: 0

gvee
gvee

Reputation: 17161

Pure CSS method

Fiddle: http://jsfiddle.net/gvee/jrFse/

HTML

<ul>
    <li>Item 1
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Item2</li>
    <li>Item 3
        <ul>
            <li>Subitem 1</li>
        </ul>
    </li>
</ul>

CSS

ul
{
    list-style-type: none;
}

ul li
{
    padding: 5px;
    margin: 3px;
    border: 1px solid black;
}

ul li:hover
{
    background-color: lime;
}

li ul
{
    display: none;
}

li:hover ul
{
    display: block;
}

li ul li:hover
{
    background-color: red;
}

NOTE: There's still some styling left for you to do, this is merely to illustrate the principle.

Upvotes: 2

kbvishnu
kbvishnu

Reputation: 15630

You can use the following to have a POP up menu. All you want to do it to restructure this in the way you want. You can have a demo at here.

HTML

    <div>
 <input type="button" ID="lnkModel"  OnClick="DisplayModal();" Text="OK" />
    </div>
    <div id="overlay"></div>
    <div id="modalMsg" style="width: 200px; height: 100px; border-color: Black; border-style: solid;
        color: Red;" class="HideModal">
        This is modalpopup window
        <input type="button" ID="lnkOk"  OnClick="return RemoveModal();" Text="OK" />
    </div>

CSS

.ShowModal
 {
                top: 200px;
                left: 250px;
                z-index: 1000;
                position: absolute;
                background-color: White;
                display: block;
            }
            .HideModal
            {
                display: none;
            }
            .OverlayEffect
            {
                background-color: black;
                filter: alpha(opacity=70);
                opacity: 0.7;
                width: 100%;
                height: 100%;
                z-index: 400;
                position: absolute;
                top: 0;
                left: 0;
            }

JavaScript

function DisplayModal()
            {
                alert("Hai");
                document.getElementById("overlay").style.height = document.body.clientHeight + 'px';
                document.getElementById("overlay").className = "OverlayEffect";
                document.getElementById("modalMsg").className = "ShowModal";
            }
            function RemoveModal()
            {
                document.getElementById("modalMsg").className = "HideModal";        
                document.getElementById("overlay").className = "";
                return false;
            }

Updates

As per this question you can use this way to trigger the hover 

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>

Check this question to know more about the difference between css and js hover events. css hover vs. javascript mouseover question mentioned above).

Upvotes: 1

Saksham
Saksham

Reputation: 9380

CSS has property

element:hover{}

For more presentable menu, use javascript

Also, if you want to change the styles of a child element on hover of parent, you may use

parentElement:hover childElement{}

So the idea could be to take a outer div(parentElement) and a label and another div(childElement) in it. On hover of the parentElement, modify the display property of childElement as shown in the above snippet.

Upvotes: 1

Parrotmaster
Parrotmaster

Reputation: 676

You will have to use Javascript to change the CSS property of the element that you want to make visible.

element.style.visibility='visible' will make your element visible, but it also reserves the space for the element, which should not be an issue since I assume the element will have a higher z-index.

For the mouse interaction, look here for the Javascript "onmouseover" event: http://www.w3schools.com/jsref/event_onmouseover.asp

Upvotes: 0

Related Questions