问题描述
我正在尝试在主菜单中创建一个下拉按钮,但我不知道出了什么问题。我尝试了很多例子,但没有一个奏效。 谁能帮我至少建立一个链接作为下拉菜单?
通过我尝试使用.dropdown
作为id和class的方式,但它仍显示为内联。我还尝试了一些w3school示例。
navbar CSS
.header-nav {
background-color: rgba(0,6,0.3);
border-bottom: 1px solid rgba(255,255,0.3);
left: 0;
height: 80px;
position: fixed;
top: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 100%;
z-index: 999;
}
.header-nav.bg-color {
background-color: #fff;
}
.header-nav.menu-bg {
height: 56px;
}
/* menu */
.navbar-brand {
color: #fff;
font-size: 36px;
font-weight: bold;
line-height: 80px;
padding: 0;
text-transform: capitalize;
}
.header-nav.menu-bg .navbar-brand {
line-height: 56px;
}
.navbar-brand:hover {
color: #fff;
}
.navbar-brand > img {
height: 80px;
-webkit-transition: height 0.4s ease-in-out;
-moz-transition: height 0.4s ease-in-out;
-o-transition: height 0.4s ease-in-out;
transition: height 0.4s ease-in-out;
}
.menu-bg .navbar-brand > img {
height: 56px;
}
.bg-color .main-menu .navbar-nav li a {
color: #000;
}
.main-menu .navbar-nav li a {
color: #22a265;
font-size: 16px;
padding: 30px 20px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.menu-bg .main-menu .navbar-nav li a {
padding: 18px 15px;
color: #222;
}
.menu-bg .main-menu .navbar-nav li a:hover {
color: #fafafa;
}
.main-menu .navbar-nav li a:focus {
background-color: transparent;
}
.main-menu .navbar-nav li a:hover,.main-menu .navbar-nav li a.active {
color: #fff;
background-color: #04b962;
}
.menu-bg {
background-color: #fff;
Box-shadow: 0 2px 10px -1px rgba(87,97,100,0.35);
}
a img.logo-color {
opacity: 0;
height: 0;
}
.menu-bg a img.logo-white {
opacity: 0;
height: 0;
}
.menu-bg a img.logo-color {
opacity: 1;
}
.main-menu .navbar-nav li a.menubgactive {
background-color: #f0f0f0;
}
.main-menu .navbar-nav li a.menubgactive:hover {
background-color: #04b962;
}
/* navbar-toggle responsive menu */
.navbar-toggle {
border: none;
background: transparent;
}
.navbar-toggle.collapsed .icon-bar {
background-color: #04b962;
}
.navbar-toggle .icon-bar {
background-color: #e91313;
}
.navbar-toggle:hover {
background: transparent;
}
.navbar-toggle .icon-bar {
width: 32px;
height: 4px;
-webkit-transition:all 0.2s ease 0s;
-moz-transition:all 0.2s ease 0s;
-ms-transition:all 0.2s ease 0s;
-o-transition:all 0.2s ease 0s;
transition:all 0.2s ease 0s;
}
.navbar-toggle .top-bar {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
Box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
菜单html:
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav class="main-menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img class="logo logo-white" src="images/logo.png" alt="logo">
<img class="logo logo-color" src="images/logo-color.png" alt="logo">
</a>
</div><!--End navbar-header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#pricingtable">Pricing</a></li>
<li><a href="#blog">Blog</a></li>
<li><a class="last" href="#contact">Contact</a></li>
</ul>
</div><!--End navbar -->
</nav>
</div><!--End col -->
</div><!--End row -->
</div><!--End container -->
解决方法
在您的头部添加此CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">de here
然后在您的身体中添加引导程序的导航代码,您可以根据需要对其进行自定义
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div><!--End col -->
</div><!--End row -->
并在页脚中添加没有这些下拉菜单的脚本文件将不起作用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
按照上述步骤操作后,菜单和下拉菜单如下所示
,在您的代码中,您使用的Bootstrap
类在没有Bootstrap
的情况下不起作用,并且下拉使用jquery
的情况也要确保包括它们,我已经使用过{{1} }请检查代码段
CDN BOOTSTRAP
.header-nav {
background-color: rgba(0,6,0.3);
border-bottom: 1px solid rgba(255,255,0.3);
left: 0;
height: 80px;
position: fixed;
top: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 100%;
z-index: 999;
}
.header-nav.bg-color {
background-color: #fff;
}
.header-nav.menu-bg {
height: 56px;
}
/* menu */
.navbar-brand {
color: #fff;
font-size: 36px;
font-weight: bold;
line-height: 80px;
padding: 0;
text-transform: capitalize;
}
.header-nav.menu-bg .navbar-brand {
line-height: 56px;
}
.navbar-brand:hover {
color: #fff;
}
.navbar-brand > img {
height: 80px;
-webkit-transition: height 0.4s ease-in-out;
-moz-transition: height 0.4s ease-in-out;
-o-transition: height 0.4s ease-in-out;
transition: height 0.4s ease-in-out;
}
.menu-bg .navbar-brand > img {
height: 56px;
}
.bg-color .main-menu .navbar-nav li a {
color: #000;
}
.main-menu .navbar-nav li a {
color: #22a265;
font-size: 16px;
padding: 30px 20px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.menu-bg .main-menu .navbar-nav li a {
padding: 18px 15px;
color: #222;
}
.menu-bg .main-menu .navbar-nav li a:hover {
color: #fafafa;
}
.main-menu .navbar-nav li a:focus {
background-color: transparent;
}
.main-menu .navbar-nav li a:hover,.main-menu .navbar-nav li a.active {
color: #fff;
background-color: #04b962;
}
.menu-bg {
background-color: #fff;
box-shadow: 0 2px 10px -1px rgba(87,97,100,0.35);
}
a img.logo-color {
opacity: 0;
height: 0;
}
.menu-bg a img.logo-white {
opacity: 0;
height: 0;
}
.menu-bg a img.logo-color {
opacity: 1;
}
.main-menu .navbar-nav li a.menubgactive {
background-color: #f0f0f0;
}
.main-menu .navbar-nav li a.menubgactive:hover {
background-color: #04b962;
}
/* navbar-toggle responsive menu */
.navbar-toggle {
border: none;
background: transparent;
}
.navbar-toggle.collapsed .icon-bar {
background-color: #04b962;
}
.navbar-toggle .icon-bar {
background-color: #e91313;
}
.navbar-toggle:hover {
background: transparent;
}
.navbar-toggle .icon-bar {
width: 32px;
height: 4px;
-webkit-transition:all 0.2s ease 0s;
-moz-transition:all 0.2s ease 0s;
-ms-transition:all 0.2s ease 0s;
-o-transition:all 0.2s ease 0s;
transition:all 0.2s ease 0s;
}
.navbar-toggle .top-bar {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
,
使用以下格式添加boootstrap 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
我刚刚发现您使用的是旧版的Bootstrap。对于Bootstrap 3,请使用以下框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
,
建议使用下拉菜单,建议使用Bootstrap的“下拉”按钮组。 这是一个例子。
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
Bootstrap中还有更多选项。 https://getbootstrap.com/docs/4.5/components/dropdowns/
P.S。 您需要在其中添加引导程序链接和脚本
https://getbootstrap.com/docs/4.5/getting-started/introduction/
CSS和JavaScript