Html 响应导航错误_Html_Css_Navigation_Responsive Design_Skeleton Css Boilerplate

Html 响应导航错误

html css navigation responsive-design

Html 响应导航错误,html,css,navigation,responsive-design,skeleton-css-boilerplate,Html,Css,Navigation,Responsive Design,Skeleton Css Boilerplate,我正在试用带有基本骨架网格系统的responsive nav插件（responsive nav.com），由于某些原因，没有为responsive nav插件编辑js和通用css，当最小化到navicon出现的区域时，我遇到了导航问题。由于某些原因，链接会自动下拉，而navicon不会出现。这和集装箱有关吗？我在没有容器div的情况下尝试过，但仍然遇到问题请参见图片，例如：以下是HTML： <!DOCTYPE html> <!--[if lt IE 7 ]><

我正在试用带有基本骨架网格系统的responsive nav插件（responsive nav.com），由于某些原因，没有为responsive nav插件编辑js和通用css，当最小化到navicon出现的区域时，我遇到了导航问题。由于某些原因，链接会自动下拉，而navicon不会出现。这和集装箱有关吗？我在没有容器div的情况下尝试过，但仍然遇到问题请参见图片，例如：

以下是HTML：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>Your Page Title Here :)</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="stylesheets/base.css">
    <link rel="stylesheet" href="stylesheets/skeleton.css">
    <link rel="stylesheet" href="stylesheets/layout.css">
    <script src="js/responsive-nav.js"></script>
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

</head>
<body>



    <!-- Primary Page Layout
    ================================================== -->


<div class="band-nav">    

    <div class="container">

        <div class="sixteen columns">
         <nav class="nav-collapse">
      <ul>
        <li><a href="http://google.com">Home</a></li>
        <li><a href="http://google.com">About</a></li>
        <li><a href="http://google.com">Projects</a></li>
        <li><a href="http://google.com">Blog</a></li>
      </ul>
    </nav>

 </div>

</div>

</div>

<div class="band-content">

<div class="container">

        <div class="sixteen columns">
            <h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
            <h5>Version 1.2</h5>
            <hr />
        </div>
        <div class="one-third column">
            <h3>About Skeleton?</h3>
            <p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
        </div>

    </div>

</div>

   <script>
      var navigation = responsiveNav(".nav-collapse", {
        animate: true,        // Boolean: Use CSS3 transitions, true or false
        transition: 250,      // Integer: Speed of the transition, in milliseconds
        label: "Menu",        // String: Label for the navigation toggle
        insert: "after",      // String: Insert the toggle before or after the navigation
        customToggle: "",     // Selector: Specify the ID of a custom toggle
        openPos: "relative",  // String: Position of the opened nav, relative or static
        jsClass: "js",        // String: 'JS enabled' class which is added to <html> el
        init: function(){},   // Function: Init callback
        open: function(){},   // Function: Open callback
        close: function(){}   // Function: Close callback
      });
    </script>
<!-- End Document
================================================== -->
</body>
</html>

我想你忘记链接到jquery库了。您仅链接到响应nav的jquery，但需要主jquery库才能工作

将其置于responsive-nav.js链接之前：

我通过此参考得到响应导航错误：

<script src='https://cdnjs.cloudflare.com/ajax/libs/responsive-nav.js/1.0.32/responsive-nav.min.js'></script>

所以我不得不下载它并在我的本地资源上托管它：

<script src="/js/responsive-nav.min.js" type="text/javascript"></script>

问题已为我解决。

。你不是在装骷髅什么的

<script src="/js/responsive-nav.min.js" type="text/javascript"></script>