Question

我目前正在为现有网站创建响应式设计。 http://www.digitalcuttingsystems.com/

我的导航栏有问题，我尝试了一些教程，但还不够好。我希望它像汉堡菜单一样，以便在其他设备上看起来很好。

教程

http://www.w3schools.com/howto/howto_js_topnav.asp

https://css-tricks.com/responsive-menu-concepts/

http://www.hongkiat.com/blog/responsive-web-nav/

NAV-菜单

<div class="header">
                <div>
                  <nav>
                    <ul class="topnav">
                   <li class="selected">
                        <a href="systems.php">Systems</a> <a href="systems.php" class="systems">Something for Everyone</a>
                    </li>
                    <li>
                        <a href="about.php">About</a> <a href="about.php" class="about">Industry Leading Engineers</a>
                    </li>
                    <li>
                        <a href="quality.php">Quality</a> <a href="quality.php" class="quality">Industry Leading Warranty</a> 
                    </li>
                    <li >
                        <a href="contact.php">Contact</a> <a href="contact.php" class="contact">Call Us now!</a>
                    </li>

                </ul>
                </nav>
            </div>
        </div>

这是我的菜单

https://jsfiddle.net/cpLkjm8f/

感谢。

Answer 1

使用固定宽度（es：width: 900px;）

阻止标签重新调整大小。

您应该考虑具有百分比宽度或媒体查询的策略。

Answer 2

使用以下代码实现响应式引导菜单，添加bootsrap.css和bootsrap.js

<div class="header">
  <nav class="navbar">
    <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="#menu" 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="#">Menus</a> </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="menu">
        <ul class="nav navbar-nav topnav">
          <li class="selected"> <a href="systems.php">Systems</a> <a href="systems.php" class="systems">Something for Everyone</a> </li>
          <li> <a href="about.php">About</a> <a href="about.php" class="about">Industry Leading Engineers</a> </li>
          <li> <a href="quality.php">Quality</a> <a href="quality.php" class="quality">Industry Leading Warranty</a> </li>
          <li > <a href="contact.php">Contact</a> <a href="contact.php" class="contact">Call Us now!</a> </li>
        </ul>
        </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Answer 3

使用此我已经创建了一个示例，您可以添加自己的css：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
    <style>

        .marginBottom-0 {margin-bottom:0;}
        .dropdown-submenu{position:relative;}
        .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
        .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
        .dropdown-submenu:hover>a:after{border-left-color:#555;}
        .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}


    </style>
<body>
    <div class="container">
            <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <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 class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Systems <span>&nbsp;Something for Everyone</span></a></li>
                    <li><a href="#">About <span>&nbsp;Industry Leading Engineers</span></a></li>
                    <li><a href="#">Quality <span>&nbsp;Industry Leading Warranty</span></a></li>
                    <li><a href="#">Contact <span>&nbsp;Call us now!</span></a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>

    (function($){
    $(document).ready(function(){
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
            event.preventDefault(); 
            event.stopPropagation(); 
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
        });
    });
})(jQuery);

</script>
</body>
</html>

没有响应导航菜单

3 个答案: