常用的css弹出菜单

最新推荐文章于 2020-05-02 17:15:49 发布
最新推荐文章于 2020-05-02 17:15:49 发布
阅读量80 收藏
点赞数
文章标签： xhtml c#
原文链接：http://www.cnblogs.com/nine425/archive/2007/06/29/799796.html
版权
常用的css弹出菜单

水平方向弹出菜单
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="test.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}

#nav {
line-height: 24px; list-style-type: none; background:#666;
}

#nav a {
display: block; width: 80px; text-align:center;
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}

#nav li ul a{
display: block; width: 180px;width: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;
}

#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
</style>
   
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix()
{
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++)
    {
        sfEls[i].οnmοuseοver=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseDown=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseUp=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].οnmοuseοut=function()
        {
            this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
        }
    }
}
window.οnlοad=menuFix;
//--><!]]>
</script>
 
</head>
<body>
    <form id="form1" runat="server">
<div>       
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例一</a></li>
<li><a href="#">案例二</a></li>
<li><a href="#">案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们一</a></li>
<li><a href="#">我们二</a></li>
<li><a href="#">我们三</a></li>
</ul>
</li>
</ul>
</div>       
    </form>
</body>
</html>


垂直方向弹出菜单
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="test.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}

#nav {
line-height: 24px; list-style-type: none; background:#666; width:80px;
}

#nav a {
display: block; width: 80px; text-align:center;
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
/*float: left*/; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}

#nav li ul a{
display: block; width: 180px;width: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;
}

#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#nav li.sfhover a {
float:left;
}
#content {
clear: left;
} 
</style>
   
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix()
{
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++)
    {
        sfEls[i].οnmοuseοver=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseDown=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseUp=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].οnmοuseοut=function()
        {
            this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
        }
    }
}
window.οnlοad=menuFix;
//--><!]]>
</script>

</head>
<body>
    <form id="form1" runat="server">
<div>       
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例一</a></li>
<li><a href="#">案例二</a></li>
<li><a href="#">案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们一</a></li>
<li><a href="#">我们二</a></li>
<li><a href="#">我们三</a></li>
</ul>
</li>
</ul>
</div>        
    </form>
</body>
</html>

弹簧式
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="test.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}

#nav {
line-height: 24px; list-style-type: none; background:#666; width:80px;
}

#nav a {
display: block; width: 80px; text-align:center;
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
/*float: left*/; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 80px; position: absolute;
}
#nav li ul li{
float: left; width: 80px;
background: #F6F6F6;
}

#nav li ul a{
display: block; width: 80px;width:56px;text-align:left;padding-left:24px;
}

#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00;
}

#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;position:static;
}
#content {
clear: left;
}  
</style>
   
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix()
{
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++)
    {
        sfEls[i].οnmοuseοver=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseDown=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseUp=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].οnmοuseοut=function()
        {
            this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
        }
    }
}
window.οnlοad=menuFix;
//--><!]]>
</script>

</head>
<body>
    <form id="form1" runat="server">
<div>       
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例一</a></li>
<li><a href="#">案例二</a></li>
<li><a href="#">案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们一</a></li>
<li><a href="#">我们二</a></li>
<li><a href="#">我们三</a></li>
</ul>
</li>
</ul>
</div>        
    </form>
</body>
</html>

二级菜单为水平的(方案一)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="test.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}

#nav {
line-height: 24px; list-style-type: none; background:#666;
}

#nav a {
display: block; width: 80px; text-align:center;
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 980px; position: absolute; float:left;
}
#nav li ul li{
float: left; width: 80px; background: #F6F6F6;
}

#nav li ul a{
display: block; width: 80px;text-align:center;
}

#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00;
}

#nav li:hover ul {
left: 0;
}
#nav li.sfhover ul {
left: 0;
}
#content {
clear: left;
}
</style>
   
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix()
{
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++)
    {
        sfEls[i].οnmοuseοver=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseDown=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseUp=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].οnmοuseοut=function()
        {
            this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
        }
    }
}
window.οnlοad=menuFix;
//--><!]]>
</script>

</head>
<body>
    <form id="form1" runat="server">
