我想在每一页上都保留一个有一些规范的导航栏。我已经在这个线程How can I reuse a navigation bar on multiple pages?上尝试了一些解决方案，但令人惊讶的是没有一个对我有效-它使导航栏完全消失。
我怀疑这是由于我的导航栏上有一个下拉菜单，而且当我向下滚动时，它应该固定在每个屏幕的顶部。
下面是导航条代码：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
</head>
<div class="navbar">
<a class="active" href="home.html"> Home </a>
<a href="about.html">About</a>
<a href="start">Start</a>
<a href="blog">Blog</a>
<div class="dropdown">
<button class="dropbutton"> Interests</button>
<div class="dropdown-content">
<a href="finance">Finance</a>
<a href="music">Music</a>
<a href="language">Language</a>
<a href="math">Math</a>
</div>
</div>
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
</html>.navbar {
background-color: black;
/*overflow: hidden; WE DONT WANT THIS! prevent drop down*/
width: 100%;
position: fixed;
top: 0px
}
.navbar a{
float: left;
color: aliceblue;
text-align: center;
padding: 10px 10px;
font-size: 25px;
text-decoration: none;
}
.navbar a:hover {
background-color: lightseagreen;
color: black;
}
.navbar a:active {
background-color: lightseagreen;
color: aliceblue;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dropbutton {
font-size: 25px;
border: none;
outline: none;
color: aliceblue;
padding: 10px 10px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.navbar a:hover, .dropdown:hover .dropbutton {
background-color: lightseagreen;
}
/* hide dropdown default*/
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
}
.dropdown-content a {
float: none;
color: aliceblue;
text-align: center;
padding: 10px 10px;
font-size: 25px;
text-decoration: none;
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content{
display: block;
}
.navbar a.active{
background-color: lightseagreen;
}
.navbar input[type=text]{
float: none;
padding: 5px 10px;
border: none;
margin-top: 10px;
}
.navbar .search-container {
float: right;
}
.navbar .search-container button {
float: right;
padding: 5px 10px;
margin-top: 10px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}我在线程上尝试了大部分的JAVASCRIPT解决方案。因为我是一个新手，所以我想让它首先接近JS，HTML和CSS。我也尝试了一些JQuery解决方案，但不幸的是它也不起作用。
这些是我试过的东西的摘录（反正都不管用）
我有一个名为home.html的主主页，导航栏位于名为navbar.html的单独文件中
<!--<script src="nav.js"></script>-->
<div id="nav-placeholder"></div>
<script>
$.get("navbar.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>这里是主页. html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/0a48c3a8e0.js" crossorigin="anonymous"></script>
</head>
<!-- <script id="replaceWithNavbar" src="navbar.js"></script>-->
<!--<script src="nav.js"></script>-->
<div id="nav-placeholder"></div>
<script>
$.get("navbar.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
<div class="header">
<h1>Welcome to my website</h1>
<p>heloelkfjashdlkjf
</p>
</div>
<div class="row">
<div class="left">test testafdkjhaskfjhalkjfhlakjhflkajh
asldfkjhalskjfh
adslfkjhaslkdjfh
al;ksjfdhalkjh
</div>
<div class="main">
<div class="cards-row">
<div class="column">
<div class="card"> <a href="asdf"> asdf</a></div>
</div>
<div class="column">
<div class="card"> <a href="1"> 1 </a> </div>
</div>
<div class="column">
<div class="card"> <a href="2"> 2 </a> </div>
</div>
<div class="column">
<div class="card"><a href="3"> 3</a> </div>
</div>
</div>
<h1>
Hello World
</h1>
</div>
</div>
</html>```
1条答案
按热度按时间ohfgkhjo1#
我过去曾使用过：设置起来有点麻烦，但我还是使用Gulp来编译我的SCSS和JS文件，所以这只是多一个过程。