网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> CSS+Js选项卡菜单,自适应宽度
CSS+Js选项卡菜单,自适应宽度
作者:admin 发布时间:2010-11-16 21:35:25 发布人: admin
<html> <head> <title>简易实用,CSS+Js选项卡菜单,自适应宽度丨网页特效丨myjs.jz123.cn</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <style type="text/css"> *{margin:0;padding:0;} a:link,a:visited{text-decoration:none;} a:hover{text-decoration:none;} ul{list-style:none;} .subMenu{background:#333;float:left;padding-top:2px;width:100%;} .subMenu li{float:left;} .subMenu li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;} .subMenu .thisStyle a {background:#fff;color:#000;} .subContent{clear:both;border:2px solid #000;border-top:none;background:#fff;} .subContent ul{display:none;padding:15px;line-height:180%;} </style> </head> <body> <ul class="subMenu"> <li class="thisStyle"><a href="javascript:void(0)">目录</a></li> <li><a href="javascript:void(0)">列表</a></li> <li><a href="javascript:void(0)">产品</a></li> <li><a href="javascript:void(0)">新网</a></li> </ul> <div class="subContent"> <ul style="display:block;"> <li> <a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="#"> 超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li> <li> <a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="#"> CSS制作斜角上有背景图片的Div层</a></li> <li> <a title="Js实现的层展开、层折叠效果,默认时候层是折叠的" target="_blank" href="#"> Js实现的层展开、层折叠效果,默认时候层是折叠的</a></li> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="#"> DIV始终固定在网页右下角位置的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="#"> JavaScript未知高度元素的垂直居中的方法</a></li> </ul> <ul> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="#"> DIV始终固定在网页右下角位置的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="#"> JavaScript未知高度元素的垂直居中的方法</a></li> <li> <a title="渐变彩色的文字" target="_blank" href="#"> 渐变彩色的文字</a></li> <li> <a title="指定文字逐条显示" target="_blank" href="#"> 指定文字逐条显示</a></li> <li> <a title="滚动的标题栏" target="_blank" href="#"> 滚动的标题栏</a></li> </ul> <ul> <li> <a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="#"> JS 4屏平滑滚动幻灯片特效</a></li> <li> <a title="图片的无缝滚动(纵向、横向)" target="_blank" href="#"> 图片的无缝滚动(纵向、横向)</a></li> <li> <a title="鼠标触及带边框的菜单" target="_blank" href="#"> 鼠标触及带边框的菜单</a></li> <li> <a title="比较实用的CSS控制链接颜色效果" target="_blank" href="#"> 比较实用的CSS控制链接颜色效果</a></li> <li> <a title="鼠标接触或者离开图片时,图片大小会相应变化" target="_blank" href="#"> 鼠标接触或者离开图片时,图片大小会相应变化</a></li> </ul> <ul> <li> <a title="比较实用的CSS控制链接颜色效果" target="_blank" href="#"> 比较实用的CSS控制链接颜色效果</a></li> <li> <a title="鼠标接触或者离开图片时,图片大小会相应变化" target="_blank" href="#"> 鼠标接触或者离开图片时,图片大小会相应变化</a></li> <li> <a title="特殊的鼠标悬停提示" target="_blank" href="#"> 特殊的鼠标悬停提示</a></li> <li> <a title="CSS Sprite制作的鼠标感应网站导航条" target="_blank" href="#"> CSS Sprite制作的鼠标感应网站导航条</a></li> <li> <a title="鼠标激活显示背景色的CSS特效代码" target="_blank" href="#"> 鼠标激活显示背景色的CSS特效代码</a></li> </ul> </div> <script> function $_class(name){ var elements = document.getElementsByTagName("*"); for(s=0;s<elements.length;s++){ if(elements[s].className==name){ return elements[s]; } } } //tab effects var tabList = $_class("subMenu").getElementsByTagName("li") tabCon = $_class("subContent").getElementsByTagName("ul"); for(i=0;i<tabList.length;i++){ (function(){ var t = i; tabList[t].onclick = function(){ for(o=0;o<tabCon.length;o++){ tabCon[o].style.display = "none"; tabList[o].className = ""; if(t==o){ this.className = "thisStyle"; tabCon[o].style.display = "block"; } } } })() } </script> </bdoy> </html>
CSS+Js选项卡菜单,自适应宽度
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
隐藏在左侧的jquery弹性弹出菜单
下一篇:文章:
博客常用的jQuery滑动菜单插件
本类浏览排行 »
博客常用的jQuery滑动菜单插件
CSS+Js选项卡菜单,自适应宽度
隐藏在左侧的jquery弹性弹出菜单
js容错脚本代码
退出弹窗代码
实用的间断和不间断文本滚动效
漂亮的404错误页面
鼠标悬停改变背景色
本站推荐文章 »
漂亮的404错误页面
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效