<div>       
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例一</a></li>
<li><a href="#">案例二</a></li>
<li><a href="#">案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们一</a></li>
<li><a href="#">我们二</a></li>
<li><a href="#">我们三</a></li>
</ul>
</li>
</ul>
</div>        
    </form>
</body>
</html>

二级菜单为水平的(方案二)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="test.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}

#nav {
line-height: 24px; list-style-type: none; background:#666;
}

#nav a {
display: block; width: 80px; text-align:center;
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 980px; position: absolute; float:left;
}
#nav li ul li{
float: left; width: 80px; background: #F6F6F6;
}

#nav li ul a{
display: block; width: 80px;text-align:center;
}

#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00;
}

#nav li:hover ul {
left:auto;
}
#nav li.sfhover ul {
left:auto;
}
#content {
clear: left;
}
</style>
   
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix()
{
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++)
    {
        sfEls[i].οnmοuseοver=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseDown=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].onMouseUp=function()
        {
            this.className+=(this.className.length>0? " ": "")+"sfhover";
        }
        sfEls[i].οnmοuseοut=function()
        {
            this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
        }
    }
}
window.οnlοad=menuFix;
//--><!]]>
</script>

</head>
<body>
    <form id="form1" runat="server">
<div>       
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例一</a></li>
<li><a href="#">案例二</a></li>
<li><a href="#">案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们一</a></li>
<li><a href="#">我们二</a></li>
<li><a href="#">我们三</a></li>
</ul>
</li>
</ul>
</div>        
    </form>
</body>
</html>

媲美Flash的JS导航菜单一
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css 菜单</title>
<style>
body{
 background-color:#B8B8A0;
 }
#fbtn{
 display:none;
 overflow:hidden;
 border-style:solid;
 border-width:1px;
 border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
 padding:1 1 1 1;
 width:115px;
 height:30px;
 }
#fbtn_txt{
 position:relative;
 }
#fbtn_txt div{
 height:30px;
 padding-top:11px;
 font-size:9px;
 font-family:small fonts;
 color:#800080;
 text-align:center;
 cursor:hand;
 }
#fbtn_mask{
 background-color:#ffffff;
 position:relative;
 width:100%;
 height:100%;
 }
</style>

</head>

<body>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>G1</div>
 <div>good morning</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>G2</div>
 <div>good evening</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>M1</div>
 <div>my name is fireyy</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>M2</div>
 <div>mm mm i love u</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>G1</div>
 <div>good morning</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>G2</div>
 <div>good evening</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>M1</div>
 <div>my name is fireyy</div>
 </div>
</div>
<div id=fbtn>
 <div id=fbtn_mask></div>
 <div id=fbtn_txt>
 <div>M2</div>
 <div>mm mm i love u</div>
 </div>
</div>

<script>
var current=null;
var t=null;
for(var i=0;i<fbtn.length;i++){
 fbtn_txt[i].style.posTop=-30;
 fbtn_mask[i].style.posTop=-30;
 fbtn[i].index=i;
 fbtn[i].style.display="block";
 fbtn[i].οnmοuseοver=function(){
 if(!current){
 current=this;
 domove(this.index);
 }
 else if(current!=this){
 domove(current.index);
 domove(this.index);
 current=this;
 }
 }
 fbtn[i].οnmοuseοut=function(){
 if(event.toElement==this.parentElement&t==this){
 domove(this.index);
 current=null;
 }
 }
 }
function domove(num){
 var o=fbtn_txt[num];
 var m=fbtn_mask[num];
 if(o.style.posTop<-60){
 o.style.display="none";
 var t=o.children[1].innerHTML;
 o.children[1].innerHTML=o.children[0].innerHTML;
 o.children[0].innerHTML=t;
 o.style.posTop=-30;
 o.style.display="block";
 if(m.style.posTop>30)
 m.style.posTop=-30;
 else
 m.style.posTop=0;
 }
 else{
 m.style.posTop+=3;
 o.style.posTop-=3;
 setTimeout('domove('+num+')',15);
 }
 }
</script>
</body>
</html>

posted on 2007-06-29 10:28 ms_dos 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/nine425/archive/2007/06/29/799796.html

