当前位置：首页 » 编程语言 » 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菜单下拉菜单相关的阅读推荐