我有一个带下拉菜单的导航栏。现在我想让它也适用于智能手机用户。我已经包含了bootstrap类,所以我想我可以使用bootstrap。
我使用generato r为我创建了一个基本的导航栏,只是为了测试它是否正常工作。
结果如下:https://jsfiddle.net/bwbuqco2/
当你在小提琴中调整窗口大小时,会出现一个较小屏幕的菜单按钮。但在我的网站上却没有。导航栏完全消失在我的网站上,我不知道为什么。
我停用了旧导航栏的任何样式,但这并没有解决问题。
如果您需要任何进一步的信息,请与我们联系。我不知道问题在哪里。
我也会在bootstrap旁边开放解决方案。
这是我的导航栏结构:
<nav class="navbar navbar-default">
<div class="container" style="margin-left:100px;">
<ul class="nav navbar-nav">
<li>
<a href="">
Startseite
</a>
</li>
<li>
<a href="ueber-mich/">
Über mich
</a>
</li>
<li>
<a href="#anker">
Referenzen
</a>
<ul>
<li><a href="link1/">link1/</a></li>
<li><a href="link2/">link2</a></li>
<li><a href="link3/">link3</a></li>
<li><a href="link4/">link4</a></li>
<li><a href="link4/">link4</a></li>
<li><a href="link5/">link5</a></li>
</ul>
</li>
<li>
<a href="link6/">
link6
</a>
</li>
</ul>
</div>
</div>
</nav>-->
CSS
.navbar{
margin-left: -3px;
margin-bottom: 0;
background: @color-purple;
border: none;
.navbar-nav{
> li {
> ul {
text-align: center;
padding: 0;
display: none;
z-index: 1;
background: rgba(41, 38, 87, 0.7);
position: absolute;
visibility: hidden;
list-style-type: none;
margin-left: -50px;
>li{
margin: 0 auto;
display: block;
> a {
border: 1px solid @color-purple;
display: block;
padding: 1em;
color: @color-white;
font-size: 14px;
font-weight: lighter;
text-transform: uppercase;
list-style-type: none;
}
>a:hover{
background: @color-purple;
text-decoration: none;
color: @color-white;
}
}
}
> a {
color: @color-white;
text-align: center;
font-size: 16px;
font-weight: lighter;
text-transform: uppercase;
padding: 25px 40px 25px 0px;
list-style-type: none;
}
>a:hover{
color: @color-white;
text-decoration: underline;
}
}
>li:hover{
> ul {
display: block;
position: absolute;
visibility: visible;
}
}
}
}
感谢您阅读!
答案 0 :(得分:1)
假设你有正确链接的jQuery,bootstrap CSS和JS文件。 你错过了很多需要的东西。 请访问https://getbootstrap.com/components/#navbar。
我在这里使用了部分代码http://codepen.io/anon/pen/aBMEyZ
“将显示较小屏幕的菜单按钮。但在我的网站上却没有。” 你缺少汉堡包按钮等等。
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
请记住,我没有使用任何额外的CSS,只是引导程序文件。
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="">
Startseite
</a>
</li>
<li>
<a href="ueber-mich/">
Über mich
</a>
</li>
<li>
<a href="#anker">
Referenzen
</a>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="link1/">link1/</a></li>
<li><a href="link2/">link2</a></li>
<li><a href="link3/">link3</a></li>
<li><a href="link4/">link4</a></li>
<li><a href="link4/">link4</a></li>
<li><a href="link5/">link5</a></li>
</ul>
</li>
<li>
<a href="link6/">
link6
</a>
</li>
</ul>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>