...

View Full Version : Drop Down Menu Info



renzocj
03-22-2012, 06:27 PM
Hello everyone

I would like to understand how can I do a drop down many exactly as the www.oracle.com webpage. The idea is to build some kind of menu in my web project. I know that this could be a noob question for some, thank you anyeway for any help in advanced.

Renzo ++ :thumbsup:

Philip M
03-22-2012, 07:44 PM
You are very ambitious! I don't think that to replicate that site is within the capability of a "noob". Look to a simpler menu system! You will find lots of examples with Google.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

renzocj
03-22-2012, 10:23 PM
Hello Philip

Yes, very ambitious! but it's the only way to learn more. I am not so noob, however there are many things I still don't know. You see, I need to create a horizontal menu for a webpage.

I did this using a several div's as the options (like "li" in a usual list style). Imagine a rectangular div within several divs as the options of the menu. Inside each are the text, for example "home", "about us"..

Using a little of Javascript I created the behaviors for each of this option-divs on hover.



<div id="principal_menu">
<div class="options" id="home"><p>HOME</p></div>
<div class="options" id="about"><p>ABOUT</p></div>
</div>


The idea is to create a new div once someone hover his mouse over one of the options div.



addEvent(window,'load',init);

function init() {
if(document.getElementById) {
oHome=document.getElementById="home";
addEvent(oHome,'mouseover',inHome);
}
}

function inHome() {
oHomeArea=document.createElement("div");
oHomeArea.id="homeStyles";
oHome.appendChild(oHomeArea);
}


This works fine, the hover creates the new div, this new div is attached with the id previously created in the .css so automatically appears in the perfect position, like a drop down.

The problema is that I can't remove it on mouseout.

I tryed this:



addEvent(window,'load',init);

function init() {
if(document.getElementById) {
oHome=document.getElementById="home";
addEvent(oHome,'mouseover',inHome);
}
}

function inHome() {
oHomeArea=document.createElement("div");
oHomeArea.id="homeStyles";
oHome.appendChild(oHomeArea);
addEvent(oHomeArea,'mouseout',outHomeArea);
}
function outHomeArea() {
oHome.removeChild(oHomeArea);
}


I can't remove the new div. Any Idea ?

Thanks in advanced for your help
Renzo

Old Pedant
03-22-2012, 10:55 PM
Instead of *creating* a div, why not just have the div already there and simply display/hide it as needed?

It's much less work *AND* much less "overhead" in terms of memory and performance.

That's what the Oracle site is doing, if you didn't know.

renzocj
03-22-2012, 11:02 PM
I had not thought of that, I will try that! thank you!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum