本文介绍一种比较常见的导航菜单是如何实现的，它具有垂直结构，点击导航主标题可以展开或者折叠二级菜单。 代码实例如下:垂直导航菜单body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53", "Arial Narrow";background:#fff; } form, ul, li, p, h1, h2, h3, h4, h5, h6{margin:0;padding:0; } input, select{font-size:12px;line-height:16px; } img{border:0;} ul, li{list-style-type:...
本文实例为大家分享jquery实现百度新闻导航菜单滑动动画，供大家参考，具体内容如下 思路与步骤 1.利用UL创建简单横向导航；仿百度新闻菜单滑动动画body, div, ul, li, a{margin: 0px;padding: 0px;font-size: 20px;color: #FFF;border: 0;}.div-nav-container{margin-top: 50px;width: 100%;background-color: #01204F;}.div-nav{width: 870px;margin: 0px auto;}ul{list-style: outside none none;width: 100%;height: 50px;}ul ...
一、实现效果1.初始化效果：未添加样式和特效2、添加CSS样式3、最终效果二、JQuery代码$(document).ready(function(){ $(".level>a").click(function(){ $(this).addClass("current") //给当前元素添加current样式 .next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素移除“current”样式 .next().hide(); //他们的下一个元素隐藏 return false; }) })三、完整...
经典选项卡 .tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;} .tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;} .tab dt strong{padding:0 15px;color:#444;} .tab dt a{display:inline-block;cursor:pointer;padding:0 10px;text-align:center;background:#f1f1f1;color:#000;} .tab dt a.on{background:#fff;color:#333;fon...
JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relative; } #navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#000; width:120px; heig...
非常酷的网页导航菜单，sky整理收集。 /* 这是把事件动作绑定到菜单上的函数 */ function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i ">脚本之家,站长必备的高质量网页特效和广告代码。jb51.net，站长js特效。 网站首页 站长特效 网页特效 广告代码 站内关键词 rss订阅 留言本 您自定义 您自定义 attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个...
SlideView 滑动展示效果 .sv3 dl, .sv3 dt, .sv3 dd{ padding:0; margin:0; } .sv3 { width:240px; border:1px solid #BFC7D9; } .sv3 dl { width:240px; height:380px; background:#EDF5FF; overflow:hidden; } .sv3 dt { padding:5px 10px; height:13px; font-size:13px; color:#000; background:#E5ECF9; border-top:1px solid #fff; border-bottom:1px solid #BFC7D9; } .sv3 dl.on dt { background:#336...
仿新浪微博首页"大家正在说"渐入轮显效果 *{margin:0;padding:0;font-size:12px;} ul{width:300px;height:400px;overflow:hidden;margin:50px 0 0 100px;} li{width:300px;border-bottom:1px solid #eee;margin-bottom:20px;} h4{border-bottom:1px solid #eee;} 1、吃早餐都中毒了 是不是有点全都，吃早餐竟然食物中毒啊？ 2分钟前 2、30城市房价增高进7成 房奴注定当今社会的年青人会很忙碌，一辈子会房子奔波…… 2分钟前...
实用的多级树形展开菜单 body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} ul,li,{margin:0;padding:0;} ul{list-style:none;} #root{margin:10px;width:200px;overflow:hidden;} #root li{line-height:25px;} #root .rem{padding-left:16px;} #root .add{background:url(/upload/201010/20101031213041133.gif) -4px -31px no-repeat;} #root .ren{background:url(/upload/201010/201010312130...
多级导航菜单 /* ::::: css ::::: */ strong { font-style: normal; font-weight: normal; font-weight: bold; } a { cursor: pointer; text-decoration: none; } #container { width: 960px; margin: 0pt auto; } #nav, .nav-container, .nav-container ul, #nav .nav-master-a:hover, #nav .nav-master-a:hover strong, #nav li.current .nav-master-a strong, #nav li.current .nav-master-a, #nav .nav-sub a:ho...
简单树形 * {margin:0px; padding:0px;} #categoryTree {margin:0px; padding:0px;} #categoryTree ul {display:none; margin:0px;margin-left:5px; padding:0px 0px 0px 15px;} #categoryTree span {cursor:pointer;} window.onload = function() { var cate = document.getElementById("categoryTree"); var bBs = cate.getElementsByTagName("span"); var len = bBs.length; if (len > 0) { for (var i=0; i 国务院 省...
这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3D菜单的形式,我简单采用了余弦函数 具体实现时，为了不在整个菜单总高度中出现两个波峰而产生突兀感，事实上cos(x/K)中的K应该是一个与菜单条目数量以及最大字体值有关的函数，这里我简单设为了一个常量 。 完整的代码为 代码如下: menu list html { overflow: hidden; } body { background-color: #111111; color: #eee; } ul#menu { position: absolute; left...
谁有兴趣的话可以改成动态加载数据，或者用jquery，代码肯定会少很多！我发现添加一些css，这棵树在静态页面还是大有用途的！.expand{ cursor:pointer; } .hide{ cursor:pointer; } function toggleChild(o) { var cls = o.getAttribute("class"); if (cls == "expand") { var sb = o.nextSibling; if (window.innerWidth) sb = sb.nextSibling; while (sb != null && sb.tagName.toLowerCase() == 'dd') { sb.style...
手风琴 *{ padding:0; margin:0; } body{ background:#fafafa; font-size:12px; } .slider{ line-height:24px; width:700px; color:#7ecef4; margin:10px auto; background:#010e16; } .slider dt{ background:#f5f5d2; padding-left:30px; cursor:pointer; overflow:hidden; background:#1b1b1b; border-bottom:1px solid #fff; height:32px; line-height:32px; } .slider dt.slider_open{background:#707070; color:# } .sl...
下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: 代码如下: body{font-size:13px} ul,li{list-style-type:none;padding:0px;margin:0px} .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc} .content{padding-top:10px;clear:left} a{text-decoration:none;colo...