JavaScript+CSS+DIV实现下拉菜单

最新推荐文章于 2022-08-11 20:11:04 发布

i_belive_my_love

最新推荐文章于 2022-08-11 20:11:04 发布

阅读量982

点赞数

分类专栏： javaweb 文章标签： java web

本文链接：https://blog.csdn.net/i_belive_my_love/article/details/78046226

版权

javaweb 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

1.层标签<div> :

<div>(division)是块级元素，可以包含段落，标题，表格，乃至诸如章节，摘要和备注等。由于是块级元素，在段落开始，结束出会插入一个换行。

基本语法：

语法说明：

1.position 属性主要是定义层的定义方式。

2.left和top 是用来定义层的位置，表示与其他对象的左部，顶部的相对位置。

3.width和height 用来定义层的宽度和高度

4.float 是层的浮动属性，用来设置层的浮动位置

5.clear 是层的清除属性，表示是否允许在某个元素的周围有浮动元素，它和浮动属性是一对相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素。

6.z-index 主要是设置区域的上下层关系，利用此属性设置可以让区域更多层次的效果，相当于三维空间的z坐标，其值越大，区域在堆栈中的位置越高

分析：网页下拉菜单的设计实际上就是菜单项的显示与隐藏，当鼠标移到某菜单时其下的菜单项就显示，当鼠标离开菜单及其子菜单项，其子菜单项就隐藏，需要使用JavaScript设计鼠标事件函数。使用DIV标记，确定每个菜单的位置。

设计：（鼠标事件函数）

1.当鼠标移动到菜单选项时显示对应的DIV：function show(menu)。

2.当鼠标移出时隐藏所有的DIV：function hide()。

3.设计3个DIV，每个DIV对应一个菜单项及其对应的子菜单项，3个菜单项对应的DIV的id分别为menu1，menu2,menu3。

代码：

jscssdiv.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>下拉菜单示例</title>
	<script language="javaScript">
    function show(menu)  //当鼠标移动到菜单选项时显示对用的DIV
    {document.getElementById(menu).style.visibility="visible";}
    function hide()     //当鼠标离开菜单选项时隐藏对应的DIV
    {    
    document.getElementById("menu1").style.visibility="hidden";
    document.getElementById("menu2").style.visibility="hidden";
    document.getElementById("menu3").style.visibility="hidden";
    }
    </script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <body>
   <table align="center">
  <tr bgcolor="#9999FF" align="center">
  <td width="120" onMouseMove="show('menu1')" onMouseOut="hide()">系列课程</td>
  <td width="120" onMouseMove="show('menu2')" onMouseOut="hide()">教学课件</td>
  <td width="120" onMouseMove="show('menu3')" onMouseOut="hide()">课程大纲</td>
  </tr>
  </table>
  <div id="menu1" onMouseMove="show('menu1')" onMouseOut="hide()"
    style="background:#9999FF;position:absolute;left:220;top:38;width:120;visibility:hidden">
    <span>c++程序设计</span><br>
    <span>java程序设计</span><br>
    <span>c#程序设计</span><br>
  </div>
  <div id="menu2" onMouseMove="show('menu2')" onMouseOut="hide()"
   style="background:#9999FF;position:absolute;left:345;top:38;width:120;visibility:hidden">
   <span>c++课件</span><br>
   <span>java课件</span><br>
   <span>c#课件</span><br>
  </div>
  <div id="menu3" onMouseMove="show('menu3')" onMouseOut="hide()"
   style="background:#9999FF;position:absolute;left:470;top:38;width:120;visibility:hidden">
   <span>c++教学大纲</span><br>
   <span>java教学大纲</span><br>
   <span>c#教学大纲</span><br>
  </div>
  </body>
</html>

i_belive_my_love

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript+CSS+DIV实现下拉菜单

1.层标签 :(division)是块级元素，可以包含段落，标题，表格，乃至诸如章节，摘要和备注等。由于是块级元素，在段落开始，结束出会插入一个换行。基本语法：语法说明：1.position 属性主要是定义层的定义方式。2.left和top 是用来定义层的位置，表示与其他对象的左部，顶部的相对位置。3.width和height 用来定义层的宽度和高度4.float
复制链接

扫一扫