#menu{width:200px;} .has{background:#00DFAA; color:#FFFBF0; cursor:pointer} .hig{background:#FF5F55; color:#2A3F55;} div{padding:0px; margin:10px 0;} div a{background:#D41FAA; display:none; float:left; width:200px;} $(document).ready(function(){ $(".has").click(function(){ $(this).addClass("hig").children("a").show().end().siblings().removeClass("hig").children("a").hide(); }); }); 第一章 ...
拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{ height:320px; list-style:none; margin:40px 50px 0px; padding:0px; } li{ width:100%; height:30px; line-height:30px; fo...
QQ菜单 if (!document.getElementById) document.getElementById = function() { return null; } function initializeMenu(menuId, actuatorId) { var menu = document.getElementById(menuId); var actuator = document.getElementById(actuatorId); if (menu == null || actuator == null) return; actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)"; actuator.onclick = function() { var display ...
自写的滑动门式菜单/ *{margin:0;padding:0;} body{ margin:auto;font:14px "宋体",Verdana, Arial, Helvetica, sans-serif;color:#333;} ul,li{padding:0; list-style:none;} a:link,a:visited{color:#333;text-decoration:none;} a:hover{color:#d00;text-decoration:none;} #headNav{background:url(http://files.jb51.net/imgby/_navBg.png) 0 -42px repeat-x; border-top:solid 1px #E5B0B1; height:42px;} #headNav ul...
这里要注意,用于产生changeTabInterval的随机数，防止页面上TabPane过多，如果设置的changeTabInterval都一样的话会产生整齐划一的切换的效果，不美观. 自动切换Tab选项卡 function randint(m,n)//产生m-n之间的随机整数 { return Math.random()*(n-m)+m; } function IfNull(a,dv) { return typeof(a) =="undefined"?dv:a; } var TabPaneConfig = { idPrefix: "tab-panel-object-", idCounter: 0, getId: function(){ ret...
动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{ width:705px; list-style:none; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: 0px; } div#nav ul li{ float:left; heigh...
JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:40px; }/*可有可无属性，是内容与边的距离*/ #navigation li { float:left; text-align:center; position:relative;/*position:relative一定要写，是下面的链接相对它绝对定位*/ } #navigation li a:link, #naviga...
Div+Js实现的带阴影菜单 微软以前网站曾用过 var global = window.document global.fo_shadows = new Array function makeRectangularDropShadow(el, color, size) { var i; for (i=size; i>0; i--) { var rect = document.createElement('div'); var rs = rect.style rs.position = 'absolute'; rs.left = (el.style.posLeft + i) + 'px'; rs.top = (el.style.posTop + i) + 'px'; rs.width = el.offsetWidth + 'px'; rs.heigh...
预实现效果:(点击不同的tab显示不同面板内容)一:用到的js函数: 代码如下: //变换tab函数 //原则,外层div里含有内层多个div function tabPanelEx(trThis,urlImgNormal,urlImgPoint,tabs,tabid){ var tds=trThis.parentNode.children; for(var i=0;i{ if(tds[i].attributes["ex"]) { tds[i].style.backgroundImage="url("+urlImgNormal+")"; } } trThis.style.backgroundImage="url("+urlImgPoint+")"; //div control var vtabs=docu...
（一）：XHTML： 代码如下: Home Services FAQ Testimonials About Alpacas Contact Us (二)：JQuery 代码如下: $(document).ready(function(){ $(#navigationMenu li .normalMenu).each(function(){ // create a duplicate hyperlink and position it above the current one $(this).before($(this).clone().removeClass().addClass(hoverMenu)); }); $(#navigationMenu li).hover(function(){ // we assign an action on mo...
演示代码 http://demo.jb51.net/js/other/baozha.htm
从百度扒下来的竖直伸缩菜单-www.gxlcms.com 新手入门 关于百度搜索推广 账户注册 快速上手 推广制作 设置匹配方式 撰写创意 设置URL 推广投放 点击过滤 质量度 关键词匹配 创意展现方式 效果评估 推广效果 百度Bridge 持续优化 网站优化 增值产品 百度推广助手 营销中心 关注焦点 推广专题 var MENU_ID="MenuContainer";var MENU_LINK_PREFIX="./?module=default&controller=index&action=node&nodeid=";var SUB_ITEM_HE...
在后台或OA系统中最常用到的布局往往是一个全屏布局，一般都是上中下三行两列布局，页头、页脚、左侧菜单加一个右侧ifame框架页。所以那种带折叠的二级菜单是会经常使用到的，本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单。 特点： 全兼容，浏览器测试：IE5.5、IE6、IE7、IE8、FF3.0、谷歌、Safari 4.0、Opera9.0。 Html结构优雅简洁，无多余标签，利于程序循环输出。 样式与结构分离，你可以在样式表中修改不同的...
本章节分享一段代码实例，它实现了手风琴方式展开和折叠导航菜单效果。代码实例如下:代码实例如下:脚本之家dl{width:150px;} dl,dd{margin:0;} dt{background:gray;font-size:14px;padding:2px;margin:2px; } dt{color:#FFF;} dd a{color:#000;font-size:12px; } ul{list-style:none;padding:2px; }$(document).ready(function(){$("dd:not(:first)").hide();$("dt a").click(function(){$("dd:visible").slideUp("slow");$(this)....
本文实例介绍了javascript结合HTML CSS实现橙色导航菜单，分享给大家供大家参考，具体内容如下 效果图：超漂亮的HTML导航菜单CSS代码#top {display: block;text-align: left;height: 105px;position: relative;z-index: 0;}.m {margin: 0 auto;width: 970px;}body {font-size: 12px;}a {color: #333;text-decoration: none;}a:link {text-decoration: none;}/* Download by http://hovertree.com*/a.blue:link, a.blue:visited {co...