weixin_30571465
关注
js+css实现的简易弹出式菜单(第二版模仿ibm开发中心的菜单)
03-14
NULL 博文链接：https://hrtc.iteye.com/blog/261886
纯CSS(无JS)实现的二级弹出菜单效果代码
12-13
本文实例讲述了纯CSS(无JS)实现的二级弹出菜单效果代码。分享给大家供大家参考。具体如下： 这是一款采用纯CSS(无JS)制作的二级弹出菜单，你会发现这款菜单并没有使用JavaScript代码，也没有引用外部文件，但是它却...
Css弹出菜单样式
总有那么一群人喜欢盯着我的博客看，估计这是他们见过最长的博客名，我必须得告诉他们博客名最长可以写多长
02-24 564
.tishi{ position:relative; /*这个是关键*/ z-index:2; font-size: 80% ; } .tishi:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ } .tishi span{ display: none; } .tishi:hover span{ /
5款纯div+css制作的弹出菜单(标准且无js)
央视网商城,srnpr,刘东普,三点一笑的专栏
07-28 1094
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU/* common styling *//* set up the overall widt
div+css制作的弹出菜单(标准且无js)
huangyinkuck
12-23 552
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">三级dropdown弹出菜单/* common styling */.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0
CSS弹出菜单
07-19 304
CSS弹出菜单 一款灰色风格的CSS弹出菜单，美化一般，重要是突出功能和实现方法，为CSS爱好者提供一份二级弹出菜单的样例，整体效果不错，兼容性也说得过去，高手可以继续完善。 <!DOCTYPE html PUBLIC "-//W3C//DTD XH...
利用transform实现一个纯CSS弹出菜单的示例代码
11-19
在本文中，我们将探讨如何利用CSS3的`transform`属性实现一个纯CSS的弹出菜单。这种技术不仅简化了代码，还提高了性能，因为避免了对JavaScript的依赖。 首先，让我们回顾一下`transform`属性的基本概念。在CSS中，...
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
10-24
通过以上的知识点介绍，我们可以了解到如何使用CSS和JavaScript来实现一个简单的网页交互功能——点击文字后弹出一个可自动关闭的DIV层菜单。这个例子不仅涉及了基本的HTML标签使用、CSS样式设置，还包含了...
CSS3点击冒泡菜单弹出动画特效
06-24
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是本文所提及的“CSS3点击冒泡菜单弹出动画特效”。这种特效通常用于导航菜单或操作提示，当用户点击某个图标时，会以...
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
10-31
### 编写纯CSS弹出菜单的原理及实现 #### 摘要 本文由shawl.qiu撰写，主要介绍了如何使用CSS技术来创建适用于多种浏览器（如Opera、Firefox、IE）的弹出式菜单。文章重点讲解了利用CSS属性（如`display`和`:hover`...
向上弹出式菜单（css+js）
05-09
一个简单的向上弹出式菜单！ 当鼠标移到上面后显示菜单， 当鼠标移开后不显示菜单！ 达到一个隐藏的效果！
利用CSS、Jquery和div实现的横弹出菜单
王洪伟的专栏
12-31 2737
1、页面 我的菜单 计算机分类 出版社分类 出版日期分类 编程语言 Java .net C/C++ PHP Python Javascript Object-C Perl Shell 操作系统 Linux Windows Mac Unix 数据库 M
【css】触发弹出围绕菜单
夜雨Gecer的博客
09-09 474
说的可能比较绕口上效果 效果： 效果的实现主要就是用到了 两个效果 一个是过度 一个是2d转换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ...
几款纯div+css制作的弹出菜单标准且无js
yjp2006的专栏
06-14 783
1.内容不会挤跑 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" l
CSS之二级弹出菜单设计
码说芯语的博客
05-02 358
1、css里面两种隐藏方式： （1） display: none;不占用物理空间 (2)visibility:hidden;占用物理空间 2、选择器： 1、后代选择器：``.aside ul li{ }` 2、子代选择器：.aside ul > li{ }` 3、邻代选择器：`.aside ul + li{ }` 3、CSS之伪元素案例： .sub-nav:bef...
纯CSS弹出菜单实现详解
"编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu" 在网页设计中，创建交互式用户体验的一个重要元素是弹出菜单。本文由 shawl.qiu 提供，详细阐述了如何利用纯 CSS 实现适用于 Opera、Firefox 和 IE 浏览器的弹出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值