四级下拉菜单

最新推荐文章于 2020-09-16 09:33:18 发布
最新推荐文章于 2020-09-16 09:33:18 发布
阅读量768 收藏
点赞数
文章标签： class function dropdown menu xhtml url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xfxiaoyan2010/article/details/5553217
版权

<!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>
<title>炫浪网设计素材资源站-仿FLASH效果的四级下拉菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body {margin:0; font:14px "Arial"; background:#fff; padding:0;}
ul.menu {list-style:none; margin:0; padding:0; height:35px; line-height:35px;}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#666; text-decoration:none; height: 25px; line-height: 25px;}
ul.menu li {position:relative; float:left; margin-right:2px;line-height:35px;}
ul.menu ul {position:absolute; top:35px; left:0; background:#fff url('bg.gif') repeat-x; display:none;list-style:none;width:152px; }
ul.menu ul li {position:relative; border:1px solid #990000; border-bottom:none; border-top:none;width:150px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; color:#666; height:22px; font-size:12px;}/*下级菜单样式*/
ul.menu ul li a:hover { color:#fff; background:#990000;}/*下级菜单鼠标滑过样式*/
ul.menu ul ul {left:150px; top:-1px;}
ul.menu .menulink {padding:5px 7px 7px; font-weight:bold; width:140px; color:#666;}
ul.menu .menulink:hover, ul.menu .menuhover { color:#990000;}
ul.menu .sub {background:url('arrow.gif') 100% 0px no-repeat; color:#666;}/*二级带箭头样式*/
ul.menu  a.sub{background:url('arrow.gif') 100% 0px no-repeat; color:#666; font-size:12px;}/*二级带箭头样式*/
ul.menu  a.sub:hover{background:#990000 url('arrow.gif') 100% 0px no-repeat; color:#fff;}/*二级带箭头样式*/

ul.menu .topline {border-top:1px solid #990000;}
ul.menu .bottomline {border-bottom:1px solid #990000;}

</style>
<script type="text/javascript">
var menu = function(){
 var t = 15, z = 50, s = 6, a;
 function sl(c, f){
  var h = c.offsetHeight;
  if ((h <= 0 && f != 1) || (h >= c.mh && f == 1)) {
   if (f == 1) {
    c.style.filter = '';
    c.style.opacity = 1;
    c.style.overflow = 'visible';
   }
   clearInterval(c.t);
   return
  }
  var d = (f == 1) ? Math.ceil((c.mh - h) / s) : Math.ceil(h / s), o = h / c.mh;
  c.style.opacity = o;
  c.style.filter = 'alpha(opacity=' + (o * 100) + ')';
  c.style.height = h + (d * f) + 'px';
 };
 function dd(n){
  this.h = [];//存取有子菜单的项目
  this.c = [];//存取子菜单
 };
 dd.prototype = {
  init: function(p, c){
   a = c;
   var that = this;
   var w = document.getElementById(p), s = w.getElementsByTagName('ul'), l = s.length/*二级菜单的个数*/, i = 0;
   for (i; i < l; i++) {
    var h = s[i].parentNode;
    this.h[i] = h;
    this.c[i] = s[i];
    /*
     * 重点就在这里，一点JS的语法技巧，通过闭包来实现对i（索引的传递）
     * 然后就是Javascript里比较奇怪的一点，必须在内部的函数之外声明that=this
     * 这样对象的作用域才可以保持，很奇怪，但是很有效
    */
    h.onmouseover = function(index){
     return function(){
      that.st(index, true);
     }
    }(i);
    h.onmouseout = function(index){
     return function(){
      that.st(index, false);
     }
    }(i);
   }
  },
  st: function(x, f){
   var c = this.c[x], h = this.h[x], p = h.getElementsByTagName('a')[0];
   if (c.t) {
    clearInterval(c.t);
   }
   c.style['overflow'] = 'hidden';
   if (f) {
    p.className += ' ' + a;
    if (!c.mh) {
     c.style.display = 'block';
     c.style.height = '';
     c.mh = c.offsetHeight;
     c.style.height = 0;
    }
    if (c.mh == c.offsetHeight) {
     c.style.overflow = 'visible';
    }
    else {
     c.style.zIndex = z;
     z++;
     c.t = setInterval(function(){
      sl(c, 1)
     }, t);
    }
   }
   else {
    p.className = p.className.replace(a, '');
    c.t = setInterval(function(){
     sl(c, -1)
    }, t);
   }
  }
 };
 return {
  dd: dd
 };
}();
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div>
<ul class="menu" id="menu">
 <li><a href="#" class="menulink">Dropdown One</a>
  <ul>
   <li class="topline"><a href="#">Navigation Item 1</a></li>
   <li>
    <a href="#" class="sub">Navigation Item 2</a>
    <ul>
     <li class="topline"><a href="#">Navigation Item 1</a></li>
     <li><a href="#">Navigation Item 2</a></li>
     <li><a href="#">Navigation Item 3</a></li>
     <li><a href="#">Navigation Item 4</a></li>
     <li class="bottomline"><a href="#">Navigation Item 5</a></li>
    </ul>
   </li>
   <li>
    <a href="#" class="sub">Navigation Item 3</a>
    <ul>
     <li class="topline"><a href="#">Navigation Item 1</a></li>
     <li><a href="#">Navigation Item 2</a></li>
     <li>
      <a href="#" class="sub">Navigation Item 3</a>
      <ul>
       <li class="topline"><a href="#">Navigation Item 1</a></li>
       <li><a href="#">Navigation Item 2</a></li>
       <li><a href="#">Navigation Item 3</a></li>
       <li><a href="#">Navigation Item 4</a></li>
       <li><a href="#">Navigation Item 5</a></li>
       <li class="bottomline"><a href="#">Navigation Item 6</a></li>
      </ul>
     </li>
     <li class="bottomline"><a href="#">Navigation Item 4</a></li>
    </ul>
   </li>
   <li><a href="#">Navigation Item 4</a></li>
   <li class="bottomline"><a href="#">Navigation Item 5</a></li>
  </ul>
 </li>
 <li><a href="#" class="menulink">Non-Dropdown</a></li>
 <li>
  <a href="#" class="menulink">Dropdown Two</a>
  <ul>
   <li class="topline"><a href="#">Navigation Item 1</a></li>
   <li class="bottomline">
    <a href="#" class="sub">Navigation Item 2</a>
    <ul>
     <li class="topline"><a href="#">Navigation Item 1</a></li>
     <li><a href="#">Navigation Item 2</a></li>
     <li class="bottomline"><a href="#">Navigation Item 3</a></li>
    </ul>
   </li>
  </ul>
 </li>
 <li>
  <a href="#" class="menulink">Dropdown Three</a>
  <ul>
   <li class="topline"><a href="#">Navigation Item 1</a></li>
   <li><a href="#">Navigation Item 2</a></li>
   <li><a href="#">Navigation Item 3</a></li>
   <li><a href="#">Navigation Item 4</a></li>
   <li><a href="#">Navigation Item 5</a></li>
   <li>
    <a href="#" class="sub">Navigation Item 6</a>
    <ul>
     <li class="topline"><a href="#">Navigation Item 1</a></li>
     <li class="bottomline"><a href="#">Navigation Item 2</a></li>
    </ul>
   </li>
   <li><a href="#">Navigation Item 7</a></li>
   <li><a href="#" class="sub">Navigation Item 8</a>
        <ul>
       <li class="topline"><a href="#">Navigation Item 1</a></li>
       <li><a href="#" class="sub">Navigation Item 2</a>
        <ul>
                <li class="topline"><a href="#">Navigation Item 1</a></li>
                <li class="bottomline"><a href="#">Navigation Item 2</a></li>
                 </ul>
       
       </li>
       <li><a href="#">Navigation Item 3</a></li>
       <li><a href="#">Navigation Item 4</a></li>
       <li><a href="#">Navigation Item 5</a></li>
       <li class="bottomline"><a href="#">Navigation Item 6</a></li>
      </ul>
   </li>
   <li><a href="#">Navigation Item 9</a></li>
   <li class="bottomline"><a href="#">Navigation Item 10</a></li>
  </ul>
 </li>
</ul>
<div>
<script type="text/javascript">
 var menu=new menu.dd();
 menu.init("menu","menuhover");
</script>

<div style="width:900px;height:500px; background:#CC9900;">

</div>

</body>
</html>

xfxiaoyan2010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用javascript实现的可以收缩的纵向下拉菜单
qxs101307204的专栏
03-07 1151
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 可以收缩的纵向下拉菜单 dl{  height:16px;  overflow:hidden;  } .show{  height:16px;  overflow:visible;   }
Axure RP9制作四级下拉菜单
m0_65421975的博客
03-14 1619
1.元件库拖动一个矩形框，W为130，H为30，然后双击进入矩形框，输入为一级菜单，然后复制矩形框，复制六个，输入为下图： 2.将1.2.2.1、1.2.2.2设置为组合，命名为四级菜单，将1.2.2添加交互，新建交互——单击时——显示/隐藏。 3.将1.2.1、1.2.2、1.2.2.1、1.2.2.2设置为组合，给1.2二级菜单添加交互，单击时——显示/隐藏。 4.将1.1、1.2、1.2.1、1.2.2、1.2.2.1、1.2.2.2设置为组合，然后全部设置为隐藏，给一级菜单添...
JS4级菜单，select下拉列表样式
05-03
4级菜单，下拉列表，超实用的,div,js，快来呀
用this.className或this.classid来实现下拉菜单或下拉列表的显示是如此的简单
weixin_30487701的博客
04-21 268
今天来教大家一个很简单的实现下拉菜单或下拉列表的效果，这种效果一般的情况下大家会去写一大堆的JS或者jQuery代码，很是不方便，今天的方法很简单，只用一个this.className=''这样一个代码就可以实现了。 先看一下效果： HTML代码： <div id="category-2015" onmouseover="this.className='on'" onmouse...
下拉菜单，二级横向走动代码
weixin_34357928的博客
07-18 128
这网上搜索一段代码，方便以后学习 并对代码加以实验，对与IE6不能实现下代码的功能，应加以特定的修改下拉菜单，二级横向走动代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...
横向下拉及多级弹出式菜单
weixin_30405421的博客
09-09 154
<!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 htt...
jQuery四级联动菜单代码
04-07
jQuery四级联动菜单代码是一款多级联动下拉框菜单选择特效，带搜索和添加菜单功能。
VBA设置多级下拉菜单.xlsm
06-18
VBA设置多级下拉菜单.xlsm VBA设置动态多级下拉菜单.xlsm
jquery横向和竖向支持三级、四级下拉导航菜单
06-06
本文将深入探讨如何使用jQuery实现一个既支持横向又支持竖向的，可扩展到三级甚至四级的下拉导航菜单。这种菜单不仅提高了用户体验，也使网站结构更加清晰。 首先，我们需要理解jQuery的基础。jQuery是一个轻量级的...
css三级下拉菜单实现方法分享
09-25
### CSS三级下拉菜单实现方法详解 在网页设计与开发中，导航菜单是不可或缺的一部分，它不仅能够提高网站的用户体验，还能帮助用户快速找到所需的信息。对于拥有复杂结构的网站而言，采用多级下拉菜单可以更加高效...
jQuery省市区三级联动下拉框特效代码
03-20
jQuery省市区三级联动下拉框基于jquery-1.8.2.min.js制作，三级联动代码。
display案例-下拉菜单
zhzijun的博客
09-16 449
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a{ tex
一款兼容性很好的标准二级css下拉菜单
weixin_30553837的博客
01-19 71
<!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" lang="zh-CN"> ...
经典导航栏01，仿蓝色理想TAB横向下拉菜单效果
血法师的专栏
04-03 867
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> JS/jquery-1.9.0.min.js"> JS/dojo.js"> http://w
四级联动下拉菜单
开裆裤儿的博客
01-04 4051
数据库导出地址数据联动显示下拉菜单 1.先说数据库结构,上图: 结构副id形式,sid是本条数据的id,fid是本条数据的上级数据的sid. 就是把这种级别关系建立在数据库里,之后用起来就简单了. 2.前端代码 html: 市级: 北京 区级: 全部 街道: 全部 社区: 全部
纯CSS实现二级导航下拉菜单--css的简单应用
热门推荐
zhaiyq的博客
08-07 1万+
思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。 1、纯CSS二级导航下拉菜单代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8" c...
css+html+js实现下拉及多级弹出菜单
wj903829182的专栏
08-23 7161
本文将使用css+html+js实现横向菜单，具有下拉的多级弹出菜单。 首先我们来看看效果图： 首先应该写html部分的代码，代码比较简单，代码如下： 首页 网页版式 自适应宽度 固定宽度
鼠标划过出现下拉菜单
weixin_45663697的博客
05-10 988
效果图，鼠标点击“卖家中心出现下拉菜单” 代码 css *{margin: 0px;padding: 0px;} li{list-style: none;} a{text-decoration: none; color: #000;} /*text-decoration: none -> 去掉a标签的下划线*/ #menu{width: 100px; height: 30px; margin: 20px auto; border: 1px black ..
多级菜单导航栏
a6617681的博客
08-03 921
在一些项目中，都会有许多的导航栏，或者菜单栏，有的是二级菜单，有的是三级菜单，更有的是四级菜单，那么这时就会非常头痛，我也是在闲事为大家写了这么一个小demo，希望大家可以参考一下。 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="ut...
uniapp下拉菜单四级菜单
最新发布
11-29
根据提供的引用内容，uniapp没有提供直接实现四级下拉菜单的组件，但可以通过嵌套使用uni.showActionSheet()方法来实现类似的效果。具体实现方法如下： ```javascript // 定义四级菜单的数据 let menuData = [ { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值