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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Do all DHTML menus relate to Div tags?

    I was reading some book, trying to learn this programming language, and as i was trying to see the whole forest as well as the individual trees, it seemed to me like a navigational menu system is built primarily on the foundation of div tags. Is this how they are all done?

    For example, a portion of the code looks as follow:

    Code:
    <div id = "bar" >
    <a href="#" onmouseover="reveal(1)";> Menu One </a> |
    <a href="#" onmouseover="reveal(2)";> Menu Two </a> |
    <a href="#" onmouseover="reveal(3)";> Menu Three </a> |
    </div>
    The above sets a bar with 3 links. When you go over the links, the event-handler triggers a function called reveal(), which seems to activate the appearance of a menu.

    Here's how the menu portion is created:

    Code:
    <div id="menu_1" class="menu" style="left:0px">
    
    <a href="target1.html">  Item 1 </a> </br>
    
    <a href="target2.html">  Item 2 </a> </br>
    
    <a href="target3.html">  Item 3 </a> </br>
    
    
    </div>
    Is the above a typical example of how most navigational menu systems are done?
    LovesWar

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    It's certainly common, although I really don't think you could describe any menu system as "typical", there are just so many. More and more seem to be done using list elements and CSS.

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, so how do you see the difference between the word common, and typical?

    I have never actually done, much less understood, how to do a menu of that kind, but it would stand to reason though there would be a common pattern to most of them.

    As for the CSS, well the above script uses CSS. If you look at the div tags, there is a class reference.
    LovesWar

  • #4
    New Coder
    Join Date
    Nov 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Depends on your definition of the word "word" and "and".

    I think what he is trying to say is that their is no "way to create a menu". YOu simply have to take the elements available and mash them together until the desired result is created.

    I could make a menu with out UL,LI,DIV,A,SPAN,IMG or any of the other major tags. Heck, you could make a menu out of just <em></em> if you really wanted to.

  • #5
    New Coder
    Join Date
    Nov 2003
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <em style="display:block;background-color:#FFFFCC;width:100px;text-align:center;font-weight:bold;border:1px solid #000000">EMenu
    <em style="display:block;font-weight:normal;font-style:normal" onClick="window.location = '#home'" onMouseOut="javascript:this.style.backgroundColor = '#FFFFCC'" onMouseOver="javascript:this.style.backgroundColor = '#FFFFFF'">Home</em>
    <em style="display:block;font-weight:normal;font-style:normal" onClick="window.location = '#about'" onMouseOut="javascript:this.style.backgroundColor = '#FFFFCC'" onMouseOver="javascript:this.style.backgroundColor = '#FFFFFF'">About</em>
    </em>
    Blink Menu

    Code:
    <blink style="display:block;background-color:#FFFFCC;width:100px;text-align:center;font-weight:bold;border:1px solid #000000;text-decoration:none">ME-bliNk-U
    <blink style="display:block;font-weight:normal;font-style:normal;text-decoration:none" onClick="window.location = '#home'" onMouseOut="javascript:this.style.backgroundColor = '#FFFFCC'" onMouseOver="javascript:this.style.backgroundColor = '#FFFFFF'">Home</blink>
    <blink style="display:block;font-weight:normal;font-style:normal;text-decoration:none" onClick="window.location = '#about'" onMouseOut="javascript:this.style.backgroundColor = '#FFFFCC'" onMouseOver="javascript:this.style.backgroundColor = '#FFFFFF'">About</blink>
    </blink>
    Last edited by SlySecretSpy; 07-08-2004 at 06:58 PM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a newly published DHTML menu that uses Lists: http://www.alistapart.com/articles/horizdropdowns/
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #7
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I checked out the link you gave. It was interesting.

    I guess, it isnt so much the DIV themselves that allows for a Menu of a sort, but rather, any tag capable of an ID, and CSS definitions, correct? Or is it any plain tag that can incorporate CSS definitions, as well, as an ID?

    But regardless, of which tag, or element, you do end up using, i guess the main things are the ID property, so that you may direct your code to affect the desired target specifically, and all, the CSS properties that relate to positioning, and visiability.

    I liked the code they gave:

    Code:
    startList = function()   {
    
    if (document.all && document.getElementById) {
    
    navRoot  = document.getElementById("nav");
    
    for ( i = 0 ; i < navRoot.childNodes.length; i ++) {
    
    node   = navRoot.childNodes[ i  ];
    
    if (node.nodeName == " LI ") {
    
    node.onmouseover = function() {
    
    this.className  += " over " ;
      }
    
      node.onmouseout = function() {
      this.className = this.className.replace(" over", "");
        }
       }
      }
     }
    }
    window.onload = startList ;
    The first line is a bit curious: is there a function, or property by the name of function(), or did the author simply chose to name his function function()?

    I will assume that the terms in blue in the above script mean variables?

    Are the terms in purple like properties, or arrays of some kind?
    Last edited by SpiritualStorms; 07-10-2004 at 10:45 AM.
    LovesWar

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    startlist=function() {<--notice that lat { mean that it first ends when you reach a } that is not taken up by a preceeding {.

    what he does is he assign a function to the varriable startlist so when startlist is used it either runs the function "startlist();" or assign it on "variableName=startlist;"

    And ids in menues is not really necesary only real requirement for a menu to work is that you make an understandable nesting system.

    for instance:
    <ul><-menu object
    <li><-menu item</li>
    <li><ul><-nested menu object
    <li></li>
    </ul>
    </li>
    </ul>


    the only real important thing to remember is that the elements used to make the menu is a bit hard to use to anything else in that menu.

    </ul>

  • #9
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I have no idea what you meant by........

    ....this:

    startlist=function() {<--notice that lat { mean that it first ends when you reach a } that is not taken up by a preceeding {.
    And i dont really understand why the function was called function, when i thought that the word itself was one of those reserved words.

    what he does is he assign a function to the varriable startlist so when startlist is used it either runs the function "startlist();" or assign it on "variableName=startlist;"
    But the function is not called startlist, its called function(), and it is assigned to a variable by the name of startlist.

    And you lost me on this last comment:

    the only real important thing to remember is that the elements used to make the menu is a bit hard to use to anything else in that menu.
    LovesWar


  •  

    Posting Permissions

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