gpt4 book ai didi

html - 屏幕分辨率低时如何创建下拉菜单?

转载 作者:太空宇宙 更新时间:2023-11-04 10:30:56 27 4
gpt4 key购买 nike

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" href="css/bootstrap.css" rel="stylesheet">
<link type="text/javascript" href="js/bootstrap.js">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style>



@media screen and (max-width: 600px) {

ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #fff; width: 100%}
li ul {display: none;}
ul li a {display: block;background: #808080;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff; width: 100%}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;width: 100%;z-index: 1}
li:hover li {float: none; }
li:hover a {background: #0026ff;}
li:hover li a:hover {background: #4800ff;}
#drop-nav li ul li {border-top: 0px;}
#s{float: left;position: relative;width: 100%}
}
</style>

</head>
<body>
<div style="float: left" id="s">
<ul id="drop-nav">
<li><a href="#">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
</ul>
</div>

<div style="float: right" id="s"> <ul id="drop-nav">
<li><a href="#">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
</ul></div>

<div style="float: right;position: relative" id="s"> <ul id="drop-nav">
<li><a href="#">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
</ul></div>
<br><br><br><br>


</div>
</body>
</html>

我希望将此列表转换为下拉菜单并单击它,我尝试了此逻辑并搜索了 Bootstrap 类,但没有找到任何内容。我希望它像 bootstrap 的导航栏一样工作,因为当屏幕分辨率低时它会转换为下拉菜单并在点击时工作。

enter image description here

enter image description here

最佳答案

首先阅读Difference between id and class可能是您的代码因此而无法正常工作。我只是用bootstrap collapse在你的代码中,它对我来说工作正常,我只是用类和一些 css 更改 id,你可以将你的代码与它进行比较。

  ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border: 1px solid #fff;
width: 100%
}
li ul {
display: none;
width: 100%;
z-index: 1
}
ul li a {
display: block;
background: #808080;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
width: 100%
}
ul li a:hover {
background: #f00;
}
li:hover li {
float: none;
}
li:hover a {
background: #0026ff;
}
li:hover li a:hover {
background: #4800ff;
}
.drop-nav li ul li {
border-top: 0px;
}
.s {
position: relative;
width: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test1" aria-expanded="false" aria-controls="collapseExample">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
<ul id="test1" class="collapse">
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
</ul>
</div>

<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test2" aria-expanded="false" aria-controls="collapseExample">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
<ul id="test2" class="collapse">
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
</ul>
</div>

<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test3" aria-expanded="false" aria-controls="collapseExample">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
<ul id="test3" class="collapse">
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
</ul>
</div>
<br>
<br>
<br>
<br>

关于html - 屏幕分辨率低时如何创建下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36499330/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com