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 8 of 8

Thread: pop-up menu....

  1. #1
    Registered User
    Join Date
    Jan 2003
    Location
    CT
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    pop-up menu....

    does anyone know how i would create a pop-up menu, like the top right on microsoft.com?

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    those are made with javascript playing around with the visibility and such like... aka dHTML (d=dynamic)

    there are some similar menus available at dynamic drive:
    http://www.dynamicdrive.com/dynamicindex1/index.html

    or javascript kit:
    http://www.javascriptkit.com/script/cutindex23.shtml

    redhead

  • #3
    Registered User
    Join Date
    Jan 2003
    Location
    CT
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    does anyone know of a script that has only text, no images, and is easy to change colors and links? i was unable to find one at those two links

  • #4
    Regular Coder
    Join Date
    Jan 2003
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.dynamicdrive.com/dynamicindex1/sm/index.htm looks almost identical to the one on microsoft.com.

  • #5
    Registered User
    Join Date
    Jan 2003
    Location
    CT
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i found another one on dynamic drive, http://www.dynamicdrive.com/dynamici...men4/index.htm , and put it on my site ( warpcell.com ) but now i need someone to help me reposition it where ever u put the code, the menu goes to the top

  • #6
    New Coder
    Join Date
    Feb 2003
    Location
    ROMANIA
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You'll do it yourself.
    Just open the *.js files (or the html source code) in NotePad and search for some variables
    named "top" , "verticalStart" or something like this. There should be also some useful author's comments (text after double slash "//" or between "/*" and "*/").
    It doesn't matter where you place the menu within your HTML because it uses "absolute" CSS positioning.
    Claudiu Iacob - Romania

  • #7
    Registered User
    Join Date
    Jan 2003
    Location
    CT
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ill do it myself? it called asking for help. i dont know how to do css or javascript. i didnt ask for rude morons to post here i asked if someone could help me.

  • #8
    New Coder
    Join Date
    Feb 2003
    Location
    ROMANIA
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, don't take it this way.

    You don't need any JS or CSS skills for that, but if you want,
    I'll do it for you:

    BELOW IS THE FILE "menu_array.js"

    LOOK FOR THE ROWS OF ASTERISKS AND FOR SOME RED NUMBERS

    Code:
    /*
     DHTML Menu version 3.3.19
     Written by Andy Woolley
     Copyright 2002 (c) Milonic Solutions. All Rights Reserved.
     Plase vist http://www.milonic.co.uk/menu or e-mail menu3@milonic.com
     You may use this menu on your web site free of charge as long as you place prominent links to http://www.milonic.co.uk/menu and
     your inform us of your intentions with your URL AND ALL copyright notices remain in place in all files including your home page
     Comercial support contracts are available on request if you cannot comply with the above rules.
     This script featured on Dynamic Drive (http://www.dynamicdrive.com)
     */
    
    //The following line is critical for menu operation, and MUST APPEAR ONLY ONCE. If you have more than one menu_array.js file rem out this line in subsequent files
    menunum=0;menus=new Array();_d=document;function addmenu(){menunum++;menus[menunum]=menu;}function dumpmenus(){mt="<script language=javascript>";for(a=1;a<menus.length;a++){mt+=" menu"+a+"=menus["+a+"];"}mt+="<\/script>";_d.write(mt)}
    //Please leave the above line intact. The above also needs to be enabled if it not already enabled unless this file is part of a multi pack.
    
    
    
    ////////////////////////////////////
    // Editable properties START here //
    ////////////////////////////////////
    
    // Special effect string for IE5.5 or above please visit http://www.milonic.co.uk/menu/filters_sample.php for more filters
    if(navigator.appVersion.indexOf("MSIE 6.0")>0)
    {
    	effect = "Fade(duration=0.2);Alpha(style=0,opacity=88);Shadow(color='#777777', Direction=135, Strength=5)"
    }
    else
    {
    	effect = "Shadow(color='#777777', Direction=135, Strength=5)" // Stop IE5.5 bug when using more than one filter
    }
    
    
    timegap=500				// The time delay for menus to remain visible
    followspeed=5			// Follow Scrolling speed
    followrate=40			// Follow Scrolling Rate
    suboffset_top=10;		// Sub menu offset Top position 
    suboffset_left=10;		// Sub menu offset Left position
    
    style1=[				// style1 is an array of properties. You can have as many property arrays as you need. This means that menus can have their own style.
    "navy",					// Mouse Off Font Color
    "ccccff",				// Mouse Off Background Color
    "ffebdc",				// Mouse On Font Color
    "4b0082",				// Mouse On Background Color
    "000000",				// Menu Border Color 
    12,						// Font Size in pixels
    "normal",				// Font Style (italic or normal)
    "bold",					// Font Weight (bold or normal)
    "Verdana, Arial",		// Font Name
    4,						// Menu Item Padding
    "arrow.gif",			// Sub Menu Image (Leave this blank if not needed)
    ,						// 3D Border & Separator bar
    "66ffff",				// 3D High Color
    "000099",				// 3D Low Color
    "Purple",				// Current Page Item Font Color (leave this blank to disable)
    "pink",					// Current Page Item Background Color (leave this blank to disable)
    "arrowdn.gif",			// Top Bar image (Leave this blank to disable)
    "ffffff",				// Menu Header Font Color (Leave blank if headers are not needed)
    "000099",				// Menu Header Background Color (Leave blank if headers are not needed)
    ]
    
    
    
    addmenu(menu=[		// This is the array that contains your menu properties and details
    "mainmenu",			// Menu Name - This is needed in order for the menu to be called
    
    /****************************************/
    /* EDIT BELOW FOR VERTICAL OFFSET **********/
    /****************************************/
    450,
    /* _____________________________________*/
    
    
    			// Menu Top - The Top position of the menu in pixels
    
    /********************************************/
    /***** EDIT BELOW FOR HORIZONTAL OFFSET ********/
    /********************************************/
    200,
    /* _________________________________________*/
    
    // Menu Left - The Left position of the menu in pixels
    ,					// Menu Width - Menus width in pixels
    1,					// Menu Border Width 
    ,					// Screen Position - here you can use "center;left;right;middle;top;bottom" or a combination of "center:middle"
    style1,				// Properties Array - this is set higher up, as above
    1,					// Always Visible - allows the menu item to be visible at all time (1=on/0=off)
    "left",				// Alignment - sets the menu elements text alignment, values valid here are: left, right or center
    effect,				// Filter - Text variable for setting transitional effects on menu activation - see above for more info
    ,					// Follow Scrolling - Tells the menu item to follow the user down the screen (visible at all times) (1=on/0=off)
    1, 					// Horizontal Menu - Tells the menu to become horizontal instead of top to bottom style (1=on/0=off)
    ,					// Keep Alive - Keeps the menu visible until the user moves over another menu or clicks elsewhere on the page (1=on/0=off)
    ,					// Position of TOP sub image left:center:right
    ,					// Set the Overall Width of Horizontal Menu to 100% and height to the specified amount (Leave blank to disable)
    ,					// Right To Left - Used in Hebrew for example. (1=on/0=off)
    ,					// Open the Menus OnClick - leave blank for OnMouseover (1=on/0=off)
    ,					// ID of the div you want to hide on MouseOver (useful for hiding form elements)
    ,					// Reserved for future use
    ,					// Reserved for future use
    ,					// Reserved for future use
    ,"Home","http://www.dynamicdrive.com",,"Back to the home page",1 // "Description Text", "URL", "Alternate URL", "Status", "Separator Bar"
    ,"News&nbsp;sites&nbsp;&nbsp;","show-menu=news",,"",1
    ,"Webmaster&nbsp;&nbsp;","show-menu=webmaster",,"",1
    ,"Downloads&nbsp;&nbsp;","show-menu=downloads",,"",1
    ,"Search&nbsp;&nbsp;","show-menu=search",,"",1
    ,"Other&nbsp;&nbsp;","show-menu=other",,"",1
    ])
    
    	addmenu(menu=["news",
    	,,120,1,"",style1,,"left",effect,,,,,,,,,,,,
    	,"General","show-menu=generalnews",,,1
    	,"Technology","show-menu=technonews",,,1
    	])
    	
    	
    		addmenu(menu=["generalnews",
    		,,170,1,"",style1,,"left",effect,,,,,,,,,,,,
    		,"CNN","http://www.cnn.com",,,0
    		,"MSNBC","http://www.msnbc.com",,,0
    		,"ABC News","http://www.abcnews.com",,,0
    		,"Vancouver Local News","show-menu=canadanews",,,0
    		,"BBC News","http://news.bbc.co.uk",,,0
    		])
    
    			addmenu(menu=["canadanews",
    			,,120,1,"",style1,,"left",effect,,,,,,,,,,,,
    			,"CTV News","http://www.ctvnews.com",,,
    			,"Vancouver Sun","http://www.canada.com/vancouver/vancouversun/",,,
    			])
    		
    		addmenu(menu=["technonews",
    		,,110,1,"",style1,,"left",effect,,,,,,,,,,,,
    		,"TechWeb","http://www.cnn.com",,,0
    		,"News.com","http://www.news.com",,,0
    		,"Wired News","http://www.wired.com",,,0
    		,"Slashdot","http://www.slashdot.com",,,0		
    		])
    
    
    
    	addmenu(menu=["webmaster",
    	,,170,1,"",style1,,"left",effect,,,,,,,,,,,,
    	,"<img src=newsimage.gif border=0>&nbsp;Dynamic Drive","http://www.dynamicdrive.com",,,1
    	,"<img src=newsimage.gif border=0>&nbsp;JavaScript Kit","http://www.javascriptkit.com",,,1
    	,"<img src=newsimage.gif border=0>&nbsp;Freewarejava.Com","http://www.freewarejava.com",,,1
    	,"<img src=newsimage.gif border=0>&nbsp;Active-X.com","http://www.active-x.com",,,1
    	,"<img src=newsimage.gif border=0>&nbsp;Web Monkey","http://www.webmonkey.com",,,1
    	,"<img src=newsimage.gif border=0>&nbsp;Jars","http://www.jars.com",,,1
    	])
    	
    	addmenu(menu=["downloads",,,120,1,,style1,0,"left",effect,0,,,,,,,,,,,
    	,"Download.com","http://www.download.com",,,1
    	,"Tucows","http://www.tucows.com",,,1
    	])
    	
    	addmenu(menu=["search",
    	,,140,1,"",style1,,"",effect,,,,,,,,,,,,
    	,"<img src=google_icon.gif border=0>&nbsp;Google.com", "http://www.google.com",,,1
    	,"<img src=yahoo_icon.gif border=0>&nbsp;Yahoo", "http://www.yahoo.com",,,1
    	,"<img src=av_icon.gif border=0>&nbsp;Altavista", "http://altavista.com",,,1
    	,"<img src=excite.gif border=0>&nbsp;Excite", "http://www.excite.com",,,1
    	])
    	
    	addmenu(menu=["Other",,,140,1,,style1,0,"left","randomdissolve(duration=0.5);Shadow(color='#999999', Direction=135, Strength=5)",0,,,,,,,,,,,
    	,"Menu Authors Site","http://www.milonic.co.uk/menu",,"Milonic DHTML Menu Site",1
    	])
    	
    
    dumpmenus()
    Those red numbers are the numbers you have to alter. They represent the distance, in pixels between the menu and the top and left margin of the page respectvely.

    You can simply copy/paste from here into your *.js file (replace everything is inside there).

    Hope I was clear this time.
    ... And less rude (well, If you say so...)
    Claudiu Iacob - Romania


  •  

    Posting Permissions

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