gpt4 book ai didi

javascript - 使用 css、bootstrap、html 的垂直抽屉导航

转载 作者:行者123 更新时间:2023-11-28 05:27:58 26 4
gpt4 key购买 nike

我正在尝试创建垂直抽屉导航,它将像下图一样从下到上打开。

enter image description here

我是 Bootstrap 的新手。我尝试了以下代码,但它是从左到右打开的。

请完成以下代码。

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}

@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
bottom: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
</style>
</head>
<body>

<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>

<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

</body>
</html>

我也试过this链接但没有运气。

请给我一些引用或提示。

最佳答案

这应该有效:

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
bottom: 0px;
width: 100%;
background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}

@media screen and (max-width:680px) {
ul.topnav.responsive {position: absolute; bottom: 0px;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
bottom: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
</style>
</head>
<body>

<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>

<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

</body>
</html>

我把 ul.topnav.responsive 的位置改成绝对的(也可以固定,ul.topnav 的位置给它一个 width: 100%,我将两个元素的位置设置为 bottom: 0px

虽然这可以重构,因为它应该使用外部样式表和 javascript 文件,并且直接在 a 上有样式,这是不好的做法。使用 href="javascript:void(0);" 也是不好的做法,因为链接只是触发 javascript 函数,为什么不使用按钮,或者如果您想使用 a 标签只是删除 href

关于javascript - 使用 css、bootstrap、html 的垂直抽屉导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38675196/

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