网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
用简单的脚本实现一款漂亮的下拉菜单
(编辑:jimmy 日期: 2024/10/14 浏览:
2
)
一次偶然而无聊的实验,发现了这样的写下拉菜单的方式。完成作品后的愉悦心情,就像阿基米德泡浴缸却发现了浮力原理!
NAME:Stupid CAT Pull-down Menu v1.0
SUPPORT:Ie(√) Firefox(√)
STANDARD:XHTML 1.0 Strict / CSS2.0
核心样式:
复制代码
代码如下:
html,body{
background:#000000;
height:100%;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#333333;
margin:20px auto;
overflow:hidden;
text-align:center;}
/*菜单容器menu*/
div#menu{
width:100%;
height:34px;
padding:0px 0px 0px 5px;}
/*一级菜单*/
div#menu div{
width:125px;
height:20px;
float:left;
text-transform:capitalize;
background:#cccccc;
padding:5px 0px 0px 0px;
margin:4px 1px 0px 0px;}
/*二级菜单*/
div#menu div div{
width:125px;
height:20px;
border-bottom:1px #333333 solid;
background:#666666;
margin-top:-4px;
cursor:pointer;
display:none;}
/*二级菜单中特殊样式(可选)*/
div#menu div div.div1{
margin-top:3px;
border-top:1px #333333 solid;}
核心代码:
复制代码
代码如下:
var menuItem=document.getElementById("menu").getElementsByTagName("div");
for(i=0;i<menuItem.length;i++){
menuItem[i].onmouseover=function(){
var subMenu=this.getElementsByTagName("div");
for(j=0;j<subMenu.length;j++){
subMenu[j].style.display="block";
subMenu[j].onmouseover=function(){this.style.background="#999999";this.style.color="#000000";};
subMenu[j].onmouseout=function(){this.style.background="#666666";this.style.color="#333333";};}
this.style.background="#666666"};
menuItem[i].onmouseout=function(){
var subMenu=this.getElementsByTagName("div");
for(j=0;j<subMenu.length;j++){
subMenu[j].style.display="none";}
this.style.background="#cccccc"};
}
Stupid CAT Pull-down Menu v1.0
menu item1sub menu1sub menu2sub menu3sub menu4 menu item2sub menu1sub menu2sub menu3 menu item3sub menu1sub menu2 menu item4sub menu1sub menu2sub menu3sub menu4 menu item5sub menu1sub menu2sub menu3 menu item6sub menu1sub menu2sub menu3
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上一篇:
建立完全独立的JS对象
下一篇:
用 JavaScript 迁移目录
最新资源
白嘉倩.1992-我有我【星工厂】【WAV+CUE】
黎明.2006-LOOKING【东亚唱片】【WAV+CUE】
群星.1986-国语金曲尽精英【瑞成】【WAV+CUE】
長渕剛《Blood》[FLAC/分轨][299.09MB]
群星《歌手2024 第4期》[320K/MP3][107.39MB]
群星《歌手2024 第4期》[FLAC/分轨][563.76MB]
RiffKitten-ChaosParade(2024)[24-44,1]FLAC
RuneKlakegg-Nattevandrer(2024)[24-96]\FLAC
赖冰霞.2006-金嗓典藏辑2IN1(南方金点系列)2CD【
群星.1988-国语金曲尽精英VOL.2【瑞成】【WAV+C
首页
音乐
电影
资源