From Left, 60 pixels.
From Top, 20 pixels.
From Left, 200 pixels.
From Top, 20 pixels.
From Left, 380 pixels.
From Top, 20 pixels
|This Brings Menu One| | |This Brings Menu Two| | |This Brings Menu Three| |
The layer placement should (obviously) be set close to the area of mouseOver. |
||
You don't want to call a menu here (menu 4)... |
![]() |
|
The
drop menus are regular layers, and follow all the layer rules. Note: If you remove a layer, remove the reference to it at the top of the HEAD section, and any code that brings it up. Otherwise you'll get errors. |
||
Get the Codes: | Form Fields | Zipfile (3.6K) |
Below is a code different from the one you see working here.
It features four straight, grey menus as seen on autorepaircd.com.
Both are available through the links above. You can use what follows here as a reference.
|
This script will create four drop-down menus near the top of your page. It places hidden layers on the page, that are activated with a mouseover. The layers use these styles, so keep them in your page until you've played around with it and know which styles you can discard (there are a couple of extra styles). There are instructions and everything is color coded and/or bolded for clarity. |
<HEAD>.... <STYLE TYPE="text/css"><!-- --></STYLE> //browser check
function f7_showdrop(thelayer){ function f7_showit(thelayer){
f7_keep=-1 function f7_hideall(){ //deal with cursor
over layer function f7_getmousepos(e){ function f7_checkmousepos(i){ //browser stylesheets if(f7_ie){ </script> |
<BODY bgcolor="#FFFFFF" text="#000000" leftmargin="5" topmargin="5" marginwidth="0" marginheight="0"> This section is where the layers are defined. The "showdrop" functions are necessary for the layer to keep itself visible while the mouse is over it. It's default view is hidden. The values in blue set the layer position from top and left, and the length. Change these values to put the layer where you want it. The height of the layers adjust to the text. <div id="drop1" class="dropdown" style="left: 116px; top: 32px; width: 175px" onMouseOver="f7_showdrop(0)" onMouseOut="f7_hidedrop()"> <p>• <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> </div> <div id="drop2" class="dropdown" style="left: 222px; top: 32px; width: 165px; onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()"> <p>• <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text!</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a></p> </div> <div id="drop3" class="dropdown" style="left: 340px; top: 32px; width: 170px; onMouseOver="f7_showdrop(2)" onMouseOut="f7_hidedrop()"> <p>• <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a></p> </div> <div id="drop4" class="dropdown" style="left: 426px; top: 32px; width: 152px" onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()"> <p>• <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a><br> • <a href="yourlink.htm" class="dropitem">Link Text</a></p> </div> |
Below
is the code you use to actually call this mess up. onMouseOver="f7_showdrop(0)" onMouseOut="f7_hidedrop()"> onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()"> onMouseOver="f7_showdrop(2)" onMouseOut="f7_hidedrop()"> onMouseOver="f7_showdrop(3)" onMouseOut="f7_hidedrop()"> Note:
Versions of Netscape before 6 will NOT do mouseOvers on images! The mouseOvers
above were image map areas. If you want to play it safe and you're using
an image to bring the menus on hover, put the image (or text or anything)
in a table cell and give the table cell the mouseover action. e.g: |
Press H for TWebMan Home | P for PerlScripts | M for MySQL | A or C for Autorepaircd.Com