導航:首頁 > 萬維百科 > 網頁設計下拉列表菜單

網頁設計下拉列表菜單

 發布時間：2020-11-18 23:51:13

1、網頁設計：下拉菜單的十幾種表現形式

網頁設計或者應用UI網頁設計中經常會出現下拉菜單，主要是會將不常用的同類選項或者提醒放置其中，如何設計下拉菜單，網頁設計出圖片以及裁剪後的大小，然後後台再把這些做起來，這些作品或許能給你啟發。下面先看下這些作品的設計風格，我相信會對你們有大的啟發的，設計感實在是需要慢慢的積累創新的，時代進步不得不把我們帶的進步。具體內容可以參看百家號

2、網站製作如何實現下拉菜單前面的小三角

正好我這里有素材：下面的代碼是右三角，放上去是左三角，直接復制即可。

全css控制，無需使用圖片。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>/*css三角，均是向下f方向*/
<style type="text/css">
i{ cursor:pointer;}
.mark1{display:inline-block; width:0px; height:0px;border-width:4px; border-style:dashed; overflow:hidden;border-color:transparent transparent transparent #666;}
.menu1{display:inline-block; padding:2px 8px; border:1px solid #fff; color:#333;}
.menu1:hover{background-color:#f5f5f5; border:1px solid #ccc; text-decoration:none;}
.menu1:hover .mark1{border-style:dashed;border-color:transparent #666 transparent transparent;border-width:4px; margin-bottom:3px;}
</style>
</head>
<body>
<a href="javascript:void(0);" class="menu1"><i class="mark1"></i>企業需求</a>
</body>
</html>

主要是通過border-color:transparent transparent transparent #666;來控制三角方向

3、製作網頁下拉菜單的代碼是什麼

第1步：將下列代碼復制到網頁的標簽之間：
第2步：將下面的代碼復制到標簽的右邊，位置緊挨著標簽：
第3步：添加菜單的內容。編輯menucontext.js文件，所有的菜單選項都在這里設置。默認的menucontext.js裡面的內容，比較復雜我現在把代碼精簡出來。給大家做一個說明。整個代碼如下： function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location);
//主菜單定義
menu = new Menu();
menu.addItem("multimedia", "多媒體", "多媒體軟體", null, null);
menu.addItem("image", "圖像處理", "圖像處理軟體", null, null);
//多媒體子菜單定義
menu.addSubItem("multimedia", "凡人網路", "凡人網路", "http://www.venshop.com");
menu.addSubItem("multimedia", "我要網上開店", "我要網上開店", "http://www.venshop.com");
//圖像處理子菜單定義
menu.addSubItem("image", "開店系統", "開店系統", "http://www.venshop.com");
menu.addSubItem("image", "網上開店系統", "網上開店系統", "http://www.venshop.com");
menu.addSubItem("image", "網上購物系統", "網上購物系統", "http://www.venshop.com");
//結束菜單定義
menu.showMenu();
}
上面的例子中製作的是一個有兩個主菜單的菜單。一個主菜單為多媒體，一個主菜單為圖像處理。主要靠兩個命令來製作Additem為添加主菜單項目。格式為AddItem(菜單標記, 文本說明, 文本提示, 位置,替換位置)。AddSubItem為添加子菜單項目，idparent為主菜單的菜單標記，其餘同前。
第4步：上傳菜單文件。將 menu.js和menucontext.js文件上傳到和網頁文件同一目錄下。這樣就完成了所有的操作。
菜單安裝的一些善後工作：
安裝了菜單之後，如果需要將菜單完全與網頁頂部和左邊緊密結合的話，你可以把標簽修改成為。
或許大家會對菜單里的文字感到不滿意。你可以把製作菜單第一步的CSS代碼進行修改。比如
將裡面的字體大小換成了10.5磅的話，中文字就會簡潔干凈多了。
同樣如果對菜單的表格感到不滿意的話，可以修改menu.js文件中的代碼例如：
function Menu()
{
this.bgColor = "#008080";
if (ie) this.menuFont = "bold xx-small Verdana";
if (n) this.menuFont = "bold x-small Verdana";
// this.fontColor = "white";
this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0;
this.bgcolor 修改的是菜單屬性
this.mainPaneBorder 修改的是主菜單的邊框寬度
this.subMenuPaneBorder 修改的是子菜單的邊框寬度。

4、急 網頁設計下拉菜單不顯示？

<style type="text/css">
*{margin:0px; padding:0px;}
#nav{ width:900px; height:40px; margin:0 auto;}
#nav ul{ list-style:none;}
#nav ul li{ float:left; line-height:40px; text-align:center; position:relative;}
#nav ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;}
#nav ul li a:hover{ color:#FFF; background:#333}
#nav ul li ul{ position:absolute; display:none;}
#nav ul li ul li{ float:none; line-height:30px; text-align:left;}
#nav ul li ul li a{ width:100%;}
#nav ul li ul li a:hover{ background-color:#06f;}
#nav ul li:hover ul{ display:block}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="https://www.baidu.com" target="_blank">百度首頁</a></li>
<li><a href="#">百度知道答題</a>
<ul>
<li><a href="#">這怎麼寫?</a></li>
<li><a href="#">第一個程序?</a></li>
</ul>
</li>
<li><a href="#">知道個人中心</a>
<ul>
<li><a href="#">電話:123456789</a></li>
<li><a href="#">郵箱:[email protected]</a></li>
</ul>
</li>
</ul>
</div>
</body>

5、網頁下拉菜單怎麼製作

<!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>

6、網頁製作，慢慢下拉的菜單怎麼做？

這個效果你可以通過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

7、如何在 HTML 頁面中創建簡單的下拉列表框

select標簽可以創建下拉列表，列入

  <select>
    <option value="1">我是下拉項目1</option>
    <option value="2">我是下拉項目2</option>
    <option value="3">我是下拉項目3</option>
    <option value="4">我是下拉項目4</option>
  </select>

與網頁設計下拉列表菜單相關的知識