我正在尝试使用引导程序及其切换功能在桌面版本中重新创建移动菜单。
现在,我在桌面上有这个:
而且我尝试在台式机中获得类似的信息(因为我已经在移动设备中拥有了它,但我希望在台式机中获得同样的效果):
问题是,当我尝试将按钮放到右侧时,它总是滚动到左侧中心,并且即使更改css中的position值也不会显示选项。
到目前为止,我的代码如下:
.pen .navbar-toggle {
border: none;
background: transparent !important;
}
.pen .navbar-toggle:hover {
background: transparent !important;
}
.pen .navbar-toggle .icon-bar {
width: 22px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
/* ANIMATED X */
.navbar-toggle.x .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 10% 10%;
-ms-transform-origin: 10% 10%;
transform-origin: 10% 10%;
}
.navbar-toggle.x .icon-bar:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggle.x .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 10% 90%;
-ms-transform-origin: 10% 90%;
transform-origin: 10% 90%;
}
/* ANIMATED X COLLAPSED */
.navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
/* END ANIMATED X */
/* ANIMATED RIGHT ARROW */
.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
transform-origin: right top;
width: 22px;
}
.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
transform-origin: right bottom;
width: 22px;
}
.navbar-toggle.rarr .icon-bar:nth-of-type(1) {
transform: translate3d(11px,6px,0) rotate(45deg);
transform-origin: right top;
width: 11px;
}
.navbar-toggle.rarr .icon-bar:nth-of-type(2) {
/* transform: scale(0.75); */;
}
.navbar-toggle.rarr .icon-bar:nth-of-type(3) {
transform: translate3d(11px,-6px,0) rotate(-45deg);
transform-origin: right bottom;
width: 11px;
}
/* END ANIMATED RIGHT ARROW */
/* ANIMATED LEFT ARROW */
.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}
.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}
.navbar-toggle.larr .icon-bar:nth-of-type(1) {
transform: translate3d(0px,6px,0) rotate(45deg);
transform-origin: left top;
width: 11px;
}
.navbar-toggle.larr .icon-bar:nth-of-type(3) {
transform: translate3d(0px,-6px,0) rotate(-45deg);
transform-origin: left bottom;
width: 11px;
}
/* END ANIMATED LEFT ARROW */
/* ANIMATED UP ARROW */
.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}
.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
width: 22px;
}
.navbar-toggle.uarr .icon-bar:nth-of-type(1) {
transform: translate3d(1px,0,0) rotate(-45deg);
transform-origin: center center;
width: 11px;
}
.navbar-toggle.uarr .icon-bar:nth-of-type(2) {
transform: rotate(-90deg);
transform-origin: center center;
}
.navbar-toggle.uarr .icon-bar:nth-of-type(3) {
transform: translate3d(0px,-14px,0) rotate(-135deg);
transform-origin: right top;
width: 11px;
}
/* END ANIMATED UP ARROW */
/* ANIMATED PLUS */
.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.plus .icon-bar:nth-of-type(1) {
transform: translate3d(0px,6px,0) rotate(90deg);
transform-origin: center center;
}
.navbar-toggle.plus .icon-bar:nth-of-type(3) {
transform: translate3d(0px,-6px,0) rotate(-90deg);
transform-origin: center center;
}
/* END ANIMATED PLUS */
/* ANIMATED MINUS */
.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(1) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(2) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(3) {
transform: translate3d(0,0,0) rotate(0deg);
}
.navbar-toggle.minus .icon-bar:nth-of-type(1) {
transform: translate3d(0,6px,0);
}
.navbar-toggle.minus .icon-bar:nth-of-type(3) {
transform: translate3d(0,-6px,0);
}
/* END ANIMATED MINUS */
/* FORCE NAVBAR-TOGGLE */
.pen .navbar-header {
float: none;
}
.pen .navbar-toggle {
display: block;
}
.pen .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.pen .navbar-collapse.collapse {
display: none !important;
}
.pen .navbar-nav {
float: none !important;
margin: 7.5px -15px;
}
.pen .navbar-nav > li {
float: none;
}
.pen .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.pen .navbar-collapse.collapse.in {
display: block !important;
}
.pen .navbar-brand {
font-size:14px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="background-color: black; color: white;">
<nav class="navbar navbar-default" role="navigation" style="background-color: black; color: white;">
<div class="navbar-header">
<button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x" style="display: block;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">.here logo_website.</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-x">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top" style="color: white; font-size: 20px;">HOME</a></li>
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top" style="color: white; font-size: 20px;">CONTACT</a></li>
<li class=dropdown>
<a href=# data-toggle=dropdown class=dropdown-toggle style="color: white; font-size: 20px;">SERVICES</a>
<ul role=menu class=dropdown-menu>
<li><a tabindex=-1 href=Websites.html>WEB-DESIGN</a></li>
<li class=divider></li>
<li><a tabindex=-1 href=Mobile.html>WEB-DEVELOPMENT</a></li>
</ul>
</li>
</ul>
</div><!-- .navbar-collapse -->
</nav>
</div>
</div>
</div>
希望您能帮助我解决此问题,并最终拥有一个类似于移动菜单的桌面菜单。实际上,我希望在移动设备和台式机中都可以保留相同的菜单。这就是我想要得到的。
最佳答案
希望对您有所帮助:Bootstrap Navigation Bar
<html lang="en"><head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsibleNavbar" style="">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container-fluid">
<h3>Collapsible Navbar</h3>
<p>Click on th button in the top right corner to reveal the navigation links.</p>
</div>
</body></html>