鼠标点击的下拉菜单！

最新推荐文章于 2024-03-17 20:14:27 发布
最新推荐文章于 2024-03-17 20:14:27 发布
阅读量1.4k 收藏 1
点赞数
文章标签： menu border table class xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onsrs/article/details/1409458
版权

<%
'  下拉菜单 ，更改数字即可
' id=menuTitle1
' onClick="showsubmenu(1)"
' id='submenu1'
%>
<SCRIPT language=javascript1.2>
function showsubmenu(sid)
{
whichEl = eval("submenu" + sid);
if (whichEl.style.display == "none")
{
eval("submenu" + sid + ".style.display='';");
}
else
{
eval("submenu" + sid + ".style.display='none';");
}
}
</SCRIPT>
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE2 {font-size: 9pt}
-->
</style>
</head>

<body>
<table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height=25 align="center" background="Images/Admin_left_1.gif" class=menu_title id=menuTitle1 style="cursor:hand;" onClick="showsubmenu(1)" οnmοuseοver=this.className='menu_title2'; οnmοuseοut=this.className='menu_title';> <span class="STYLE2">网站信息管理</span> </td>
  </tr>
  <tr>
    <td bgcolor="#E7E7E7" id='submenu1' style="display:"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="25" align="center">1</td>
      </tr>
      <tr>
        <td height="25" align="center">2</td>
      </tr>
      <tr>
        <td height="25" align="center">3</td>
      </tr>
      <tr>
        <td height="25" align="center">4</td>
      </tr>
      <tr>
        <td height="25" align="center">5</td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="25" align="center" background="Images/Admin_left_1.gif" class="menu_title" id="menuTitle2" style="cursor:hand;" onClick="showsubmenu(2)" onMouseOver="this.className='menu_title2';" onMouseOut="this.className='menu_title';"><span class="STYLE2">网站信息管理</span> </td>
  </tr>
  <tr>
    <td bgcolor="#E7E7E7" id='submenu2' style="display:"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="25" align="center">1</td>
      </tr>
      <tr>
        <td height="25" align="center">2</td>
      </tr>
      <tr>
        <td height="25" align="center">3</td>
      </tr>
      <tr>
        <td height="25" align="center">4</td>
      </tr>
      <tr>
        <td height="25" align="center">5</td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="25" align="center" background="Images/Admin_left_1.gif" class="menu_title" id="menuTitle3" style="cursor:hand;" onClick="showsubmenu(3)" onMouseOver="this.className='menu_title2';" onMouseOut="this.className='menu_title';"><span class="STYLE2">网站信息管理</span> </td>
  </tr>
  <tr>
    <td bgcolor="#E7E7E7" id='submenu3' style="display:"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="25" align="center">1</td>
      </tr>
      <tr>
        <td height="25" align="center">2</td>
      </tr>
      <tr>
        <td height="25" align="center">3</td>
      </tr>
      <tr>
        <td height="25" align="center">4</td>
      </tr>
      <tr>
        <td height="25" align="center">5</td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="25" align="center" background="Images/Admin_left_1.gif" class="menu_title" id="menuTitle4" style="cursor:hand;" onClick="showsubmenu(4)" onMouseOver="this.className='menu_title2';" onMouseOut="this.className='menu_title';"><span class="STYLE2">网站信息管理</span> </td>
  </tr>
  <tr>
    <td bgcolor="#E7E7E7" id='submenu4' style="display:"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="25" align="center">1</td>
      </tr>
      <tr>
        <td height="25" align="center">2</td>
      </tr>
      <tr>
        <td height="25" align="center">3</td>
      </tr>
      <tr>
        <td height="25" align="center">4</td>
      </tr>
      <tr>
        <td height="25" align="center">5</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html> 

