导航:首页 > 万维百科 > 网页设计半透明下拉菜单

网页设计半透明下拉菜单

 发布时间：2020-10-19 11:22:40

1、网页制作，慢慢下拉的菜单怎么做？

这个效果你可以通过2中途径实现，使用框架或者是使用JavaScript代码。

1.使用框架：查找框架中的二级菜单组建，如Bootstrap中的导航条中的二级菜单。下面的是一个二级下拉菜单的例子


<nav class="navbar navbar-default">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

详细内容参见http://v3.bootcss.com/components/#navbar

2.使用JavaScript代码。使用jQuery的动画实现，如slideToggle()可使元素上下滑动，并且可以使用参数控制快慢。

<script>
//ID menu是点击的以及菜单，触发的是点击事件，当然可以换成hover事件，ID submenu是二级菜单层。
$("#menu").click(function(){
    $("#submenu").slideToggle();
});
</script>

slideToggle()请参考http://www.w3school.com.cn/jquery/jquery_slide.asp

2、网页设计中如何做下拉菜单？

去找个特效来二次开发下就OK啦，比如www.lanrentuku.com上就有！

3、HTML里怎么把ul的下拉菜单的背景色宽度铺满，还有怎么把背景色设为半透明，而字不透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LOL</title>
    <style>
        html, body{margin: 0; padding: 0; color: #fff; background-color: red; width: 100%; height: 100%;}
        ul, li{list-style: none; margin: 0; padding: 0; color: #fff;}
        .clear:after{content: ''; display: block; clear: both;}
        .body:hover .bottom{display: block;}
        .top, .list{width: 100%;}
        .top{background-color: #000;}
        .bottom{position: relative; z-index: 10; display: none;}
        .top li, .list>li{width: 12.5%; float: left; line-height: 50px; text-align: center;}
        .list>li li{line-height: 30px;}
        .bg{width: 100%; height: 100%; position: absolute; background-color: #000; opacity: .5; left: 0; top: 0; z-index: -1;}
    </style>
</head>
<body>
<div class="body">
    <ul class="top clear">
        <li>英雄联盟</li>
        <li>官网首页</li>
        <li>游戏资料</li>
        <li>商城／合作</li>
        <li>用户互动</li>
        <li>赛事中心</li>
        <li>自主系统</li>
        <li>个人中心</li>
    </ul>
    <div class="bottom">
        <ul class="list clear">
            <li>logo.pic</li>
            <li>
                <ul>
                    <li>新手资料</li>
                    <li>资料库</li>
                    <li>攻略中心</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>新手资料</li>
                    <li>资料库</li>
                    <li>攻略中心</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>新手资料</li>
                    <li>资料库</li>
                    <li>攻略中心</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>新手资料</li>
                    <li>资料库</li>
                    <li>攻略中心</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>新手资料</li>
                    <li>资料库</li>
                    <li>攻略中心</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>新手资料</li>
                    <li>资料库</li>
                    <li>攻略中心</li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>新手资料</li>
                    <li>资料库</li>
                    <li>攻略中心</li>
                </ul>
            </li>
        </ul>
        <div class="bg"></div>
    </div>
</div>
</body>
</html>

把你这个例子可以分成上下两部分，因为无论上面放在哪个上面下面整体都出来，宽度的话上下的width都设置为100%即可，至于背影半透明的话，自己再加一个遮罩层定位于下面盒子里，宽高和盒子大小一样，然后z-Index设置低一点就可以了，如果只是给下面ul设置背景色的话，一旦设置透明度里面所有内容都会半透明的。

4、网页下拉菜单怎么制作

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</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;w\idth: 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].onmouseover=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].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
}
}
}
window.onload=menuFix;

//--><!]]></script>

</head>
<body>

<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<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>
<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>
<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>
<li><a href="#">我们四111</a></li>
</ul>
</li>

<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<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>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>

</ul>

</body>
</html>

5、CSS下拉半透明菜单的问题？

这个需要加上简单的js了

6、网页制作中如何做下拉菜单

在Dreamweaver中轻松实现滑动折叠菜单-太平洋电脑网
http://www.pconline.com.cn/pce/sj/wz/dreamweaver/0603/776492_2.html

Dreamweaver MX 2004简体中文版进阶教程(三)之弹出菜单-中华网科技频道
http://tech.china.com/zh_cn/netschool/homepage/dreamweaver/develop/2005061503.html

蓝色理想 - 下拉菜单全攻略
http://www.blueidea.com/tech/web/2003/301.asp

7、网页设计：下拉菜单的十几种表现形式

