使用 Bootstrap 的响应式菜单答案

【问题标题】：Responsive Menu Using Bootstrap使用 Bootstrap 的响应式菜单
【发布时间】：2019-03-01 00:04:52
【问题描述】：

任何人都可以帮助我使用 Bootstrap CSS 创建菜单吗引导菜单的每个教程都不能完全满足我的要求所以请任何人告诉我如何创建响应式菜单

图片包含两张图片，一张用于普通浏览器，另一张用于移动端

我已经尝试了以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Static Navbar Extended</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
     <style type="text/css">
         .bs-example{
        margin: 20px;
            }
     </style>
<script>

</script>
</head> 
<body>
<div class="bs-example">
    <nav role="navigation" class="navbar navbar-default">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
           <!--  <a href="#" class="navbar-brand">Brand</a> -->
        </div>
        <!-- Collection of nav links, forms, and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a>                </li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Login</a></li>
              </ul>
            <!-- <ul class="nav navbar-nav">
                <li><a href="#">Login</a></li>
            </ul> -->
        </div>
    </nav>
</div>
</body>
</html>

【问题讨论】：

发布一些您迄今为止尝试过的代码总是一个好主意，以向人们展示您实际上已经努力自己解决问题。

标签： javascript jquery html twitter-bootstrap responsive-design

【解决方案1】：

你检查过这些例子吗？

做你需要的事情

此外，this 实用程序允许您创建引导导航栏

更新

JSFIDDLE

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="test">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#link1" style="display:none;" id="link">item 1</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#link1">item 1</a></li>
        <li><a href="#link2">item 2</a></li>
        <li><a href="#link2">item 3</a></li>

      </ul>

    </div>
  </div>
</div>


$(document).ready(function() {

//control for the creation
if($(window).width() < 767){
       $("#link").show();
    }

});

$(document).load($(window).bind("resize", do_menu));

function do_menu(){

   if($(window).width() < 767){
      $("#link").show();
   }else{
       $("#link").hide();
   }

}

【讨论】：

是的，在所有这些示例中，当我使用移动设备时，它在顶部显示品牌名称我想要活动链接而不是项目名称表示链接被点击感谢链接，但在该链接中我无法更改功能
您希望在菜单中看到第一项而不是菜单名称？
是的，我要点击的项目
现在我创建一个 jsfiddle 然后更新答案:)
NO Nicolo 它不是你只更改了导航栏品牌的情况，但我希望当我点击应该出现在菜单名称和菜单应该关闭的特定项目时

【解决方案2】：

我已经修改了 twitter bootstrap HTML 代码，我相信下面的解决方案非常接近您的期望

<!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <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 hidden-lg" href="#" data-toggle="dropdown">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">1 First Topic</a></li>
              <li><a href="#">1 First Topic</a></li>
              <li><a href="#">1 First Topic</a></li>

            </ul>

          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>

【讨论】：

【解决方案3】：

我得到了解决方案：以下是我需要的代码：

                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                    <meta charset="UTF-8">
                    <title>Example of Twitter Bootstrap 3 Static Navbar Extended</title>
                    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
                    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
                    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
                    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
                    <style type="text/css">
                        .bs-example{
                            margin: 20px;
                        }
                    </style>
                    <script>
                      $(document).ready(function(){

                                $(window).resize(function(){

                                    console.log($(window).width());
                                    if($(window).width()<767)
                                    {
                                        $(".navbar-brand").html($(".active>a").text());
                                    }
                                    else
                                    {
                                        $(".navbar-brand").html("");
                                    }

                                });

                                $("ul>li").click(function(){

                                        //alert($(this).find("a").text());
                                        $(".active").removeClass("active");
                                        $(this).addClass("active");
                                        if($("#navbarCollapse").hasClass("in"))
                                        {
                                            $("#navbarCollapse").removeClass("in")
                                            $("#navbarCollapse").addClass("collapse")
                                        }

                                        if($(window).width()<767)
                                        {
                                            $(".navbar-brand").html($(".active>a").text());
                                        }
                                        else
                                        {
                                            $(".navbar-brand").html("");
                                        }


                                });
                      });
                    </script>
                    </head> 
                    <body>
                    <div class="bs-example">
                        <nav role="navigation" class="navbar navbar-default">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a href="#" class="navbar-brand"></a>  
                            </div>
                            <!-- Collection of nav links, forms, and other content for toggling -->
                            <div id="navbarCollapse" class="collapse navbar-collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="#">Home</a></li>
                                    <li><a href="#">Profile</a></li>
                                    <li><a href="#">Login</a></li>
                                  </ul>
                            </div>
                        </nav>
                    </div>
                    </body>
                    </html>

【讨论】：