JavaScript实现横向滑出的多级菜单效果

本文实例讲述了JavaScript实现横向滑出的多级菜单效果。分享给大家供大家参考。具体如下:

这是一款JavaScript横向滑出的多级菜单,只用鼠标放上就可以动画出现二级菜单,整体设计精美,大气,博客上也可以用哦。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-hx-show-menu-style-demo/

具体代码如下:

<!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>JavaScript横向滑出的多级菜单</title>
<style>
* {padding:0; margin:0}
body {font:12px Verdana, Arial, Helvetica}
#wrapper {width:750px; padding:25px; margin:0 auto}
#leftcolumn {float:left; width:225px}
#rightcolumn {float:left; width:525px}
.dropdown {display:block; position:relative}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown .upperdd {border-bottom:none}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:208px; display:none; background:#fff; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
</style>
<script type="text/javascript">
var DDSPEED = 10;
var DDTIMER = 15;
var OFFSET = -2;
var ZINT = 100;
function ddMenu(id,d){
 var h = document.getElementById(id + '-ddheader');
 var c = document.getElementById(id + '-ddcontent');
 clearInterval(c.timer);
 if(d == 1){
  clearTimeout(h.timer);
  c.style.display = 'block';
  if(c.maxh && c.maxh <= c.offsetHeight){return}
  else if(!c.maxh){
   c.style.left = (h.offsetWidth + OFFSET) + 'px';
   c.style.height = 'auto';
   c.maxh = c.offsetHeight;
   c.style.height = '0px';
  }
  ZINT = ZINT + 1;
  c.style.zIndex = ZINT;
  c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 }else{
  h.timer = setTimeout(function(){ddCollapse(c)},50);
 }
}
function ddCollapse(c){
 c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
function cancelHide(id){
 var h = document.getElementById(id + '-ddheader');
 var c = document.getElementById(id + '-ddcontent');
 clearTimeout(h.timer);
 clearInterval(c.timer);
 if(c.offsetHeight < c.maxh){
  c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
 }
}
function ddSlide(c,d){
 var currh = c.offsetHeight;
 var dist;
 if(d == 1){
  dist = Math.round((c.maxh - currh) / DDSPEED);
 }else{
  dist = Math.round(currh / DDSPEED);
 }
 if(dist <= 1 && d == 1){
  dist = 1;
 }
 c.style.height = currh + (dist * d) + 'px';
 c.style.opacity = currh / c.maxh;
 c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
 if(currh > (c.maxh - 2) && d == 1){
  clearInterval(c.timer);
 }else if(dist < 1 && d != 1){
  clearInterval(c.timer);
  c.style.display = 'none';
 }
}
</script>
</head>
<body>
<div id="wrapper">
<div id="leftcolumn">
 <dl class="dropdown">
  <dt id="one-ddheader" class="upperdd" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">我们首页</dt>
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
   <ul>
    <li><a href="#" class="underline">脚本主页</a></li>
    <li><a href="#" class="underline">网页特效</a></li>
    <li><a href="#">脚本下载</a></li>
   </ul>
  </dd>
 </dl>
 <dl class="dropdown">
  <dt id="two-ddheader" class="upperdd" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">网站导航</dt>
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
   <ul>
    <li><a href="#" class="underline">ASP</a></li>
    <li><a href="#" class="underline">PHP</a></li>
    <li><a href="#" class="underline">.NET</a></li>
    <li><a href="#">网站留言</a></li>
   </ul>
  </dd>
 </dl>
 <dl class="dropdown">
  <dt id="three-ddheader" class="upperdd">最新下载</dt>
 </dl>
 <dl class="dropdown">
  <dt id="four-ddheader" onmouseover="ddMenu('four',1)" onmouseout="ddMenu('four',-1)">欢迎回来</dt>
  <dd id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="ddMenu('four',-1)">
   <ul>
    <li><a href="#" class="underline">欢迎再来</a></li>
    <li><a href="#">慢走,不送</a></li>
   </ul>
  </dd>
 </dl>
</div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

时间: 2015-10-08

js左侧多级菜单动态的解决方案

复制代码 代码如下: <div><a onclick="news_pro('1.1')">1</a></div> <div id="1.1" > <div> <a onclick="news_pro('1.1.1')">1.1</a></div> </div> 这就出现两次类别了,点父级显示(隐藏)子级菜单,JS代码也就一句话:

js实现适用于素材网站的黑色多级菜单导航条效果

本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果.分享给大家供大家参考.具体如下: 这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用CSS+javaScript来实现,整体效果非常棒,用来学习CSS也是很不错的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-color-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

JS+CSS实现的简单折叠展开多级菜单效果

本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/ 具体代码如

JS实现多级菜单中当前菜单不随页面跳转样式而发生变化

一.概述 本文介绍了JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化,貌似没看懂啥意思? 看图说话:就是点二级或多级菜单时,父级展开,当前菜单是被选中状态,这下明白了吧? 二.应用场景 当一个项目使用公共模板文件时(如上图的左侧菜单栏),我们给每个子菜单添加链接时,点击页面跳转样后还是公共模板的样式,这时就需要实现动态加载当前菜单的样式. 三.实现方法 第一种:.通过php传递变量,模板页面通过接收这些变量来实现当前页面的菜单选中与否,父级展开等这些样式 缺点:虽然实现简单,但是每

js实现具有高亮显示效果的多级菜单代码

本文实例讲述了js实现具有高亮显示效果的多级菜单代码.分享给大家供大家参考.具体如下: 这是一款具有高亮效果的菜单,菜单设计的也比较简洁,鼠标放在一级菜单上可以看到二级菜单的高亮效果,整体风格简约大方,适用于一些比较"干净"没有过多修饰的网站. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blink-show-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/

js 全兼容可高亮二级缓冲折叠菜单

在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头.页脚.左侧菜单加一个右侧ifame框架页.所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单. 特点: 全兼容,浏览器测试:IE5.5.IE6.IE7.IE8.FF3.0.谷歌.Safari 4.0.Opera9.0. Html结构优雅简洁,无多余标签,利于程序循环输出. 样式与结构分离,你可以在样式表中修改不同的风格. 当前选中项高亮状态,一级菜单和二级菜单都

JS实现的Select三级下拉菜单代码

本文实例讲述了JS实现的Select三级下拉菜单.分享给大家供大家参考.具体如下: 这里使用js实现Select三级下拉菜单,比如全国省市城市选择.数码类产品分类.人才类别选择等,都比较具有代表性,在表单中容易使用Select下拉列表菜单供用户选择,当然,自己用还是需要稍微改动的,比如至少菜单内容要改成自己需要的,其它的好说. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3-select-menu-codes/ 具体代码如下: <ht

js实现完全自定义可带多级目录的网页鼠标右键菜单方法

本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法.分享给大家供大家参考.具体分析如下: 这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

JS实现带有抽屉效果的产品类网站多级导航菜单代码

本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款像抽屉一样的菜单,多用在产品网站,比如IT产品网站的分类导航上,菜单结构清淅,样式新颖,设计美观,主要是运用JavaScript技术实现,用CSS配合实现菜单背景的构建,总体来说,是学习Js多级分类菜单的好范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ct-style-product-web-nav-menu-codes/ 具

js模拟淘宝网的多级选择菜单实现方法

本文实例讲述了js模拟淘宝网的多级选择菜单实现方法.分享给大家供大家参考.具体如下: 这是一款基于js模拟淘宝网的多级选择菜单代码,这款菜单是模拟淘宝网的,是很早时候的淘宝网,现在已经没有了,本款菜单可以像级联菜单那样一级一级的选择数据,最后确定出数据. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例

本文实例讲述了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法.分享给大家供大家参考,具体如下: 下拉菜单 菜单: ,dropdown(.dropup改变这个是上显示)   data-toggle="dropdown" (激活文本处)      .dropdown-menu   .pull-left   .pull-right 按钮组:.btn-group(各种类为btn的标签集合)    .btn-toolbar(按钮导航条)  .btn-group-vertical   .