Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member [Li] Brad's Avatar
    Join Date
    Oct 2003
    Location
    Saskatoon, Canada
    Posts
    578
    Member #
    3689
    Alright, based on the number of questions I see and receive from people looking for a good JavaScript dropdown menu tutorial, I decide to write this – though it’s more of a walkthrough, so bear with me.
    ----
    Ahh, JavaScript. It’s quite useful in certain situation, I have found. Too bad I don’t have a clue on how to write the darned stuff; couldn’t be bothered to learn in fact (at least at this time) so naturally when I stumbled across this code for a great dropdown menu, I was pleased.

    **NOTE: I did not write the actual JavaScript functions, I stumbled on them awhile ago and any credits that were in the code have been lost in transfer. I’m not trying to pass this code off as my own, so if you know whose it is, please inform me ?

    Step 1The .js File
    First we start off with the actual file with all the functions. Rather than insert it all here, I will attach it as a text file following all these instructions, as it is lengthy to say the least.

    The script is in an external .js file since a dropdown menu would be used on more than one page and therefore including it in the HTML is a more efficient way of doing it. I will discuss the insertion of the code at a later spot in this walkthrough.

    Step 2The .CSS File
    The Cascading Style Sheet file basically defines the look and feel of the dropdown menu, it formats everything from background color to mouseover effects. I will include the code here since it isn’t long:
    Code:
     .menu {
    	filter:alpha(Opacity=100, FinishOpacity=65, 
    _ Style=1, StartX=0, StartY=0, FinishX=500, FinishY=250); 
    }
    .MenuBox {
    	border-bottom: 1px solid #999999;
    	border-left: 1px solid #999999;
    	border-right: 1px solid #999999;
    }
    a.MenuHeader
    {
    	COLOR: #0033CC;
    	FONT-SIZE: 10px;
    	FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
    	TEXT-DECORATION: None;
    	FONT-WEIGHT: Bold;
    }
    a.MenuHeader:link
    {
    	COLOR: #0033CC;
    	FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
    	TEXT-DECORATION: None;
    	FONT-WEIGHT: Bold;
    }
    a.MenuHeader:visited
    {
    	COLOR: #0033CC;
    	FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
    	TEXT-DECORATION: None;
    	FONT-WEIGHT: Bold;
    }
    a.MenuHeader:hover
    {
    	COLOR: #0033CC;
    	FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
    	TEXT-DECORATION: None;
    	FONT-WEIGHT: Bold;
    }
    a.MenuItem
    {
    	COLOR: #666666;
    	FONT-SIZE: 10px;
    	FONT-FAMILY: Tahoma;
    	TEXT-DECORATION: None;
    	FONT-WEIGHT: Bold;
    }
    a.MenuItem:link
    {
    	COLOR: #666666;
    	FONT-SIZE: 10px;
    	FONT-FAMILY: Tahoma;
    	TEXT-DECORATION: None;
    	FONT-WEIGHT: Bold;
    }
    a.MenuItem:visited
    {
    	FONT-SIZE: 10px;
    	FONT-FAMILY: Tahoma;
    	TEXT-DECORATION: None;
    	FONT-WEIGHT: Bold;
    }
    a.MenuItem:hover
    {
    	COLOR: #990000;
    	FONT-SIZE: 10px;
    	FONT-FAMILY: Tahoma;
    	TEXT-DECORATION: None;
    	FONT-WEIGHT: Bold;
    }
    If you understand this then you can skip to Step 3, otherwise here is an explanation on how the following CSS properties work (I’ll display the attributes that I know what they do):
    .menu – Formats the menu’s background to slowly fade out as towards the right side of the screen. While this is a cool feature, it is not supported by Netscape or Mozilla (that I know of) though adding it in won’t cause problems in these browsers.
    The attributes(?) for the .menu property are:
    - Opacity: Controls the starting opacity (left side; in percentage)
    - FinishOpacity: Controls the ending opacity (right side; in percentage)

    .MenuBox – Formats the dropdown menu box.
    - border-bottom: Controls the style of the bottom border in the dropdown items
    --- 1px: The weight of the border
    --- solid: The style of the border
    --- #999999: The hexadecimal color code for dark gray. Check out http://www.colorschemer.com/online.html for a list of hex color codes
    - The rest (border-right, left and conceivably top you can figure out )

    The rest of the properties just format different instances of the text, you can change what is listed under these properties and more if you want. Check out http://www.w3schools.com/css/default.asp to learn all about Stylesheets!

    Step 3The JavaScript Include
    At this time we will go ahead and insert the JavaScript include for the .js file. Place this code:
    Code:
     <script language="JavaScript" src="myjsfile.js"></script>
    in each HTML page that will use the dropdown menu. I just put it right after the <body> tag, but you can put it anywhere in the file you need.
    *Remember that the link in the code above is relative, if you stored the .js file somewhere other than the same directory as the page it is included on, you will need to add a path (scripts/myjsfile.js))


    Step 4The Table
    We need to start the table where the dropdown menu will be placed so (some of the code is in long lines, so rather than mess up the forum, I have added an underscore ( _ ) to where the code skips to the next line. There are about 10, so take them out along with the line breaks to fix the code) :
    Code:
     <table width="136" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
    Of course you may need to change this to suit your needs. Now we add a link-to-nowhere so the JavaScript can detect an event:
    Code:
            <div id="label1">
                <a href="#" class="MenuHeader" onMouseover="return !showMenu('1', event, 
    _ 'label1'); menuOver('rollimg1');"  onMouseOut = "window.status='';return true;">
                <img src="images/services.gif" alt="Services" width="72" height="25" 
    _ border="0">
               </a>
            </div>
    All the code is relative to my site, so you will need to change the image size and location for your own. This section creates the actual “closed” view of the menu, so my dropdown will be Services. Just copying and pasting the code will suffice here, just be sure to change your image locations, sizes and alt text.

    Step 5The Hidden Divs
    Alright, now it gets tricky. Just align your code right and you should see the logical pattern of the code, so here goes:
    Code:
     <div id="menu1" style="width: 150px; height: 52px; position:absolute; z-index:1; 
    _ visibility:hidden" onmouseover="event.cancelBubble = true;" class="Menu">
        <table border="0" cellspacing="0" cellpadding="0" width="200">
            <tr>
                <td bgcolor="#336699" width="100%">
                    <table border=0 cellpadding=2 cellspacing=0 width="100%">
    <! -- Chunk ->
    <! -- Chunk 1 Starts ->
                        <tr id="1a" bgcolor="#336699">
                        <td onMouseover="this.style.backgroundColor = '#004d99';" onMouseout = 
    _ "this.style.backgroundColor = '#336699';" width="100%" class="MenuBox">
                        <a class="MenuItem" href="temp.php?page=webdesign.html" 
    _ onMouseOut="menuOut('rollimg1');" onMouseOver= 
    _ "menuOver('rollimg1');">Web Design</a></td>
                        </tr>
    <! -- Chunk 1 Ends ->
    <! -- Chunk 2 Starts ->
                        <tr id="1b" bgcolor="#336699">
                        <td onMouseover="this.style.backgroundColor = '#004d99';" onMouseout = 
    _ "this.style.backgroundColor = '#336699';" width="100%" class="MenuBox">
                        <a class="MenuItem" href="temp.php?page=logodesign.html" 
    _ onMouseOut="menuOut('rollimg1');" onMouseOver= 
    _ "menuOver('rollimg1');">Logo Design</a></td>
                         </tr>
    <! -- Chunk 2 Ends ->
    <! -- Chunk 3 Starts ->
                         <tr id="1c" bgcolor="#336699">
                         <td onMouseover="this.style.backgroundColor = '#004d99';" onMouseout = 
    _ "this.style.backgroundColor = '#336699';" width="100%" class="MenuBox">
                         <a class="MenuItem" href="temp.php?page=quoteform.html" 
    _ onMouseOut="menuOut('rollimg1');" onMouseOver= 
    _ "menuOver('rollimg1');">Free Quote</a></td>
                         </tr>
    <! -- Chunk 3 Ends ->
    <! -- Chunk ->
                    </table>
                </td>
            </tr>
        </table>
    </div>
    Now, I don’t think I need to explain this HTML, but I will say:
    1. Keep the classes on everything as is and nothing should go wrong.
    2. Each chunk of code I have commented represents one of the menu items that appears. To remove a menu item, take out all code between a chunk. To add a menu item, copy and paste the code for a chunk within the Chunk comments. It must be between these comment lines at all times or your page will mess up. Also note that in each chunk, the <tr> has an ID. Just name them logically as I have to avoid problems. (As long as no two IDs are the same, the name doesn’t matter.

    Step 6Finish the Table
    Now just end the table code:
    Code:
      </td></tr>
    </table>
    And you should be ready to go!

    If you have further questions/comments/bugs in the above walkthrough, PM me, and I’ll help you/fix them
    "Art strives for form, and hopes for beauty." - George Bellows

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Good tutorial. Your menus are VERY similar to mine at http://www.transio.com - although it's obvious that we did them separately, I find it funny that we went about making them in almost the exact same way!

  4. #3
    Senior Member [Li] Brad's Avatar
    Join Date
    Oct 2003
    Location
    Saskatoon, Canada
    Posts
    578
    Member #
    3689
    I love this script, it works great, the only thing I cannot find out is how to change the position of the menus for say a side navigation dropdown, it seems easy enough, just change the positioning, but I had tried a lot of different things and none seem to work.

    [Li] Brad
    "Art strives for form, and hopes for beauty." - George Bellows

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Absolute positioning is a little buggy if you ask me. If I have absolute positioning within a div, it should be absolute RELATIVE to the div I'm in. Really, there should be a third one called "relative-absolute". LOL

  6. #5
    Junior Member
    Join Date
    Feb 2004
    Location
    St.Louis
    Posts
    16
    Member #
    4852
    Ok this may sound a bit dumb but im sorry =/

    What exactly do you do with the .js and the .css files?

  7. #6
    Senior Member [Li] Brad's Avatar
    Join Date
    Oct 2003
    Location
    Saskatoon, Canada
    Posts
    578
    Member #
    3689
    transio: Really, there should be a third one called "relative-absolute". LOL
    Heh, I said the exact same thing about it two days ago to my friend Mark, and I agree, there does need to be something like that.

    Meepo: The .js file and .css file just need to be saved as their respective type in the same directory as your HTML page (unless you change the links to it in the HTML page, but with the code above you save it in the same directory)

    [Li] Brad
    "Art strives for form, and hopes for beauty." - George Bellows

  8. #7
    Junior Member
    Join Date
    Feb 2004
    Location
    St.Louis
    Posts
    16
    Member #
    4852
    ahh ok thanks a bunch.

    I made a 'test' page and ran into a problem right away. I have the image I want loading ok but the drop down menu wont apear when when you highlight it only when you refresh and even then it goes away quickly. http://www.phantasia4.com/meepo.html

  9. #8
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    Code:
    error report:
    
    line: 72
    char: 3
    error: expected ')'
    u might wanna check that out
    tekp :cheeky: tekponline.com

  10. #9
    Junior Member
    Join Date
    May 2004
    Location
    New Zealand
    Posts
    1
    Member #
    5870
    Hey, Thanks for the tutorial, I was searching for one for ages ><.
    I've loaded my own image in, and still getting an idea of how the code works, but there is a slight gap between the image and the drop down part. When you scroll over the small gap the drop down area dissapears, any way you can help me?

  11. #10
    Junior Member
    Join Date
    May 2004
    Location
    Belgium
    Posts
    1
    Member #
    6021
    Quote Originally Posted by transio
    Absolute positioning is a little buggy if you ask me. If I have absolute positioning within a div, it should be absolute RELATIVE to the div I'm in. Really, there should be a third one called "relative-absolute". LOL
    Simply add this declaration to your parent tag (in this case div):
    Code:
    position: relative;
    Every tag declared as 'position: absolute' in this parent tag will position itself in regards to the parent's upper left corner.

    Works in Mozilla, Opera, IE, FireFox ...

    Grtz, Maarten


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com