网页设计或者应用UI网页设计中经常会出现下拉菜单，主要是会将不常用的同类选项或者提醒放置其中，如何设计下拉菜单，网页设计出图片以及裁剪后的大小，然后后台再把这些做起来，这些作品或许能给你启发。下面先看下这些作品的设计风格，我相信会对你们有大的启发的，设计感实在是需要慢慢的积累创新的，时代进步不得不把我们带的进步。具体内容可以参看百家号

8、CSS透明下拉菜单代码

下拉菜单的样式里加,80为透明度80%
filter:alpha(opacity=80)

9、怎么让iframe半透明的显示下拉列表框(select)

使用样式css，里面有个滤镜alpha,多研究下。

10、这个网站半透明下拉菜单怎样做的呢

以下整理的代码来自楼主提提供的网站，经本人本机测试可以正常使用。

<script language="javascript" src="menu.js"></script>
<style type="text/css">
<!--

body {
font-size: 9pt;
background-color: #000;
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}

.menuskin{
position: absolute;
filter: Alpha(Opacity=80);
-Moz-Opacity:0.8;
background-color: #000;
padding-left: 20px;
border: 2px solid #666;
background-image: url(menubar.gif);
background-repeat: repeat-y;
background-position: left top;
visibility:hidden;
}.menuskin a{
display: block;
color: #FFF;
margin: 5px;
width: 80px;
padding: 3px; border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999;
}
.menuskin a:hover{
color: #000;
background-color: #EEE;
}
.menu a,.menu span{
margin-top: 3px;
background-image: url(line_02.gif);
}
.menu a,.menu span{
float: left;
color: #999;
background-repeat: no-repeat;
background-position: right center;
padding-right: 8px;
padding-left: 8px;
}

.menu a:hover{
background-color: #000;
color: #FFF;
}

-->
</style>
<!--将下面部分放到显示菜单的地方-->
<div class="menu">
<script language="javascript" src="classmenu.js"></script>
</div>

<!--以下是menu.js的内容-->
//菜单
var menuOffX=0 //菜单距连接文字最左端距离
var menuOffY=20 //菜单距连接文字顶端距离
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
function showmenu(e,vmenu,mod){
which=vmenu
menuobj=document.getElementById("popmenu")
menuobj.thestyle=menuobj.style
menuobj.innerHTML=which
menuobj.contentwidth=menuobj.offsetWidth
eventX=e.clientX
eventY=e.clientY
var rightedge=document.body.clientWidth-eventX
var bottomedge=document.body.clientHeight-eventY
if (rightedge<menuobj.contentwidth)
menuobj.thestyle.left=document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX
if (bottomedge<menuobj.contentheight&&mod!=0)
menuobj.thestyle.top=document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
menuobj.thestyle.visibility="visible"
}
function ie_y(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
function ie_x(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
function hidemenu(){if (window.menuobj)menuobj.thestyle.visibility="hidden"}
function dynamichide(e){if ((ie4||ns6)&&!menuobj.contains(e.toElement))hidemenu()}
document.onclick=hidemenu
document.write("<div class=menuskin id=popmenu onmouseover=highlightmenu(event,'on') onmouseout=highlightmenu(event,'off');dynamichide(event)></div>")
//菜单END

<!--以下是classmenu.js的内容,格式为：document.write("<a href='#' onMouseOver=\"showmenu(event,'<a href=#>二级菜单</a>')\" >主菜单</a>");-->

document.write("<a href='/xiazai/gamemuma/' onMouseOver=\"showmenu(event,'<a href=/xiazai/gamemuma/307/>推荐软件</a>')\" >常用软件</a>");
document.write("<a href='/xiazai/AnQuan/' onMouseOver=\"showmenu(event,'<a href=/xiazai/AnQuan/308/>精品源码</a><a href=/xiazai/AnQuan/326/>本站出品</a>')\" >精品源码</a>");
document.write("<a href='/xiazai/DongHua/' onMouseOver=\"showmenu(event,'<a href=/xiazai/DongHua/263/>必备最新工具</a><a href=/xiazai/DongHua/264/>精品视频教程</a><a href=/xiazai/DongHua/265/>本站出品</a>')\" >菜鸟黑客区</a>");
document.write("<a href='/xiazai/Code/' onMouseOver=\"showmenu(event,'<a href=/xiazai/Code/319/>推荐软件</a>')\" >营销软件</a>");
document.write("<a href='/xiazai/BOOK/' onMouseOver=\"showmenu(event,'<a href=/xiazai/BOOK/320/>相关教程</a><a href=/xiazai/BOOK/321/>所用工具</a>')\" >刷QQ业务专区</a>");

与网页设计半透明下拉菜单相关的知识