非脚本式下拉菜单[

最新推荐文章于 2022-04-24 15:35:38 发布
最新推荐文章于 2022-04-24 15:35:38 发布
阅读量604 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： 脚本 menu table border url class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ytbada/article/details/1563670
版权
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>颠覆传统观念---非脚本式下拉菜单[符合W3C标准,全兼容]--来自【心动】</title>
<style>
.xd_menu {
      position:relative;
      background:#fff;
      color:#666;
      text-decoration:none;
      font-size:12px;
      width:200px;
      text-align:center;
      border:1px solid #ccc;
      height:30px;
      line-height:25px;
      z-index: 10;
      display: block;
      float: left;
      margin-left: 2px;
}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.xd_menu:hover {background:#eee;color:#333;}
.xd_menu span{display: none; }/*设置正常下的span为隐藏状态*/
.xd_menu:hover span{
      display:block;
      position:absolute;
      top:29px;
      left:-1px;
      width:130px;
      background:#eee;
      color:#000;
      text-align:left;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-right-color: #CCCCCC;
      border-bottom-color: #CCCCCC;
      border-left-color: #CCCCCC;
      font-size: 12px;
      text-decoration: none;
}/*设置hover下的span属性为呈现状态,并设置提示层的位置*/
table a {
      color: #0066CC;
      color:#0066CC;
      text-align: center;
      vertical-align: middle;
      height: 20;
      width: 100%;
      text-decoration: none;
      text-decoration: none;
      font-size: 12px;
      display: block;
}
table a:visited {
      text-decoration: none;
      color: #009900;
      width: 100%;
}
table a:hover {
      text-decoration: underline;
      color: #FFFFFF;
      background-color: #0066CC;
      text-align: center;
      width: 100%;
}
table a:active {
      text-decoration: none;
      color: #999999;
}
table {      width: 100%;}
.xd_menu #table{display: none; }
.xd_menu:hover #table{
      display:block;
      position:absolute;
      top:25px;
      left:-1px;
      width:130px;
      background:#eee;
      color:#000;
      text-align:left;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-right-color: #CCCCCC;
      border-bottom-color: #CCCCCC;
      border-left-color: #CCCCCC;
      font-size: 12px;
      text-decoration: none;
}
</style></head>
<body>
<a class="xd_menu" href="http://www.tcmt.cn">心动菜单一<span>
<table border="0" cellpadding="0" cellspacing="0" >
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn1[/url]</a></td></tr>
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn1[/url]</a></td></tr>
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn1[/url]</a></td></tr></table></span>
</a>
<a class="xd_menu" href="http://www.tcmt.cn">心动菜单二<span>
<table border="0" cellpadding="0" cellspacing="0" >
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn2[/url]</a></td></tr>
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn2[/url]</a></td></tr>
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn2[/url]</a></td></tr></table></span>
</a>
<a class="xd_menu" href="http://www.tcmt.cn">心动菜单三<span>
<table border="0" cellpadding="0" cellspacing="0" >
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn3[/url]</a></td></tr>
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn3[/url]</a></td></tr>
<tr><td><a href="http://www.tcmt.cn">[url]www.tcmt.cn3[/url]</a></td></tr></table></span>
</a>
</body>
</html> 
ytbada
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用简单的脚本实现一款漂亮的下拉菜单
01-19
一次偶然而无聊的实验，发现了这样的写下拉菜单的方式。完成作品后的愉悦心情，就像阿基米德泡浴缸却发现了浮力原理！ NAME:Stupid CAT Pull-down Menu v1.0 SUPPORT:Ie(√) Firefox(√) STANDARD:XHTML 1.0...
html js点击下拉菜单代码,JavaScript下拉菜单功能实例代码
weixin_29973493的博客
06-03 1664
本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：下拉菜单body,ul,li {margin: 0;padding: 0;font-size: 13px;}ul,li {list-style: none;}#divselect {width: 186px;margin: 80px auto;position: relative;z-index: 10000;}#divsele...
响应式下拉菜单栏_建立响应式下拉菜单的6个最佳实践
Web design 教程小屋
07-09 1935
创建响应式下拉菜单是一项棘手的任务。 在设计和开发阶段，您必须做出许多决定。 推荐的解决方案通常取决于您正在构建的网站或应用程序的特征。 但是，对于所有类型的响应下拉菜单，也推荐一些常规最佳实践。 1.使用移动优先设计 问题 尽管先为台式机屏幕设计菜单然后将其适应较小的视口似乎比较容易，但通常情况并非如此，尤其是在菜单具有下拉菜单的情况下。 如果您首先设计用于台式机的菜单，它可能会...
html css下拉菜单居中,css如何设置下拉菜单？
weixin_39900023的博客
06-03 2167
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。使用css设置下拉...
JavaScript实现下拉菜单
qq_54198615的博客
04-24 2980
样式有些丑陋，各位看官看看就好 下面是代码部分 HTML <ul class="nav"> <li> <h4>水果</h4> <ul class="item"> <li>香蕉</li> <li>苹果</li> <li..
java月份下拉菜单_实现一个日期下拉菜单
weixin_35935712的博客
02-13 1032
这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理，实例是实现一个日期选择下拉菜单。本文调试环境为IE6/firefox1.5。首先来分析一下日期下拉菜单的需求。建议大家在写任何程序的时候都应该在动手编程之前想清楚自己需要些什么，这样编程才有效率。年份： 一般来说有一个有效年份，比如说1900年至当前年份才是为效的，这个要根据实际需求来确定，如果是该下拉菜单是用来选择出生年月...
JavaScript实现下拉菜单的显示和隐藏
11-26
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 ...
wincc 下拉菜单制作
06-27
wincc 下拉菜单，代码实现下拉菜单的制作
jquery实现二级导航下拉菜单效果实例
11-29
前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){…})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素...
Bootstrap布局组件教程之Bootstrap下拉菜单
11-24
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。 如需使用下列菜单，只需要在 class .dropdown ...
如何点击按钮弹出新窗口，输入数据后返回并刷新页面？
YTFUNLOVE的BLOG
01-06 5328
AutoEventWireup="false" Codebehind="WebForm1.aspx.vb"Inherits="ShowModalDialog.WebForm1" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&g
模仿某招聘网站下拉菜单-最新出炉
YTFUNLOVE的BLOG
04-13 3885
//----------------------------// 功能搜索选择框// 作者:Joshua// Email:JoshuaChen[at]126.com// webSite:www.xcopy.cn//------------------------------//省var Data_Area_Province = new Array("安徽","北京","福建","甘肃","广东",
用WebService获取服务端硬件信息和客户端IP,MAC,浏览器信息，所在城市- -
YTFUNLOVE的BLOG
01-04 2742
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Diagnostics;using System.Web;using System.Web.Services;using System.Web.UI;using System.Web.UI.WebContr
java script调用Web Service，
YTFUNLOVE的BLOG
04-17 2207
急要，在线等！jiezhi(風依舊) 于 2004-11-12 14:18:25http://msdn.microsoft.com/library/default.asp?url=/workshop/author/webservice/overview.asphttp://www.codeproject.com/cs/webservices/webservicecallback.asp?targe
文本域里字体颜色问题
YTFUNLOVE的BLOG
04-13 1918
IECN.NET :: 专注Web技术 体验开发乐趣 ttt.appendChild(document.createTextNode("aaaaaaaa"));var bbb = document.createElement("font");bbb.style.color="#ff0000";bbb.style.backgroundColor="#ffff00";bbb.appendChi
刷新不变化的树形菜单
YTFUNLOVE的BLOG
04-13 1366
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">刷新不变化树形菜单 - 未寺客JSbody,td,th {font-size: 14px;}.leftmenu1 {font-weight: bold; cursor: hand; padding-top: 4px; heig
XMLHTTP+javascript+Asp写得聊天室，无刷新实现
YTFUNLOVE的BLOG
01-05 1324
XMLHTTP+javascript+Asp写得聊天室，无刷新实现<!--作者 -->作者:佚名 来源：不详 发表时间：2006-10-19 22:07:57    使用XML.而无须不断刷新*.ASP.无刷新实现发言的逐条显示.使用Application变量存储http://www.qhtx.net/edu/soft/chat/>
记录滚动条位置
YTFUNLOVE的BLOG
03-28 1210
记录滚动条位置      function SetCookie(sName, sValue) {  date = new Date();  s = date.getDate();  date.setDate(s+1);   //expire time is one month late!, and cant be current date!  document.cookie = sName
获取当前系统字体
YTFUNLOVE的BLOG
03-28 1203
 宝玉 2004-2-26[url]http://www.webuc.net[/url][url]http://www.nwpubbs.net[/url]--> 获取当前系统字体和排版样式 function getSystemFonts(){ var a=dlgHelper.fonts.count; var fArray = new Array(); var oDropDown = docum
autojs 下拉菜单
最新发布
10-19
Auto.js 是一款 Android 平台上的 JavaScript 自动化工具，可以用来模拟用户操作，实现自动化测试、自动化脚本等功能。下拉菜单是 Android 系统中常见的 UI 控件之一，Auto.js 也提供了相应的 API 来实现对下拉菜单的操作。 Auto.js 中可以使用 `className` 或 `text` 等属性来定位到下拉菜单控件，然后使用 `click()` 方法来模拟点击操作。例如： ```javascript var btn = className("android.widget.Button").text("下拉菜单").findOne(); btn.click(); ``` 如果下拉菜单是通过长按触发的，可以使用 `longClick()` 方法来模拟长按操作。例如： ```javascript var btn = className("android.widget.Button").text("长按下拉菜单").findOne(); btn.longClick(); ``` 另外，如果需要选择下拉菜单中的某一项，可以先通过 `click()` 方法打开下拉菜单，然后再通过相应的坐标或者滑动操作来选择对应的项。例如： ```javascript var btn = className("android.widget.Button").text("下拉菜单").findOne(); btn.click(); // 选择第二项 var item2 = className("android.widget.TextView").text("选项2").findOne(); item2.click(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值