一个更加高级的CSS菜单,绝对实用,超强的 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

一个更加高级的CSS菜单,绝对实用,超强的

深山行者个人网站 2008/6/24 12:55:26 深山行者字体:大中小浏览 4266

以下为详细代码

/*______________01号标签_____________*/
/*大栏目样式*/
.bigmenu00 {float:left;}
.bigmenu00 li {line-height:32px;width:80px;}
.bigmenu01 {border:solid 1px #ffb435;background:#fff;color:#fe8939;}
.bigmenu02 {border:solid 1px #ffb435;background:#fcf1eb;color:#fe8939;}

/*小栏目样式*/
.sallmenu00 {float:left;}
.sallmenu00 li {line-height:28px;}
.sallmenuall {color:#787878;font-weight:bold;}

/*______________02号标签_____________*/
/*大栏目样式*/
.bmenu00 {float:left;}
.bmenu00 li {line-height:32px;width:80px;}
.bmenu01 {border:solid 1px #fff;background:green;color:#fe8939;}
.bmenu02 {border:solid 1px #fff;background:red;color:#fe8939;}

/*小栏目样式*/
.smenu00 {float:left;}
.smenu00 li {line-height:28px;}
.smenuall {color:green;background:#f0f0f0;font-weight:bold;}

/*______________03号标签_____________*/
/*大栏目样式*/
.b3menu00 {float:left;}
.b3menu00 li {line-height:32px;width:80px;}
.b3menu01 {border:solid 2px green;background:#fff;color:green;font-weight:bold;}
.b3menu02 {border:solid 2px red;background:#fff;color:red;font-weight:bold;}

/*小栏目样式*/
.s3menu00 {float:left;}
.s3menu00 li {line-height:28px;}
.s3menuall {color:#fff;background:#000;font-weight:bold;}

.fn12bold {font-weight:bold;color:#fdd0b1;font-size:16px;}

</style>
一个更加高级的CSS菜单,绝对实用,超强的
                   
<script type="text/javascript">
var oldobjul = new Array(1, 1, 1, 1); //历史选中ul和li选中对象索引

// m 选中第m个li对象索引
// n 显示第n个ul对象索引
// cname 样式名称通用对象, 例:选中状态 class01, 未选中状态 class02, 即cname为class0            
function setTab(m, n, cname)  
{
 if (m != null && n != null && cname != null)
 {
  if (oldobjul[m] != null)
  {
   var oldli = document.getElementById("li" + m.toString() + oldobjul[m].toString());
   var oldul = document.getElementById("ul" + m.toString() + oldobjul[m].toString());
   oldli.className = cname + "2";
   oldul.style.display = "none";
  }
  
  var li = document.getElementById("li" + m.toString() + n.toString());
  var ul = document.getElementById("ul" + m.toString() + n.toString());
  li.className = cname + "1";
  ul.style.display = "block";
  oldobjul[m] = n;
 }
}
</script>     
        
 
<ul class="bigmenu00">                        
 <li id="li01" class="bigmenu01" onmouseover="setTab(0, 1, 'bigmenu0')"><span class="fn12bold">01</span>我要推荐</li>
 <li id="li02" class="bigmenu02" onmouseover="setTab(0, 2, 'bigmenu0')"><span class="fn12bold">02</span>我要查找</li>
 <li id="li03" class="bigmenu02" onmouseover="setTab(0, 3, 'bigmenu0')"><span class="fn12bold">02</span>第三个</li>
 <li id="li04" class="bigmenu02" onmouseover="setTab(0, 4, 'bigmenu0')"><span class="fn12bold">02</span>这是4444</li>     
</ul>

<ul id="ul01" class="sallmenu00">                        
 <li class="sallmenuall">我要向360500推荐我的商铺</li> 
</ul>

<ul id="ul02" class="sallmenu00" style="display:none;">                        
 <li class="sallmenuall">查找感兴趣的商铺</li>                  
</ul>

<ul id="ul03" class="sallmenu00" style="display:none;">                        
 <li class="sallmenuall">三三三三三三三三三三三三</li>                  
</ul>

<div style="clear:both;float:left;">
<ul class="bmenu00">                        
 <li id="li11" class="bmenu01" onmouseover="setTab(1, 1, 'bmenu0')"><span class="fn12bold">01</span>我要推荐</li>
 <li id="li12" class="bmenu02" onmouseover="setTab(1, 2, 'bmenu0')"><span class="fn12bold">02</span>我要查找</li>
 <li id="li13" class="bmenu02" onmouseover="setTab(1, 3, 'bmenu0')"><span class="fn12bold">02</span>第三个</li>
 <li id="li14" class="bmenu02" onmouseover="setTab(1, 4, 'bmenu0')"><span class="fn12bold">02</span>这是4444</li>             
</ul>

<ul id="ul11" class="smenu00">                        
 <li class="smenuall">1111111</li> 
</ul>
<ul id="ul12" class="smenu00" style="display:none;">                        
 <li class="smenuall">2222222</li> 
</ul>
<ul id="ul13" class="smenu00" style="display:none;">                        
 <li class="smenuall">3333333</li> 
</ul>
<ul id="ul14" class="smenu00" style="display:none;">                        
 <li class="smenuall">我要向360500推荐我的商铺</li> 
</ul>

<div style="clear:both;float:left;position:absolute;top:300px;">
<ul class="b3menu00">                        
 <li id="li21" class="b3menu01" onmouseover="setTab(2, 1, 'b3menu0')"><span class="fn12bold">01</span>我要推荐</li>
 <li id="li22" class="b3menu02" onmouseover="setTab(2, 2, 'b3menu0')"><span class="fn12bold">02</span>我要查找</li>
 <li id="li23" class="b3menu02" onmouseover="setTab(2, 3, 'b3menu0')"><span class="fn12bold">02</span>第三个</li>
 <li id="li24" class="b3menu02" onmouseover="setTab(2, 4, 'b3menu0')"><span class="fn12bold">02</span>这是4444</li>
</ul>

<ul id="ul21" class="s3menu00">                        
 <li class="s3menuall">aaaaa</li> 
</ul> 
<ul id="ul22" class="s3menu00" style="display:none;">                        
 <li class="s3menuall">bbbbb</li> 
</ul>
<ul id="ul23" class="s3menu00" style="display:none;">                        
 <li class="s3menuall">ccccc</li> 
</ul>
<ul id="ul24" class="s3menu00" style="display:none;">                        
 <li class="s3menuall">我要向360500推荐我的商铺</li> 
</ul>

<div style="clear:both;float:left;position:absolute;top:300px;">
<ul class="b3menu00">                        
 <li id="li31" class="b3menu01" onmouseover="setTab(3, 1, 'b3menu0')"><span class="fn12bold">01</span>我要推荐</li>
 <li id="li32" class="b3menu02" onmouseover="setTab(3, 2, 'b3menu0')"><span class="fn12bold">02</span>我要查找</li>
</ul>

<ul id="ul31" class="s3menu00">                        
 <li class="s3menuall">aaaaa</li> 
</ul> 
<ul id="ul32" class="s3menu00" style="display:none;">                        
 <li class="s3menuall">bbbbb</li> 
</ul>

前一页:另外的一种单项的选择

后一页:另外一种符合web2.0的链接打开方式--利用base打开链接

相关阅读: HTML文档中meta标签的作用; 深山留言板系统 v3.5; 倒计时广告/始终保持在网页中部; 绝对管用的Swishmax (Flash制作) 绿色特别版下载; 安卓版微信中播放视频不自动全屏; divcss范例下载; asp利用正则检查手机端的浏览器标识来确定是否是手机访问如果是手机访问就使用手机模板; CSS中的单位一览包括宽度尺寸单位颜色单位角度单位

共有0条关于《一个更加高级的CSS菜单,绝对实用,超强的》的评论: 发表评论

正在加载评论......

返回顶部发表评论

呢称:
表情:
内容:	评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码:

网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery设置或获取修改classname; 利用css3.0写出一个音乐播放的唱片碟盘的效果; 利用css中的scale()实现放大缩小效果; 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明; css背景使用base64编码或者将base64编码放在img图片标签中; 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 利用javascript高亮关键词并且加上链接系列 2; 静态网站利用微信URL Scheme生成的ticket从浏览器h5跳到微信小程序完整代码; 了解html基础知识之html标签集合; 华东宾馆网站; 深山留言板2.14情人节留言板模板v4.8; python里面requests.post返回的res.text还有其它的吗

更多标签热门标签

美化 web2.0 青春 ul 模仿特效弹窗手 xhtml 许愿墙淘宝创建改变 Dreamweaver label ResponseXML 组件舒服按钮浮动 iframe 窗口自适应高度 flash outerHTML 层高酷 ie css 透明想 DIV+CSS做的透明菜单兼容IE、FF等长配色 weatherxml ie6 小偷台历案例 ie5.5 宽 PSD flush 蓝色理想左右优化上下左右 rnd 名称下划线