Javascript +CSS横向三级导航菜单

css|javascript|菜单|导航

<!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>
body {
  margin: 7px;
  font:12px Verdana, Arial, Helvetica, sans-serif;
}
* {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: thin none;
}
#nav {
  position: absolute;
  font-size: 9px;
  opacity: 0.8;
}
#nav a {
  display: block;
  width: 100px;
  height: 15px;
  padding: 3px 5px 12px;
  background: #666;
  color: #fff;
  text-decoration: none;
}
#nav a:hover {
  background: #333;
}
#nav li {
  width: 120px;
  height:30px;
  overflow:hidden;
  background: #ccc;
  padding-bottom: 3px;
}
#nav ul {
  position: absolute;
  margin-left: 110px;
  margin-top: -30px;
}
html>body #nav ul {
  margin-left: 119px;
  margin-top: -39px;
}
#nav ul {
  display: none;
}
#nav li.show ul {
  display: block;
}
#nav li.show li ul {
  display: none;
}
#nav li li.show ul {
  display: block;
}
</style>
<script language="javascript" type="text/javascript">
function menuFix() {
  var sfEls = document.getElementById("nav").getElementsByTagName("li");
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
      this.className+=(this.className.length>0? " ": "") + "show";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
    }
  }
}
window.onload=menuFix;
</script>
</head>

<body>
<ul id="nav">
  <li><a href="#">nav item</a>.
    <ul>
      <li><a href="#">nav item</a>.
        <ul>
          <li><a href="#">nav item</a>.</li>
          <li><a href="#">nav item</a>.</li>
        </ul>
      </li>
      <li><a href="#">nav item</a>.
        <ul>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
        </ul>
      </li>
      <li><a href="#">nav item</a>.
        <ul>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
        </ul>
      </li>
      <li><a href="#">nav item</a>.
        <ul>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
          <li><a href="#">nav item</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">nav item</a>.
    <ul>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
    </ul>
  </li>
  <li><a href="#">nav item</a>.
    <ul>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
      <li><a href="#">nav item</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

<!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>body { margin: 7px; font:12px Verdana, Arial, Helvetica, sans-serif;}* { list-style-type: none; margin: 0px; padding: 0px; border: thin none;}#nav { position: absolute; font-size: 9px; opacity: 0.8;}#nav a { display: block; width: 100px; height: 15px; padding: 3px 5px 12px; background: #666; color: #fff; text-decoration: none;}#nav a:hover { background: #333;}#nav li { width: 120px; height:30px; overflow:hidden; background: #ccc; padding-bottom: 3px;}#nav ul { position: absolute; margin-left: 110px; margin-top: -30px;}html>body #nav ul { margin-left: 119px; margin-top: -39px;}#nav ul { display: none;}#nav li.show ul { display: block;}#nav li.show li ul { display: none;}#nav li li.show ul { display: block;}</style><script language="javascript" type="text/javascript">function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "show"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)show\\b"), ""); } }}window.onload=menuFix;</script></head><body><ul id="nav"> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a>.</li> <li><a href="#">nav item</a>.</li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li></ul></body></html>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

时间： 2024-08-21 17:07:54

Javascript +CSS横向三级导航菜单的相关文章

纯CSS横向二级导航菜单代码

提示:您可以先修改部分代码再运行 纯CSS横向二级导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

js 二级横向滑动导航菜单效果代码

提示:您可以先修改部分代码再运行 js 二级横向滑动导航菜单效果代码 网站首页 JS代码 电子商务 免费模板 建站技巧 CSS技巧 CSS导航菜单 网络营销 SEO优化 免费模板-网页模板下载 网站公告:免费模板征集友情链接 免费模板 免费模板 免费模板 免费模板 免费模板 网页特效 免费模板 免费模板 网络营销 网络营销 网络营销 网络营销 网络营销 网页特效 免费模板 网页特效 网络营销 网络营销 免费模板 服务器租用首页 网络营销 网络营销 超级机房 免费模板 免费模板 免费模板 免费模板

纯css+div经典导航菜单代码

提示:您可以先修改部分代码再运行 纯css+div经典导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

JavaScript脚本制作二级导航菜单

网页特效脚本制作二级导航菜单      相信对于二级导航菜单大部分朋友都不会陌生,因为大部分网站都有用到.但是二级导航菜单是如何实现的,我想大部分朋友还和zero一样一头雾水.不过没关系通过下面的实例,你和我都能解决这个问题.      2.1.在网页中适当的位置添加一个一级菜单,本例中的一级导航菜单是由一系列空的超级链接组成,这些空的超级链接执行的操作是调用自定义的javascript函数lmenu()显示对应的二级菜单,在调用时需要传递一个标记,即主菜单项的参数.      2.2.在网页中

如何用CSS制作纵向导航菜单？

应用Web标准进行网页制作以后,我们通常用ul无序列表标签来构建菜单.我们以前讨论过很多横向菜单的制作,在前面的文章中,我们讲述了<用"ul+li"及css制作韩国风格菜单>,是一种纵向的导航菜单.我们今天来看另一种纵向导航菜单,我们不断的总结经验.提高编码水平,才能在实际操作中更加的得心应手. 我们看下面的XHTML代码:  代码如下 复制代码 <ul><span>www.111cn.net</span>  <li><

javascript 省份城市地区三级联动菜单

网页特效 省份城市地区三级联动菜单 <select id="user_shen" name="user_shen" tabindex="10" onchange="changeprovince();" alt="省份:无内容"  >  <option value="0">请选择省份</option>  <option value="北京

CSS三级导航菜单(兼容各种浏览器)

话费服务 话费查询 实时话费查询 话费余额查询 月账单查询 月详单查询 缴费历史查询 资费优选推荐 定制话费信息 定制短信账单 话费余额短信提醒 定制Email账单 网上交费 网上缴费 充值卡缴费 业务办理 日常业务办理 来电显示 呼叫等待 呼叫转移 三方通话 来电提醒 呼叫保持 呼叫转移设置 主叫隐藏 彩铃 国内漫游 短信回执 12580综合信息 关爱一线通 数据业务 手机上网 GPRS 飞信 手机报 无线音乐俱乐部 手机邮箱 号簿管家 WLAN业务 彩乐短信 手机报停/报开 手机报停 手机复

Div CSS制作的仿中国移动会员中心 竖向三级导航菜单

网站首页 站长特效 实时话费查询 话费余额查询 月账单查询 月详单查询 缴费历史查询 资费优选推荐 网页特效 定制短信账单 话费余额短信提醒 定制Email账单 广告代码 网上缴费 充值卡缴费 业务办理 日常业务办理 来电显示 呼叫等待 呼叫转移 三方通话 来电提醒 呼叫保持 呼叫转移设置 主叫隐藏 彩铃 国内漫游 短信回执 12580综合信息 关爱一线通 数据业务 手机主题 GPRS 飞信 手机报 无线音乐俱乐部 手机邮箱 号簿管家 WLAN业务 彩乐短信 手机报停/报开 手机报停 手机复机

纯CSS打造的导航菜单(附jquery版)_jquery

方式一:直接编写代码实现 效果如下: 代码如下: 复制代码 代码如下: <html> <head> <title>无需表格的菜单</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ m