當前位置：首頁 » 編程語言 » html菜單下拉菜單

html菜單下拉菜單

發布時間: 2021-03-31 02:18:16

❶ html+css+javascript 菜單單擊式下拉菜單

HTML:

<!DOCTYPEhtml>
<html>
<head>
<title>Dropdown</title>
<linkrel="stylesheet"href="style.css">
<metacharset="utf-8"/>
</head>
<body>
<ul>
<liclass="dropdown">
<aid="a"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">標題A</a>
<divclass="dropdown-content"id="dropdown-a">
<ahref="#">下拉</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
<liclass="dropdown">
<aid="b"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">標題B</a>
<divclass="dropdown-content"id="dropdown-b">
<ahref="#">下拉1</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
</ul>
<scriptsrc="script.js"></script>
</body>
</html>

CSS (style.css):

body{
font-family:"LucidaSansUnicode","LucidaGrande",sans-serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
li{
float:left;
}
lia,.dropbtn{
display:inline-block;
color:white;
text-align:center;
padding:14px16px;
text-decoration:none;
}
lia:hover,.dropdown:hover.dropbtn{
background-color:#1f75cf;
}
li.dropdown{
display:inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:#fafafa;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
}
.dropdown-contenta{
color:black;
padding:12px16px;
text-decoration:none;
display:block;
text-align:left;
}
.dropdown-contenta:hover{
color:white;
background-color:#1f75cf;
}
.show{
display:block;
}

JavaScript (script.js):

functionshowList(o){
hideList("dropdown-content"+o.id);
document.getElementById("dropdown-"+o.id).classList.toggle("show");
}


functionhideList(option){
vardropdowns=document.getElementsByClassName("dropdown-content");

for(vari=0;i<dropdowns.length;i++){
varopenDropdown=dropdowns[i];
if(openDropdown.id!=option){
if(openDropdown.classList.contains('show')){
openDropdown.classList.remove('show');
}
}
}
}


window.onclick=function(e){
if(!e.target.matches('.dropbtn')){
hideList("");
}
}

點擊標題 A：

JSFiddle 調試：jsfiddle.net/soL73u4y/2/

❷ html的下拉菜單怎麼寫

用css是可以實現這種效果，不夠要改一下HTML框架：

<divclass="A">

<divclass="B">

<ul>

<liid='li1'><ahref="webpage/about.htm">模塊1</a>

<divid="C"class="D">

<ahref="webpage/about.htm">模塊1.1</a>

<ahref="webpage/about.htm">模塊1.2</a>

<ahref="webpage/about.htm">模塊1.3</a>

<ahref="webpage/about.htm">模塊1.4</a>

</div>

</li>

</ul>

</div>

CSS樣式：

*{padding:0;margin:0;}

li{width:100px;height:30px;background:black;text-align:center;}

a{text-decoration:none;color:#fff;margin-bottom:10px;}

.Bli{float:left;}

#C{clear:both;}

#Ca{color:black;padding:8px;display:none;}

#li1:hovera{display:block;}

效果：

但以你給的HTML來看，應該是用JavaScript實現的。

❸ HTML怎麼做這個下拉菜單

select標簽實現。註：如果是聯動下拉菜單的話，需要通過js動態處理select中的option

❹ html下拉菜單怎麼寫

方法如下：

方法一：

HTML

5、定位下拉菜單，並將菜單項對齊。這將會同時去除灰色背景。

position:relative;聲明必須添加到列表項頂端。
position:absolute;聲明必須添加到相對位置定位的列表中。

❺ html+css+javascript 菜單單擊式下拉菜單怎麼弄

【方法步驟】：

寫好HTML代碼以實現下拉菜單。
CTR+S保存代碼，在瀏覽器中F5刷新網頁查看效果。

❻ html中下拉菜單

HTML中的下拉列表：

Html代碼
<select>
<option value ="1">Volvo</option>
<option value ="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>

其中select是顯示一個下拉列表(drop down list)出來，option是下拉列表中的項目(item)，而option的文本內容(text content)是下拉列表項目中顯示到頁面上的值，value是真正需要提交到服務端的值。
顯示效果如下所示：

更復雜的下拉列表：

Html代碼
<select>
<optgroup label="Swedish Cars">
<option value="1">Volvo</option>
<option value="2">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</optgroup>
</select>

這個下拉列表包含一個「項目組」(item group)，這個組是無法選擇的，使用label標簽標記字面內容，真正起作用的，還是value屬性。
看一下這個包含「項目組」的下拉列表

option中的參數：selected="selected"
如果需要打開頁面就默認選中某個option，需要用到selected參數：

Html代碼
<select>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3" selected="selected">Mercedes</option>
<option value="4">Audi</option>
</select>

option中的參數：disabled="disabled"
如果需要禁用某個項目，但是卻又不想隱藏，可以使用disabled屬性

Html代碼
<select>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3" disabled="disabled">Mercedes</option>
<option value="4">Audi</option>
</select>

option中的參數：title
如果需要在滑鼠放到某個項目上時，給出提示，可以使用title屬性

Html代碼
<select>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4" title="Audi, your best choice!">Audi</option>
</select>

其實，title也可以用在很多其他的HTML標簽中！

❼ html怎麼寫上拉菜單，我查了幾個都是下拉菜單

是這樣的效果吧？！

這是具體的代碼，用純CSS寫的，希望能幫助到你！

<!doctype html>

<html>

<head>

<title>底部菜單上彈且固定</title>

<style>

*{ margin:0; padding:0;}

body{ margin:0; padding:0; background:#f3f3f3;}

#slcd{ width:100%; height:60px; background:#09C; position:fixed; bottom:0px;}

#slcd ul,#slcd ul li{ height:60px;}

#slcd ul li{ width:24.9%; float:left; list-style-type:none; line-height:60px; text-align:center; overflow:hidden;}

#slcd ul li:hover{ background:#09F; overflow:visible;}

#zcd ul,#zcd ul li{ width:100%; height:60px; background:#09C; }

.zcd1{ margin-top:-240px; width:100%;}/*每個子菜單的上邊距需要手動調整*/

.zcd2{ margin-top:-300px; width:100%;}

.zcd3{ margin-top:-300px; width:100%;}

.zcd4{ margin-top:-120px; width:100%;}

</style>

</head>

<body>

<ul>

<li>菜單1

<ul>

</ul>

</div>

</li>

<li style="border-left:2px solid #CCC; border-right:2px solid #CCC;">菜單2

<ul>

</ul>

</div>

</li>

<li style="border-right:2px solid #CCC;">菜單3

<ul>

</ul>

</div>

</li>

<li>菜單4

<ul>

</ul>

</div>

</li>

</ul>

</div>

<div style="width:1080px; height:2000px; background:#c1c1c1; margin:0 auto; font-size:200px;"><p>希望能幫助到你</p></div>

</body>

</html>

❽ html+css下拉菜單怎麼製作

使用HTML和CSS製作下拉菜單的方法如下：

1、編寫帶有div導航的html代碼：

閱讀全文

html菜單下拉菜單

是這樣的效果吧？！

這是具體的代碼，用純CSS寫的，希望能幫助到你！

與html菜單下拉菜單相關的閱讀推薦