Posts Tagged ‘screencast’

CSS/JavaScript Hover Menu (screencast)

Tuesday, November 25th, 2008

I have attempted something new, as this is my first screencast ever!  As expected you may have to bear with me for a bit while I get used to it.  Please feel free to comment on suggestions I can make.  Below you can find links to the starting files, as well as the complete end product.

Starting Files
Complete Files

Below is a text version:

Today we will be coding a fully-functional, cross-browser hover menu using CSS and Javascript.

Let’s go to our index.html file and create some mark-up which we can use for our menu.

<div id="globalNavDiv">
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
    </ul>
</div>

These are the links that we will mouse over and thus causing the submenu of that particular link to show up. Let’s create the mark-up for those submenus right under our globalNavDiv.

<div id="submenu1">
    <a href="#">Menu Item 1</a>
    <a href="#">Menu Item 2</a>
    <a href="#">Menu Item 3</a>
</div>
<div id="submenu2">
    <a href="#">Menu Item 1</a>
</div>

Now take a look at it in the browser. As you can see it isn’t looking too pretty yet, but it’s a start. We now need to style our elements in our external css file. Open up our styles file and begin entering the following.

#globalNavDiv ul
{
    border: 1px solid #a3a3a3;
}
#globalNavDiv li
{
    display: inline;
    padding: 0px 10px;
}
#globalNavDiv li a
{
    color: #575757;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

#globalNavDiv li a:hover
{
    color: #353535;
}
#submenu1, #submenu2
{
    background-color: #820024;
    border: 1px solid #a3a3a3;
    z-index: 1000;
}

#submenu1 a, #submenu2 a
{
    border-top: 1px solid #fdd3df;
    display: block;
    color: #fdd3df;
    text-decoration: none;
    padding: 5px 15px 5px 5px;
}

#submenu1 a:hover, #submenu2 a:hover
{
    color: #ffffff;
}

Now take a look in the browser once more. As you can see we have now styled our main and sub menus. The problem is that our submenus are not in the right position. Let’s change that now:

#wrapperDiv
{
    position: relative;
}
#submenu1, #submenu2
{
    position: absolute;
    top: 0px;
}
#submenu1
{
     left: 0px;
}
#submenu2
{
    left: 0px;
}

Now we have absolutely positioned each of our submenus to the top left corner of our wrapperDiv. Let’s use firebug to align our submenus to the bottom of our main menu links. This ends up being 20px. Let’s change this permanently in our styles file.

#submenu1, #submenu2
{
    top: 20px;
}

Continue using firebug to specify a left value to each.

#submenu1
{
    left: 50px;
}
#submenu2
{
    left: 120px;
}

Perfect! Now the one problem we still have is that the divs are shown by default.  Lets hide these divs now:

#submenu1, #submenu2
{
    visibility: hidden;
}

The only thing left to do now is create the JavaScript code and attach it to the HTML. First lets create an array with all the ids of the submenus

var menuArray = new Array();
menuArray[0] = 'submenu1';
menuArray[1] = 'submenu2';

Then initialize some variables we will use in our functions.

var globalObject = '';
var isActive = false;
var ourTimer;

Now we will need to create 4 functions; one to show and hide the correct div, another to start our timer and hide the menu when it ends, another that physically hides the menu if it’s not active, and lastly one that checks if the mouse is still over the div.

function showhide(obj, onlink)
{
    targetObject = document.getElementById(obj).style;
    globalObject = targetObject;

    if(onlink)
    {
        clearTimeout(ourTimer);

        for (i=0; i < menuArray.length; i++)
        {
            var tempObject = document.getElementById(menuArray[i]).style;
            tempObject.visibility = "hidden";
        }

        targetObject.visibility = 'visible';
        isActive = true;
    }
    else
    {
        isActive = false;
        layerTimer();
    }
}

function layerTimer()
{
    ourTimer = setTimeout("hideMenu()",0750);
}

function hideMenu()
{
    if( !isActive )
    {
        globalObject.visibility = 'hidden';
    }
}

function layerCheck(flag)
{
    if(flag)
    {
        isActive = true;
        clearTimeout(ourTimer);
    }
    else
    {
        isActive = false;
        layerTimer();
    }
}

Now let’s attach the above functions to our HTML file. Create a function that triggers when the page loads and assigns each submenu div to fire the layerCheck when moused over or moused out.

window.onload = function()
{
    for(var i=0;i<menuArray.length;i++)
    {
        var id = menuArray[i];
        var e = document.getElementById(id);
        e.onmouseover = function(e)
        {
            layerCheck(true);
        }
        e.onmouseout = function(e)
        {
            layerCheck(false);
        }
    }
}

Now lastly we need to trigger our showhide function when each of our main links is moused over or moused out.

<li><a href="#"
onmouseover="showhide('submenu1', true); return false;"
onmouseout="showhide('submenu1', false);">Menu 1</a>
<li><a href="#"
onmouseover="showhide('submenu2', true); return false;"
onmouseout="showhide('submenu2', false);">Menu 2</a></li>

Now peak over to both Firefox and Internet Explorer 7 and see that we now have a fully functional Hover Menu.

Tags: , , ,
Posted in Web Programming | 3 Comments »

 
connect with me!