几个不错的自动收缩菜单导航效果

2024-10-26 08:25:48

runcode

div.xx{border:solid 1px;overflow:hidden;}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}

伸缩效果

内容

伸缩效果

sdf容

sf容

sfd容

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

一打开网页是收缩的

runcode

var mh = 30;//最小高度
var step = 1;//每次变化的px量
var ms = 10;//每隔多久循环一次
var caiying2007=202//最大高度
window.onload=function init(){
var obj_init=document.getElementsByTagName("div")
for (var oi=0;oi= t.maxHeight){
clearTimeout(t.timer);
return;
}
}
o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
}

div.xx{border:solid 1px;overflow:hidden;height:200px}
div.xx h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}

伸缩效果

内容

伸缩效果

sdf容

sf容

sfd容

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

慢慢展开菜单的效果，以前早就有人做过，给个时间函数。也算不上什么极限：

body{
margin:0px;
font:normal 12px 宋体;
background: #999999;
}
table{border:0px;}
td{font:normal 12px 宋体; }
img{vertical-align:middle; border:0px;}
.sec_menu{border-left:1px solid #808080; border-right:1px solid #808080;
border-bottom:1px solid #808080; overflow:hidden; background:#FFCC99;}
.menu_title{background-color: #CC6600}
.menu_title span{color:#FFFFFF;}
.menu_title2{background-color: #FF9900}
.menu_title2 span{color:#C8C8C8; }
.showtitle{position:relative; top:-2px; left:-6px; border:1pt solid #C3D4E7;
z-index:0; height:26; background-color: #0080C0; padding-top:5; padding-left:5}
.alp{FILTER: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5,
finishx=250,finishy=85}
.txt1{font-size:9pt; color:#CCCCCC;}

6"
if(MenuId.style.pixelHeight==maxh/10)
MenuId.style.display="block";
myMenuId=MenuId;
myMaxh=maxh;
myMenuId2=MenuId2;
myarrow=arrow
setTimeout("menuShow(myMenuId,myMaxh,myMenuId2,myarrow)","5");
}
}
function menuHide(MenuId,maxh,MenuId2,arrow){
if(MenuId.style.pixelHeight>0) {
if(MenuId.style.pixelHeight==maxh/20)
MenuId.style.display="none";
MenuId.style.pixelHeight-=maxh/20;
MenuId.filters.alpha.opacity-=5;
arrow.innerHTML="4"
myMenuId=MenuId;
myMaxh=maxh
myMenuId2=MenuId2;
myarrow=arrow
setTimeout("menuHide(myMenuId,myMaxh,myMenuId2,myarrow)","5");
}
else
if(whichContinue)
whichContinue.click();
}
function menuChange(MenuId,maxh,MenuId2,arrow){
if(MenuId.style.pixelHeight){
menuHide(MenuId,maxh,MenuId2,arrow);
whichOpen="";
whichcontinue="";
}
else
if(whichOpen) {
whichContinue=MenuId2;
whichOpen.click();
}
else
{
menuShow(MenuId,maxh,MenuId2,arrow);
whichOpen=MenuId2;
whichContinue="";
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; iCattom

nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //提取串值
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

var whichOpen=menuTitle1;
var whichContinue="";

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

tree menu by jiarry

span{ width:100px;Height:25px;margin-left:15px;}
font{font-weight:bold;}
body,td{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;color:#333333;}
div{cursor:default;border-top:1px solid gray ; border-left:1px solid gray ;border-right:1px solid gray ;background-color:#D3F7FE ;width:120px;}
pre{background-color:#FFFFF1; border:1px solid gray;color:blue;font-family:verdana;Arial;padding:20px;}

+栏目一

菜单一

菜单二

菜单三

+栏目二

菜单一

菜单二

菜单三

+栏目三

菜单一

菜单二

菜单三

+栏目四

菜单一

菜单二

菜单三

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

css实现会折叠、展开的菜单导航栏效果

function show(c_Str) {if(document.all(c_Str).style.display=='none') {document.all(c_Str).style.display='block';} else{document.all(c_Str).style.display='none';}} function high(){ if (event.srcElement.className=="k"){ event.srcElement.style.backg
7款风格新颖的jQuery/CSS3菜单导航分享

一款优秀的菜单对网站而言是非常重要的,它不仅可以让用户方便地找到想要的信息,而且更让人有一种特殊的用户体验.下面给大家分享7款风格新颖的jQuery/CSS3菜单导航,希望大家会喜欢. 1.CSS3立体飘带状菜单 CSS3立体飘带状菜单,该菜单鼠标滑过时,菜单项向上立体凸起,结合黑色的木质背景,整个菜单显得非常立体生动. 在线演示 /源码下载 2.CSS3个人资料导航菜单该菜单是用来展示登录的用户信息,包括用户的快捷操作按钮,另外菜单还提供一个个性化的搜索框. 在线演示 /源码下载 3.jQu
几个不错的自动收缩菜单导航效果

runcode var mh = 30;//最小高度 var step = 1;//每次变化的px量 var ms = 10;//每隔多久循环一次 function toggle(o){ if (!o.tid)o.tid = "_" + Math.random() * 100; if (!window.toggler)window.toggler = {}; if (!window.toggler[o.tid]){ window.toggler[o.tid]={ obj:o, maxH
jQuery实现下滑菜单导航效果代码

本文实例讲述了jQuery实现下滑菜单导航效果代码.分享给大家供大家参考.具体如下: 这里演示jquery向下滑的导航菜单代码,黄色风格下滑菜单,可作为网站的主导航菜单,二级菜单向下滑出,兼容性也是很不错的,本菜单来源自网络,丢失原作者署名信息,请原作者看到后与我们联系署名. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html
jQuery实现的简洁下拉菜单导航效果代码

本文实例讲述了jQuery实现的简洁下拉菜单导航效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现简洁下拉菜单导航效果,代码规范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+.简洁明快的jquery网站菜单,请参阅代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-down-show-menu-nav-codes/ 具体代码
JS实现三级折叠菜单特效，其它级可自动收缩

本文实例讲述了JS实现三级折叠菜单特效,其它级可自动收缩.分享给大家供大家参考,很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行具体如下: 小贴士:去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应运行效果图如下: 实现代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo
JS实现自动变化的导航菜单效果代码

本文实例讲述了JS实现自动变化的导航菜单效果代码.分享给大家供大家参考.具体如下: 自动变化的JS导航菜单,按照时间自动切换,有需要的参考一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
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实现自动切换文字的导航效果代码

本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制按钮,点击左侧则向上切换菜单文字,点击右侧则切换到一个菜单项内容,也可自动切换,鼠标不点击的时候菜单会自动变化文字. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-font-nav-style-codes/ 具体代码如下:
jquery实现可自动收缩的TAB网页选项卡代码

本文实例讲述了jquery实现可自动收缩的TAB网页选项卡代码.分享给大家供大家参考.具体如下: 这是一款可自动收缩的TAB选项卡网页代码,当把鼠标放在标签上的时候,标签所属的内容自动展开,鼠标移走或移到其它标签的时候,选项卡自动收缩隐藏起来,第二个选项卡伸展开来,动画效果挺流畅,不错的网页特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-hidden-show-tab-cha-nav-menu-codes/ 具体代码如下:
Vue使用element-ui实现菜单导航

本文实例为大家分享了Vue使用element-ui实现菜单导航的具体代码,供大家参考,具体内容如下效果图目录截图安装vue-router 和 element-ui vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库 npm install vue-router --save npm install element-ui --save 关闭ESLint检查新增配置文件src/vue.config.js 文件 module.exports = { lint

几个不错的自动收缩菜单导航效果

伸缩效果

伸缩效果

伸缩效果

伸缩效果

相关推荐

随机推荐