onsrs
关注
鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单
weixin_31290291的博客
06-04 1925
使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个J...
鼠标点击弹出下拉菜单的js
02-23
鼠标移动上，弹出自制下拉菜单样式，可以自由改变下拉菜单样式，一个非常好用的实例！
纯CSS实现的多级下拉鼠标点击显示导航菜单代码
12-11
纯CSS实现的多级下拉鼠标点击显示导航菜单代码，想学css导航的可以下载看看！挺好的！
点击下拉显示
ITdada的专栏
12-14 941
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 点击下拉显示 p, ul, li { padding: 0; margin: 0; list-style: none; } #box { font-size: 12px; color: #00c
jquery点击经过显示下拉菜单
02-15
jquery制作的鼠标经过或者点击显示下拉菜单
jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表
11-19
jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
11-28
在默认情况下，当用户点击带有下拉菜单的导航项时，Bootstrap的JavaScript插件会处理该事件，仅展示下拉菜单而忽略链接的跳转行为。这可能不满足某些场景的需求，例如，希望在保持下拉菜单功能的同时，导航链接也能...
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
09-02
在本篇中，我们将深入探讨如何实现Bootstrap导航条在点击和鼠标悬停时显示下拉菜单。 默认情况下，Bootstrap的下拉菜单在鼠标悬停时不会立即显示，而是需要用户点击相应的导航项。这可能并不符合所有设计需求，尤其...
jQuery鼠标点击下拉显示信息代码
04-07
5. **导航菜单结构**：通常，下拉菜单基于HTML的`<ul>`和`<li>`元素构建，配合CSS样式，形成层次分明的导航结构。点击父级`<li>`元素，其子级`<ul>`会下拉显示。 6. **图标导航**：结合图标库（如Font Awesome）...
jquery鼠标悬停滑动下拉导航菜单效果.zip
07-11
这在创建下拉菜单时尤为重要，因为我们需要在鼠标悬停时显示下拉菜单，而在鼠标离开时隐藏它。 3. **CSS操作（CSS Manipulation）**：jQuery可以方便地改变元素的样式，如`$(element).css("property", "value")`...
点击Button弹出下拉菜单
09-10
点击一个按钮，弹出一个可选择的下拉菜单，效果不错，很实用
点击按钮出现下拉列表
03-26
点击按钮出现下拉列表 本例博客可以看效果： http://blog.csdn.net/qqmcy/article/details/22160153
点击下拉菜单的特效
04-02
该源码实现了点击下拉菜单的特效，当我们点击列表上的某一个单元时，下拉就会出现更多的单元视图等，是一款很不错的下拉菜单的效果，大家可以使用一些吧。
点击当前下拉框，然后下拉
weixin_38655115的博客
10-29 78
两步到位
点击下拉，全选框，点击改变
qq_62898618的博客
03-07 251
点击下拉 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; list-style: none; } body { font-size: 12px.
原生JS实现点击下拉菜单
waiwai1010的博客
09-15 4756
接上一篇博文，这里实现点击下拉菜单。 与悬停不同的是，悬停的操作都是hover，直接写入CSS即可，这里需要将静态和动态样式分离，再JS添加点击事件，使用排他法绑定给目标元素特定的样式。 具体实现见下，其中需要注意的地方包括。 添加点击事件注意添加到父盒子section上，点击section，head和menu都会产生动态的样式变化（其实head可以添加点击事件来改变head的样式，但是head的点击事件无法改变menu的样式，所以这里统一选择绑定点击事件给父盒子section）。 其中sectio
js 实现点击下拉滚动
qq_33240556的博客
03-12 543
在JavaScript中实现点击下拉菜单后滚动到特定位置，通常用于导航栏的下拉菜单或对话框内容的自动滚动等场景。请注意，这只是一个基本的示例，实际应用中可能还需要考虑更多的边界条件和兼容性问题。如果下拉菜单的高度有限且内容可以滚动，则该元素会被滚动到视口内。这个示例将在点击按钮后显示下拉菜单，并将其滚动条定位到。
html点击按钮出现下拉框
最新发布
qq_62143596的博客
03-17 835
元素来创建下拉框，但这种方法比较low。在HTML中，要实现点击按钮出现下拉框，可以使用。
jquery 动态向下拉列表填充数据，点击下拉列表时传值并触发事件
热门推荐
Java海洋
01-19 1万+
<br />1.这里只写出关键的jquery代码，其他的就很少了，就是页面上一点，大家一看就明白；<br />2.加载页面时，动态从数据库获取数据加载到下拉列表中<br />    function selGroups(groups){<br />     var st=$("#gp");<br />     $("#gp").find("option").each(function(){<br />             $(this).remove();<br />     });<br />
html鼠标经过下拉菜单
06-09
要实现鼠标经过下拉菜单的效果，可以使用HTML和CSS实现。具体步骤如下： 1. 在HTML中创建一个下拉菜单，并将其隐藏起来。 ```html <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜单项1</a> <a href="#">菜单项2</a> <a href="#">菜单项3</a> </div> </div> ``` 2. 使用CSS设置下拉菜单的样式，包括菜单按钮和菜单项的样式，并将下拉菜单设为隐藏状态。 ```css .dropdown { position: relative; display: inline-block; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } ``` 3. 当鼠标移动到下拉菜单上时，使用CSS的:hover伪类选择器将下拉菜单设为显示状态。 ```css .dropdown:hover .dropdown-content { display: block; } ``` 这样，当鼠标移动到下拉菜单上时，就会显示出下拉菜单中的菜单项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值