This is a very simple menu. Although simple, we can learn some relevant knowledge about CSS and JavaScripts from this example, which is of great benefit in understanding the principles and basics of making drop-down menus. In this example, I used a DIV tag as my drop-down menu column, and a TABLE as my menu header. The principle is to switch the display attributes of the drop-down menu column by identifying mouse movements.
The following is the effect of this DIV menu. You can click any blank space on the page to cancel the display of the drop-down menu.
Magazine technology site portal site personal collection site
Yesky.com
Computer dealer information
trendy electronics
Sina
Sohu Sohu
Netease Netease
Mouse Network Programming Station
Chinese classmate record
Well,
China Software Development Network
, if I told you that such an effect would only take dozens of lines of code, would you believe it?Anyway, let's learn how to make this menu step by step. Step-by-Step, Let's go.
The first step is to define the CSS cascading style sheets for menu items and menu columns. Here, if you don’t know what CSS means, please refer to the tutorial on CSS in "Computer News Website". We define two CSS Classes, one is Meun and the other is SubMenu. Menu defines the style displayed on the top of the menu, and Submenu defines the display style of the drop-down menu column. Here, what needs to be noted is the "position:absolute;width:200" CSS attribute in the Submenu. This is necessary because it determines the position where we display the Submenu. Other CSS properties are optional. The following is the description of these two CSS Classes. You can put the following paragraph between the <head></head> or <body></body> of the website.
<STYLE>
<!--
.menu {background-color:green;width:120; height:20;color: white; text-align: center;font-size:9pt;font-weight:bolder}
.submenu {position:absolute;top:40;background-color:lightyellow;width:180; font-size:9pt}
-->
</STYLE>
In the second step, let's take a look at the Javascript code for hiding and showing drop-down menu columns. This code is very simple and should be easy to understand for anyone who has learned a little bit of JavaScripts. If you don't understand Javascript, please also refer to the articles about JavaScripts on the "Computer News Website". The meaning of this code is that whenever the mouse enters the menu element (Menu), its drop-down menu column will be displayed by a function called Show. The main function of this Show function is to display the current drop-down menu column, hide other menu columns, and put the currently displayed menu item into the variable cm. In addition, here, I also added a simple mouse click event (onclick) handler. When the mouse clicks on the web page, all drop-down menu columns will be hidden. Below, I give the entire Javascript program, which includes a function called getPos, which is used to obtain the display position of the drop-down menu column.
<SCRIPT>
varcm=null;
document.onclick = new Function("show(null)")
function getPos(el,sProp)
{var iPos = 0
while (el!=null)
{iPos+=el["offset" + sProp]
el = el.offsetParent}
return iPos}
function show(el,m)
{if (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"Left")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='none' cm=m }
</SCRIPT>