Bootstrap 3.0中的水平导航菜单 - 如果我有很多主菜单，如何在其上添加上一个下一个箭头？ [英] Horizontal navigation menu in Bootstrap 3.0 - How can I add a Prev-Next arrow on top of it if I have lot of main menu?
问题描述
我正在使用
我需要实现类似的东西。
我创建了一个简单的带有12个主菜单的Bootstrap导航的jsFiddle。请将结果部分扩展到足以在桌面模式下显示导航，如下所示：
小提琴链接：
这个应该有效：
$（'。direction-right'）。click（function（）{var margin = $（'。navbar-nav'）。 css（'margin-top'）; console.log（margin）; console.log（' - '+（$（'。navbar-nav'）。height（） - 50）+ px'）; $（'。navbar-nav'）。css（'margin-top'，margin ==' - '+（$（'。navbar-nav'）。height（） - 50）+'px' ？ margin：' - = 50px'）;}）; $（'。direction-left'）。click（function（）{var margin = $（'。navbar-nav'）。css（'margin-top'）; $（'。navbar-nav'）。css（'margin-top'，margin =='0px'？'0px'：'+ = 50px'）;}）; $（window）.resize（function（）{ if（$（window）.width（）< 768）{$（'。navbar-nav'）。css（'margin-top'，0）;}}）;
@media（max-width：768px）{。diand-right，.direction-left {display：没有; @media（min-width：768px）{。navbar {height：51px;溢出：隐藏; } .navbar-nav {overflow：hidden;宽度：计算（100％ - 52px）; } .direction-right，.direction-left {display：block; }
< link href =http：// netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css\"rel =stylesheet/>< script src =https://ajax.googleapis.com/ajax/libs/jquery/ 1.11.1 / jquery.min.js>< / script>< script src =http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js>< ; / script>< div class =navbar navbar-default navbar-fixed-top> < div class =container> < div class =navbar-header pull-left> < / DIV> < div class =navbar-header pull-right> < button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < / DIV> < div class =navbar-collapse collapse> < a href =＃class =direction-left pull-left navbar-brand><< / a> < ul class =nav navbar-nav> < li>< a href =1.html>菜单1< / a>< / li> < li>< a href =2.html>菜单2< / a>< / li> < li>< a href =3.html>菜单3< / a>< / li> < li>< a href =4.html>菜单4< / a>< / li> < li>< a href =5.html>菜单5< / a>< / li> < li>< a href =6.html>菜单6< / a>< / li> < li>< a href =7.html>菜单7< / a>< / li> < li>< a href =8.html>菜单8< / a>< / li> < li>< a href =9.html>菜单9< / a>< / li> < li>< a href =10.html>菜单10< / a>< / li> < li>< a href =11.html>菜单11< / a>< / li> < li>< a href =12.html>菜单12< / a>< / li> < / UL> < a href =＃class =direction-right pull-left navbar-brand>>< / a> < / DIV> < / DIV> < / div>
http://jsfiddle.net/k63t7tqo/3/
或试试这个一个有滑块效果：
http：// jsfiddle .net / k63t7tqo / 7 /
I am using Bootstrap 3.0 and implemented the navigation menu. My media query break point for Desktop to Mobile view is at 800 pixels. So basically on a screen with 800 pixels and plus I want to show the desktop view. On a wider screen like a desktop I am able to show all 12 or so main menus in a single line. But if I go to an iPad then I get for example only 980 pixels. Here in this smaller screen my menu comes in two lines. I can't reduce my main menu count.
How I can make a previous - next arrow on top of the Bootstrap navigation so that the menu will always come in a single line, and I can traverse through all available menu in desktop mode?
I need to implement something like this.
I created a simple jsFiddle of the Bootstrap navigation having 12 main menus. Please expand the Result section wide enough to show the nav in desktop mode like follows:
Fiddle link: link
fiddle image
http://jsfiddle.net/vijayP/k63t7tqo
This one should work:
$('.direction-right').click(function() {
var margin = $('.navbar-nav').css('margin-top');
console.log(margin);
console.log('-' + ($('.navbar-nav').height() - 50) + 'px');
$('.navbar-nav').css('margin-top', margin == '-' + ($('.navbar-nav').height() - 50) + 'px' ? margin : '-=50px');
});
$('.direction-left').click(function() {
var margin = $('.navbar-nav').css('margin-top');
$('.navbar-nav').css('margin-top', margin == '0px' ? '0px' : '+=50px');
});
$(window).resize(function() {
if ($(window).width() < 768) {
$('.navbar-nav').css('margin-top', 0);
}
});
@media (max-width: 768px) {
.direction-right, .direction-left {
display: none;
}
}
@media (min-width: 768px) {
.navbar {
height: 51px;
overflow: hidden;
}
.navbar-nav {
overflow: hidden;
width: calc(100% - 52px);
}
.direction-right, .direction-left {
display: block;
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<a href="#" class="direction-left pull-left navbar-brand"><</a>
<ul class="nav navbar-nav">
<li><a href="1.html">Menu 1</a></li>
<li><a href="2.html">Menu 2</a></li>
<li><a href="3.html">Menu 3</a></li>
<li><a href="4.html">Menu 4</a></li>
<li><a href="5.html">Menu 5</a></li>
<li><a href="6.html">Menu 6</a></li>
<li><a href="7.html">Menu 7</a></li>
<li><a href="8.html">Menu 8</a></li>
<li><a href="9.html">Menu 9</a></li>
<li><a href="10.html">Menu 10</a></li>
<li><a href="11.html">Menu 11</a></li>
<li><a href="12.html">Menu 12</a></li>
</ul>
<a href="#" class="direction-right pull-left navbar-brand">></a>
</div>
</div>
</div>
http://jsfiddle.net/k63t7tqo/3/
Or Try this one with a slider effect:
http://jsfiddle.net/k63t7tqo/7/
这篇关于Bootstrap 3.0中的水平导航菜单 - 如果我有很多主菜单，如何在其上添加上一个下一个箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
