導航:首頁 > 萬維百科 > 網頁設計半透明下拉菜單

網頁設計半透明下拉菜單

 發布時間：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>");

與網頁設計半透明下拉菜單相關的知識