HTML实现菜单功能

最新推荐文章于 2025-06-06 14:59:57 发布
原创 最新推荐文章于 2025-06-06 14:59:57 发布 · 1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTMLscript 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
#tabMenu a{
	background-color:#ccc;//背景颜色灰色
	text-decoration:none;//无下划线
	width:200px;
	height:30px;
	text-align:center;//文字左右居中
	line-height:30px;//文字上下居中
	border:1px solid white;//边框
	color:black;
	display:block;//block是有结构的，inline是没有结构的（无宽和高）
}
#tabMenu a:hover{
background:#F00;
color:#FFF;
}
.divMenu{
	display:none; //设置为隐藏
	z-index:9px;//设置级别为9，
	position:absolute;/设置为绝对定位
}
</style>
<script type="text/javascript" language="javascript">
function showMenu(obj){
	document.getElementById("Menu"+obj).style.display="block";
}
function hideMenu(obj){
	document.getElementById("Menu"+obj).style.display="none";
}

</script>
</head>


<body>
<table id="tabMenu" cellpadding="0" cellspacing="0" border="0">
	<tr>
    	<td><a href="#" onmouseover="showMenu(1);" onmouseout="hideMenu(1);">公司首页</a>
     	</td>
        <td><a href="#" onmouseover="showMenu(2);" onmouseout="hideMenu(2);">新闻中心</a>
     	</td>
        <td><a href="#" onmouseover="showMenu(3);" onmouseout="hideMenu(3);">产品首页</a>
     	</td>
    </tr>
    <tr>
    	<td>
        	<div id="Menu1" class="divMenu" onmousemove="showMenu(1);" onmouseout="hideMenu(1);">
            	<a href="#"/>公司首页1</a>
                <a href="#"/>公司首页1</a>
                <a href="#"/>公司首页1</a>
                <a href="#"/>公司首页1</a>
                <a href="#"/>公司首页1</a>
            </div>
        </td>
        <td>
        	<div id="Menu2" class="divMenu" onmousemove="showMenu(2);" onmouseout="hideMenu(2);">
            	<a href="#"/>产品首页1</a>
                <a href="#"/>产品首页1</a>
                <a href="#"/>产品首页1</a>
                <a href="#"/>产品首页1</a>
                <a href="#"/>产品首页1</a>
            </div>
        </td>
        <td>
        	<div id="Menu3" class="divMenu" onmousemove="showMenu(3);" onmouseout="hideMenu(3);">
            	<a href="#"/>新闻首页1</a>
                <a href="#"/>新闻首页1</a>
                <a href="#"/>新闻首页1</a>
                <a href="#"/>新闻首页1</a>
                <a href="#"/>新闻首页1</a>
            </div>
        </td>
    </tr>
    
</table>
<img src="advpic.gif"/>
</body>
</html>

吉利来
关注
html菜单栏
03-26
html菜单栏可以指定那个页面被选中
HTML中实现右键菜单功能
04-14
简单阐述了HTML中实现右键菜单的功能
JavaScript二级菜单
zhangqling的博客
09-23 2016
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;二级菜单&lt;/title&gt; &lt;style&gt; *{ margin:0; padding: 0; } .hea
多种风格导航菜单 HTML 实现（附源码）
最新发布
qq_44136882的博客
06-06 992
​​简约水平导航栏​​ - 适合大多数网站的基本导航需求​​响应式汉堡菜单​​ - 移动设备友好的响应式导航​​垂直侧边栏导航​​ - 适合管理后台或文档网站​​悬浮下划线导航​​ - 具有流畅动画效果的导航​​圆角标签式导航​​ - 适合内容分类展示​​3D立体悬浮导航​​ - 具有视觉冲击力的创意导航每种导航都包含完整的 HTML、CSS 和必要的 JavaScript 代码，您可以直接复制使用或根据需要进行修改。
HTML菜单
一生悬命
03-17 2430
#menu ul{list-style:none} #menu li {float:left; padding:10px; margin:2px; background-color:green; color:yellow; } item item item
html设置功能区菜单,html – 具有“3D”效果的功能区
weixin_35029295的博客
06-18 228
我的菜单有以下代码：Homepage1page2而CSS：.wrapper{padding:20px;background:#d3d3d3;height:200px;}.menu{background:#7F7979;}.menu li{padding-top: 20px;padding-bottom: 20px;padding-left: 15px;display: inline-block;}...
html实现好看的多种风格导航菜单(源码)
06-29
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，...
右键菜单功能实现.html
07-08
html+js+css实现 右键菜单功能
vue实现菜单切换功能
12-29
vue实现菜单切换，点击菜单导航切换不同的内容以及为当前点击的选项添加样式，或者组件。 method里：  css: html代码： 学校新闻 <div v-if=Index class=line></div> 就业新闻 <div v-if=Index ==...
以实验管理系统为例 实现了左侧菜单切换右侧内容等功能
04-07
总的来说，这个实验管理系统通过整合HTML、CSS、jQuery和Bootstrap，实现了后台管理界面的高效构建，特别是其左侧菜单与右侧内容的互动功能，为用户提供了一种直观、易用的界面体验。对于开发者而言，这样的系统设计...
vue实现带过渡效果的下拉菜单功能
10-15
在本文中，将详细介绍如何使用Vue.js框架来实现一个带有过渡动画效果的下拉菜单功能。这个功能不仅适用于Web端，还包括对移动端的适配，并且还包含了一些额外的交互效果，比如点击下拉菜单之外的区域隐藏下拉菜单。 ...
html展开式菜单
05-08
介绍几个展开式菜单制作，
html经典菜单好看又好用
05-12
菜单只是个实例，要用的话还要改进。但大多多是ctrl+c ,ctrl+v的，好看好用，随便调。。
漂亮的菜单html 菜单。
08-31
相当好用的学习资料，并且很漂亮的哦。希望大家能够多多学习
超实用漂亮精美html菜单源码
07-26
超实用漂亮精美html菜单源码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
纯html+css菜单
07-02
忍不住把这个资源分享给大家，这个菜单实现无论从美工设计还是从代码上简洁明了，纯css，适合进阶的前端童鞋学习。
Html菜单的实现
u011416146的博客
07-23 733
“http://www.w3.org/TR/html4/strict.dtd”> menu
HTML 下拉式菜单
qq_61851946的博客
01-21 9687
又是摸鱼的一周（） 如题 简单明了 html部分： <div class="topclick"> <div class="ltbox1"> <p>啊哈哈哈</p> </div> <ul class="ltbox2"> <li cl
HTML导航菜单
LDLAN
01-19 2020
1导航菜单 程序管理 版本管理 渠道管理 资源管理 上传资源 分离左右页面 #conter { width: 90%; margin: auto; } #help-left { width: 10%;
HTML5实现后台管理系统的伸缩菜单功能
文件名称列表仅包含 "HtmlDemo"，这表明压缩包中可能只包含一个文件，这可能是一个HTML文件，但也可能是包含多个文件的项目结构（如HTML文件、CSS样式表、JavaScript文件等），其中HTML文件是展示二级菜单功能的主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值