CSS+DIV+Javascript制作滑动门菜单技术

css|javascript|菜单

<style>body {font-size:12px;font-family:宋体}ul.TabBarLevel1{list-style:none;margin:0;padding:0;height:29px;background-image:url(20060409082237_tabbar_level1_bk.gif);}ul.TabBarLevel1 li{float:left;padding:0;height:29px;margin-right:1px;background:url(20060409082248_tabbar_level1_slice_left_bk.gif) left top no-repeat;}ul.TabBarLevel1 li a{display:block;line-height:29px;padding:0 20px;color:#333;background:url(20060409082257_tabbar_level1_slice_right_bk.gif) right top no-repeat;white-space: nowrap;}ul.TabBarLevel1 li.Selected{background:url(20060409082312_tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;}ul.TabBarLevel1 li.Selected a{background:url(20060409082323_tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;}ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{color:#333;}ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{color:#F30;text-decoration:none;}ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{color:#000;}ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{color:#F30;text-decoration:none;}div.HackBox { padding : 2px 2px ; border-left: 2px solid #6697CD; border-right: 2px solid #6697CD; border-bottom: 2px solid #6697CD; display:none;}</style><div id="Whatever"><ul class="TabBarLevel1" id="TabPage1"><li id="Tab1"><a href="#" >宝贝详情</a></li><li id="Tab2" class="Selected"><a href="#" >其他信息</a></li><li id="Tab3"><a href="#" >出价记录</a></li><li id="Tab4"><a href="#" >留言簿</a></li></ul><div id="cnt"><div id="dTab1" class="HackBox">代码如下: <!--这里放入信息--> 哈哈哈哈1</div><div id="dTab2" class="HackBox" style="display:block">代码如下: <!--这里放入信息--> 哈哈哈哈2</div><div id="dTab3" class="HackBox">代码如下: <!--这里放入信息--> 哈哈哈哈3</div><div id="dTab4" class="HackBox">代码如下: <!--这里放入信息--> 哈哈哈哈4</div></div></div><script language="JavaScript">//Switch Tab Effectfunction switchTab(tabpage,tabid){ var oItem = document.getElementById(tabpage); for(var i=0;i<oItem.children.length;i++){var x = oItem.children(i);x.className = "";var y = x.getElementsByTagName('a');y[0].style.color="#333333";}document.getElementById(tabid).className = "Selected";var dvs=document.getElementById("cnt").getElementsByTagName("div");for (var i=0;i<dvs.length;i++){ if (dvs[i].id==('d'+tabid)) dvs[i].style.display='block'; else dvs[i].style.display='none';}}</script>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2024-10-31 00:29:25

CSS+DIV+Javascript制作滑动门菜单技术的相关文章

CSS实现当前页的滑动门菜单效果方法

css|菜单 当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不 同,用以给浏览者一个明显的指示. 下面来说下具体的做法,菜单的基本实现和一般的CSS菜单没多大区别,着重说下如何 实现当前页. 设菜单有5个栏目:home.about.products.services.contact,分别给每个栏目一 个ID,m1-m5,CSS可写成如下: CSS源代码: #home #nav li#m1 a, #about #nav li#m2 a, #products #nav 

JS+CSS实现自动切换的网页滑动门菜单效果代码_javascript技巧

本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code

JS+CSS实现简易实用的滑动门菜单效果_javascript技巧

本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希望这款滑动门大家能够喜欢,也希望研究JS的达人一同切磋,共同提高. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-useful-menu-codes/ 具体代码如下: <html> <head> <t

css滑动门菜单 兼容多浏览器

   代码如下 复制代码 <title>一款兼容性非常好的css滑动门菜单</title> <style type=text/css media=screen> <!-- *{font-size:12px;} ul{list-style-type:none; margin:0px;} .ttl{height:18px;} .ctt{height:auto;padding:6px;clear:both} .w936{width:100%;margin:2px 0;c

jquery实现标题字体变换的滑动门菜单效果_jquery

本文实例讲述了jquery实现标题字体变换的滑动门菜单效果.分享给大家供大家参考.具体如下: 这里使用jquery字体会变大的网页滑动门菜单,当把鼠标放在"门"上的时候,门内的菜单字体会变大变色,对应的内容同时切换,不知如何形容本效果,所以就叫字体会变的滑动门吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-font-cha-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html

js实现简洁的滑动门菜单(选项卡)效果代码_javascript技巧

本文实例讲述了js实现简洁的滑动门菜单.分享给大家供大家参考.具体如下: 一个简洁实用的网页选项卡菜单,在同一个页面中实现两个选项卡,第一个是滑动门,从布局上来说基本是相似的,第二个是选项卡,这里主要使用了Js自定义函数:tabMenu,函数功能:实现tab菜单,参数说明:tabMenu(tabBox,navClass); 参数一:tabBox(tab容器id) 参数二:navClass(当前标签样式class) 备注:依赖指定html结构. 运行效果截图如下: 在线演示地址如下: http:/

JS+CSS实现简易的滑动门效果代码_javascript技巧

本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

JS实现具备延时功能的滑动门菜单效果_javascript技巧

本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP

css结合js制作下拉菜单的具体实现

 这篇文章主要介绍了css结合js制作下拉菜单的具体实现,需要的朋友可以参考下  代码如下: <%@page pageEncoding="utf-8"  contentType="text/html;charset=utf-8" %>    <HTML>  <HEAD>  <title>WebForm5</title>    <style>/* Root = Horizontal, Second