在页脚中显示菜单但在移动设备的标题中显示

时间:2017-04-17 17:22:09

标签: css mobile twitter-bootstrap-3

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

<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>

目前,当我转到手机尺寸时,它会在标题中显示移动导航按钮。但是,当您单击它时,它会展开页脚中的菜单。我有什么方法可以将我在页脚中使用的菜单显示在移动尺寸的标题中?

由于

5 个答案:

答案 0 :(得分:1)

如果你不介意在标题中复制页脚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类。

答案 1 :(得分:1)

你可以这样做:

var parts ='05/12/2004'.split('/');
$scope.dateOfBirth = new Date(parts[2],parts[1]-1,parts[0]));

答案 2 :(得分:1)

&#13;
&#13;
$(document).ready(function(){
if($(window).width() <= 375){
 $('#navbar2').html($('#navbar').html())
 $('#navbar').html('')
}
else 
{
if($('#navbar2').length>1){
 $('#navbar').html($('#navbar2').html())
 $('#navbar2').html('')
 }
}});
&#13;
<!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>
&#13;
&#13;
&#13;

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

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

答案 3 :(得分:1)

你可以使用bootstrap'incort-X'类来完成这个:

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

我已根据您提供的类隐藏了一个重复菜单示例的codepen:

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类,这些类确定每个菜单应该显示的情况。我希望这有帮助!

答案 4 :(得分:1)

您还可以使用position: absoluteposition: fixed显示导航。就像一个简单的例子:

.navigation {
  position: absolute; // in your header
  top: 0;
  left: 0;

  @media screen and (min-width: 40em) {
    position: static; // in your footer
  }
}