在页脚中显示菜单，但在移动设备上在页眉中显示菜单

>我目前的情况是我有一个这样的标题

<header class="container nav-container">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>

因此，它本质上是一个空标题，不显示任何内容。相反，对于较大的屏幕，主导航实际上显示在页脚中

<footer class="footer container">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2/a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>

目前，当我下降到移动尺寸时，它会在标题中显示移动导航按钮，因为它应该这样做。但是，当您单击它时，它会展开页脚中的菜单。有什么方法可以将我正在使用的菜单放在页脚中，以便在移动尺寸上显示在页眉中？

谢谢

如果您不介意在页眉中复制页脚 html，您可以执行以下操作(我在演示中有一个可见的页眉导航栏，但我假设您会对其进行调整)：

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="container hidden-after-768">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
<footer class="footer container hidden-before-767">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">>Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>

使用 CSS：

@media (min-width: 768px)
{
.hidden-after-768
{ 
display: none; 
}
}
@media (max-width: 767px)
{
.hidden-before-767
{ 
display: none; 
}
}

下面是一个演示：http://www.bootply.com/render/4NgDES9hYq

(可编辑版本 http://www.bootply.com/4NgDES9hYq)

请注意，从理论上讲，您应该只能执行<footer class="hidden-xs hidden-sm">，并为页眉部分<div class="hidden-md hidden-lg">，但我发现在大约 768 到 994 像素之间有一个点，它既不显示页脚菜单也不显示汉堡按钮，所以我们留下了一个没有任何导航链接的死角。这就是我创建额外的@media类的原因。

你可以这样做：

<header id="header_wrapper">
<div class="container2">
<div class="header_box">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> 
<span class="sr-only">Toggle navigation</spaenter code heren> 
<span class="icon-bar"></span>  
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button>
</div>
<div id="main-nav" class="collapse navbar-collapse navStyle">
<ul class="nav navbar-nav" id="mainNav">
<li>></li> 
<li></li>
<li></li>
<li><a href="#">Logout</a></li> 
</ul>
</div>
</nav>
</div>
</div>
</header>

$(document).ready(function(){
if($(window).width() <= 375){
$('#navbar2').html($('#navbar').html())
$('#navbar').html('')
}
else 
{
if($('#navbar2').length>1){
$('#navbar').html($('#navbar2').html())
$('#navbar2').html('')
}
}});

<!DOCTYPE html>
<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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<header class="container nav-container">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">

<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar2" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar2"></div>
		   </div>
</div><!-- /.container-fluid -->
</nav>
</header>
<footer class="footer container">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
</body>
</html>

您可以使用 jquery 脚本将页脚菜单移动到移动视图中的页眉菜单。

我在页眉中创建了一个临时div，并将页脚菜单添加到该div 并将切换菜单分配给该div

你可以纯粹使用引导 'hidden-X' 类来做到这一点：

https://getbootstrap.com/css/#responsive-utilities

我用一个重复菜单的示例制作了一个代码笔，该菜单根据您提供的类而隐藏：

https://codepen.io/c0un7z3r0/pen/NjrPvR

魔法的工作原理如下：顶部菜单容器：

<div class="navbar navbar-inverse navbar-fixed-top hidden-lg" role="navigation">

底部菜单容器：

<div class="navbar navbar-inverse navbar-fixed-bottom hidden-md hidden-sm hidden-xs" role="navigation">

请注意 hidden-X 类，这些类决定了应显示每个菜单的情况。我希望这有帮助！

您还可以使用position: absolute或position: fixed显示导航。举个简单的例子：

.navigation {
position: absolute; // in your header
top: 0;
left: 0;
@media screen and (min-width: 40em) {
position: static; // in your footer
}
}

相关内容

最新更新

热门标签：