个人中心
gpt4 book ai didi

html - 响应式导航错误

转载 作者：太空宇宙 更新时间：2023-11-04 14:01:36 27 4
gpt4 key购买 nike

我正在尝试使用基本骨架网格系统的响应式导航插件 (responsive-nav.com)，由于某种原因，没有为响应式导航插件编辑 js 和通用 css，我遇到了导航问题当最小化到导航图标出现的区域时。由于某种原因，链接会自动下拉，并且不会出现导航图标。跟容器有关系吗？我在没有容器 div 的情况下尝试过，但仍然遇到了问题，例如参见图片:

Full Sized Nav

Navicon Size

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

CSS:

/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
    #Site Styles
    #Page Styles
    #Media Queries
    #Font-Face */

/* #Site Styles
================================================== */


/*! responsive-nav.js 1.0.25 by @viljamis */



.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 40em) {
  .nav-collapse li {
    width: 25%;
    *width: 24.9%; /* IE7 Hack */
    _width: 19%; /* IE6 Hack */
  }
}

.nav-collapse a {
  color: #fff;
  text-decoration: none;
  width: 100%;
  background: #000;
  border-bottom: 1px solid white;
  padding: 0.7em 1em;
  float: left;
}

@media screen and (min-width: 40em) {
  .nav-collapse a {
    margin: 0;
    padding: 1em;
    float: left;
    text-align: center;
    border-bottom: 0;
    border-right: 1px solid white;
  }
}

.nav-collapse ul ul a {
  background: #ececec;
  padding-left: 2em;
}

@media screen and (min-width: 40em) {
  .nav-collapse ul ul a {
    display: none;
  }
}

.nav-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 70px;
  height: 55px;
  float: right;
  text-indent: -9999px;
  overflow: hidden;
  background: #f4421a url("hamburger.gif") no-repeat 50% 33%;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  .nav-toggle {
    background-image: url("hamburger-retina.gif");
    -webkit-background-size: 100px 100px;
    -moz-background-size: 100px 100px;
    -o-background-size: 100px 100px;
    background-size: 100px 100px;
  }
}




/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/*  This is the proper syntax for an @font-face file
        Just create a "fonts" folder at the root,
        copy your FontName into code below and remove
        comment brackets */

/*  @font-face {
        font-family: 'FontName';
        src: url('../fonts/FontName.eot');
        src: url('../fonts/FontName.eot?iefix') format('eot'),
             url('../fonts/FontName.woff') format('woff'),
             url('../fonts/FontName.ttf') format('truetype'),
             url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
        font-weight: normal;
        font-style: normal; }
*/

最佳答案

我想你忘了链接到 jquery 库。您只链接到响应式导航的 jquery，但您需要 Main jquery 库才能工作。

把它放在 responsive-nav.js 的链接之前:

关于html - 响应式导航错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21467270/

27 4 0
文章推荐： c++ - 粉碎堆栈
文章推荐： html - 边框底部小于文本
文章推荐： java - 获取许多网站和服务的主机
文章推荐： html - ExtJS - 行渲染器 - 如果单元格具有特定值，则突出显示整行
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com