Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    Lima, Peru
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop Down Menu Info

    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 ++

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,150
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    Lima, Peru
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Arrow

    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.

    Code:
    <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.

    Code:
    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:

    Code:
    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

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    renzocj (03-22-2012)

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    Lima, Peru
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I had not thought of that, I will try that! thank you!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •