滑动式折叠菜单 - Slashdot's Menu
- <script type="text/javascript">
- function SDMenu(id) {
- if (!document.getElementById || !document.getElementsByTagName)
- return false;
- this.menu = document.getElementById(id);
- this.submenus = this.menu.getElementsByTagName("div");
- this.remember = true;
- this.speed = 3;
- this.markCurrent = true;
- this.oneSmOnly = false;
- }
- SDMenu.prototype.init = function() {
- var mainInstance = this;
- for (var i = 0; i < this.submenus.length; i++)
- this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
- mainInstance.toggleMenu(this.parentNode);
- };
- if (this.markCurrent) {
- var links = this.menu.getElementsByTagName("a");
- for (var i = 0; i < links.length; i++)
- if (links[i].href == document.location.href) {
- links[i].className = "current";
- break;
- }
- }
- if (this.remember) {
- var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
- var match = regex.exec(document.cookie);
- if (match) {
- var states = match[1].split("");
- for (var i = 0; i < states.length; i++)
- this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
- }
- }
- };
- SDMenu.prototype.toggleMenu = function(submenu) {
- if (submenu.className == "collapsed")
- this.expandMenu(submenu);
- else
- this.collapseMenu(submenu);
- };
- SDMenu.prototype.expandMenu = function(submenu) {
- var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
- var links = submenu.getElementsByTagName("a");
- for (var i = 0; i < links.length; i++)
- fullHeight += links[i].offsetHeight;
- var moveBy = Math.round(this.speed * links.length);
- var mainInstance = this;
- var intId = setInterval(function() {
- var curHeight = submenu.offsetHeight;
- var newHeight = curHeight + moveBy;
- if (newHeight < fullHeight)
- submenu.style.height = newHeight + "px";
- else {
- clearInterval(intId);
- submenu.style.height = "";
- submenu.className = "";
- mainInstance.memorize();
- }
- }, 30);
- this.collapseOthers(submenu);
- };
- SDMenu.prototype.collapseMenu = function(submenu) {
- var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
- var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
- var mainInstance = this;
- var intId = setInterval(function() {
- var curHeight = submenu.offsetHeight;
- var newHeight = curHeight - moveBy;
- if (newHeight > minHeight)
- submenu.style.height = newHeight + "px";
- else {
- clearInterval(intId);
- submenu.style.height = "";
- submenu.className = "collapsed";
- mainInstance.memorize();
- }
- }, 30);
- };
- SDMenu.prototype.collapseOthers = function(submenu) {
- if (this.oneSmOnly) {
- for (var i = 0; i < this.submenus.length; i++)
- if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
- this.collapseMenu(this.submenus[i]);
- }
- };
- SDMenu.prototype.expandAll = function() {
- var oldOneSmOnly = this.oneSmOnly;
- this.oneSmOnly = false;
- for (var i = 0; i < this.submenus.length; i++)
- if (this.submenus[i].className == "collapsed")
- this.expandMenu(this.submenus[i]);
- this.oneSmOnly = oldOneSmOnly;
- };
- SDMenu.prototype.collapseAll = function() {
- for (var i = 0; i < this.submenus.length; i++)
- if (this.submenus[i].className != "collapsed")
- this.collapseMenu(this.submenus[i]);
- };
- SDMenu.prototype.memorize = function() {
- if (this.remember) {
- var states = new Array();
- for (var i = 0; i < this.submenus.length; i++)
- states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
- var d = new Date();
- d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
- document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
- }
- };
- </script>
调用方式
HTML:
- var myMenu = new SDMenu("main_menu"); // 菜单ID
- // 默认参数
- myMenu.speed = 3; // 折叠速度
- myMenu.remember = true; // 是否记录状态
- myMenu.oneSmOnly = false; // 一次只有一个菜单打开
- myMenu.markCurrent = true; // 是否高亮当前菜单
- myMenu.init();
- // 附加方法
- var firstSubmenu = myMenu.submenus[0];
- myMenu.expandMenu(firstSubmenu); // 打开一个菜单
- myMenu.collapseMenu(firstSubmenu); // 关闭一个菜单
- myMenu.toggleMenu(firstSubmenu); // 当菜单关闭时打开,当菜单打开时关闭
- myMenu.expandAll(); // 打开所有菜单
- myMenu.collapseAll(); // 关闭所有菜单
滑动式折叠菜单 - Slashdot's Menu的更多相关文章
- CSS:响应式下的折叠菜单(条纹式)
原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么 ...
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- 顶 兼容各种浏览器js折叠菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS三级折叠菜单特效 自动收缩其它级
真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...
- JS+CSS打造三级折叠菜单,自动收缩其它级 js
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- slideToggle+slideup实现手机端折叠菜单效果
折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...
- CSS+JS相应式导航菜单
响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式 需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局 掌握CSS重的display:no ...
- 响应式导航菜单(css+js)
1.响应式导航菜单 先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...
随机推荐
- 今天谈谈流,什么是IO流?
无标题 (5) :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { bord ...
- oracle 锁表问题
oracle执行表数据更新的时候,会遇到锁表问题,比方说,会遇到这样的问题,主要原因是这张表被其他人占用,修改数据没有提交.oracle为了避免脏数据的产生,在其安全机制下,锁住该表. 执行如下操作, ...
- MyBatis调用Oracle存储过程
MyBatis调用Oracle存储过程 1.无输入和输出参数的存储过程 2.带有输入和输出参数的存储过程 3.返回游标的存储过程 mybatis中的配置文件代码 <resultMap type= ...
- 客户端实现蓝牙接收(C#)
知识总结发布 (转载) 网上有关蓝牙接收的资料很多,使用起来也很简单,但是我觉得还是有必要把这些知识总结下来,蓝牙开发需要用到一个第三方的库InTheHand.Net.Personal.dll,感兴 ...
- web前端之HTML中元素的区分
作为前端人员,我们就是要与各种超文本标记打交道,用到各种不同的标签元素.在使用的时候不知道有没有注意到他们的分类归属?现在就来说一说博主的见解: 目前博主总结了三种分类方法:一是按封闭来划分,一是按显 ...
- OSX的一些基本知识
1, 熟悉OSX常用的热键: 花 +C 拷贝(注意,复制是在当前目录中制作一个副本,跟拷贝意义不一样) 花 +V 粘贴(如果用拖拽的方式进行复制,需要按住Option键,相当于Windows的Ctrl ...
- SQL Server 2014 安装图解
服务器:Windows server 2012 R2 SQL:SQL Server 2014 Step 1 安装前 双击 Setup.exe 安装文件 选择第一项:New SQL Server sta ...
- 如何隐藏winform中报表设计器中的按钮
https://www.devexpress.com/Support/Center/Question/Details/T246117 DesignMdiController.SetCommandVis ...
- [转] charles使用教程指南
charles使用教程指南 0x01 前言: Charles是一款抓包修改工具,相比起burp,charles具有界面简单直观,易于上手,数据请求控制容易,修改简单,抓取数据的开始暂停方便等等优势 ...
- hdu4087ALetter to Programmers(三维旋转矩阵)
参考 三维旋转矩阵 + 矩阵加速 这个还要用到仿射变换. 平移 translate tx ty tz 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 缩放 scale kx ky ...