Question

我正在尝试构建一个响应式导航，但是当我执行以下步骤时，它似乎会搞砸了： 1.将导航大小调整为小于940px 2.激活菜单然后我再次调整浏览器的大小超过940px。 4.现在菜单不再内联。这一切都搞砸了。

这是我构建的代码。也在codepen上：https://codepen.io/rezasan/pen/YqjNMg HTML：

<header>
  <nav class="clearfix">
    <div class="pullmenu">
    </div>
    <ul class="clearfix">
      <li><a>About</a></li>
      <li><a>Services</a></li>
      <li><a>Products</a></li>
    </ul>
    <div class="logo">
      <a><img src="img/site_assets/logo_nav.png"></a>
    </div>
    <ul>
      <li><a>Media</a></li>
      <li><a>News</a></li>
      <li><a>Contact</a></li>
    </ul>
  </nav>
</header>

CSS：

    header {
      position: fixed;
      z-index: 1;
      width: 100%;
    }

    .logo {
      display: inline-block;
      vertical-align: top;
    }

    .logo img {
      width: 145px;
    }

    .pullmenu {
      display: none;
    }

    nav {
      height: 110px;
      width: 100%;
      background: #fff;
      letter-spacing: 0.2em;
      font-family: 'brandon-grotesque';
      font-weight: 500;
      position: relative;
      text-transform: uppercase;
    }

    nav ul {
      padding: 0;
      margin: 0 auto;
      display: inline-block;
    }

    nav li {
      display: inline;
      float: left;
    }

    nav a {
      display: inline-block;
      text-align: center;
      line-height: 110px;
      padding: 0px 20px;
      font-size: 8pt;
    }

    nav a:hover {
      text-decoration: underline;
    }

    @media screen and (max-width: 940px) {
      .logo {
        display: none;
      }
      nav {
        height: auto;
      }
      nav ul {
        width: 100%;
        display: none;
        height: auto;
      }
      nav li {
        width: 100%;
        float: none;
        position: relative;
      }
      nav li a {
        border-bottom: 1px solid #576979;
      }
      nav ul:last-child li:last-child a {
        border-bottom: none;
      }
      nav a {
        width: 100%;
        text-indent: 25px;
      }
      .pullmenu {
        display: block;
        background: gray;
        height: 110px;
        width: 100%;
        position: relative;
      }
    }

JQuery的：

$(function() {
  var pull = $('.pullmenu');
  menu = $('nav ul');
  menuHeight = menu.height();
  $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });
});

$(window).resize(function() {
  var w = $(window).width();
  if (w > 940 && menu.is(':hidden')) {
    menu.removeAttr('style');
  }
});

请参阅随附的混乱对齐。

Answer 1

找到解决方案。这是因为slideToggle在调整大小恢复到正常屏幕时会更改两个ul以显示为块。解决方案是创建一个包含两个ul的div，并将该div用作要控制的目标。然后媒体查询将在浏览器宽度较短时隐藏类。最后，滑动div来转换div。

http://codepen.io/rezasan/pen/YqjNMg

HTML

    <header>
      <nav class="clearfix">
        <div class="pullmenu">MENU
        </div>
        <div class="nav-group">
          <ul class="clearfix">
            <li><a>About</a></li>
            <li><a>Services</a></li>
            <li><a>Products</a></li>
          </ul>
          <div class="logo"><a><img src="http://placehold.it/200x100"></a></div>
          <ul>
            <li><a>Media</a></li>
            <li><a>News</a></li>
            <li><a>Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>

CSS

    header{
          position: fixed;
          z-index: 1;
          width: 100%;
    }

    .logo{
      display: inline-block;
      vertical-align: top;
    }

    .logo img{
      width: 145px;

    }

    .pullmenu{
      display: none;
    }

    nav {
        height: 110px;
        width: 100%;
        background: #fff;
        letter-spacing: 0.2em;
        font-family: 'brandon-grotesque';
        font-weight: 500;
        position: relative;
        text-transform: uppercase;
    }

    nav ul {
        padding: 0;
        margin: 0 auto;
        display: inline-block;
    }

    nav li {
        display: inline;
        float: left;
    }

    nav a {
        display: inline-block;
        text-align: center;
        line-height: 110px;
        padding: 0px 20px;
        font-size: 8pt;
    }

    nav a:hover{
    text-decoration: underline;
    }

    @media screen and (max-width: 940px) {
        .logo{
          display: none;
        }
        nav { 
            height: auto;
        }
        nav ul {
            width: 100%;
            height: auto;
        }

        .nav-group{
            display:none;
        }

        nav li {
            width: 100%;
            float: none;
            position: relative;
        }
        nav li a {
            border-bottom: 1px solid #576979;
        }

        nav ul:last-child li:last-child a {
            border-bottom: none;
        }

        nav a {
            width: 100%;
            text-indent: 25px;
        }
        .pullmenu {
            display: block;
            background: gray;
            height: 110px;
            width: 100%;
            position: relative;
        }
    }

JQuery的

    $(function() {
        var pull    = $('.pullmenu');
        menu        = $('.nav-group');
        menuHeight  = menu.height();
        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 940 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });

响应式导航在响应模式下激活时会消失，然后再次调整大小

1 个答案: