Question

我正在为我的Wordpress网站上的响应式移动导航工作一个jQuery脚本。我设置它使我的导航菜单位于右侧，当我点击按钮时，它向左滑动，html标签随之移动。

我对这个脚本有一些问题，我可能在这里遗漏了一些东西。

首先，菜单按钮只允许我打开和关闭菜单一次，然后每次点击它都会自动开始关闭，直到我刷新页面。

其次，如果我打开手机菜单并将窗口加宽到1080px的媒体查询，则导航菜单消失，html标签向左浮动250px，留下菜单所在的间隙。我可以在jQuery中添加一个自动关闭菜单的命令，并在屏幕宽度超过1080px时将html标签重新滑过吗？

使用Javascript：

jQuery(document).ready(function($) {

$('img.menu.button').click(function() {
    $('html').animate({
    'right' : "250px"}); //moves left 

    $('nav.header-nav').animate({
    'right' : "0px"}); //moves left 


$('img.menu.button').click(function() {
    $('html').animate({
    'right' : "0px"}); //moves right 

    $('nav.header-nav').animate({
    'right' : "-250px" //moves right 



            });
        });
    });
});

CSS：

@media only screen 
and (min-width : 0px) 
and (max-width : 1080px) {

img.standard.logo {
height: 38px;
width: 342px;
}

/* RESPONSIVE NAVIGATION MENU */

img.menu.button {
position:relative; 
display:block;
width:25px;
height:25px; 
background-size: 100%;
}

nav.header-nav {
z-index:10;
position:fixed;
top:0px;
right:-250px;
width:250px;
height:100%;
float:right;
margin:0;
padding:0;

background-color:#1D1D1F;
list-style:none; 
box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
}

部首：

<header class="header">
    <!-- LOGOS -->
    <a href="#">
        <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
        <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
    <!-- LOGOS -->
    <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
    <!-- HEADER NAVIGATION MENU -->
    <nav class="header-nav">
        <div class="menu-header-menu-container">
            <ul id="menu-header-menu" class="menu">
                <li id="menu-item-463">
                    <a href="#">WORK</a>
                    <ul class="sub-menu">
                        <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                        <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                        <li id="menu-item-478"><a href="#">MACRO</a></li>
                        <li id="menu-item-477"><a href="#">CITIES</a></li>
                        <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                        <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
                    </ul>
                </li>
                <li id="menu-item-10"><a href="#">ABOUT</a></li>
                <li id="menu-item-464"><a href="#">SHOP</a></li>
                <li id="menu-item-923">
                    <a href="#">SOCIAL</a>
                    <ul class="sub-menu">
                        <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                        <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                        <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
                    </ul>
                </li>
                <li id="menu-item-14"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </nav>
</header>

Answer 1

我会通过创建一个打开导航的类来简化，在jQuery中切换。设置width: 0而不是使用right的负值（这应该照顾你的第二个问题（如果我理解正确的话），并使用CSS过渡来设置宽度的动画。

全宽看起来有点奇怪，但它似乎超出了你的问题的范围。您可以设置CSS规则，以便按照媒体查询的方式显示它。此外，我建议不要在这种情况下使用jQuery做任何响应，似乎没必要。

我还在.header-nav元素上设置white-space: nowrap，以便元素不会在切换期间更改换行。

小提琴：https://jsfiddle.net/rplittle/bjfwf2o5/

＆＃13;

jQuery(document).ready(function($) {
  $('img.menu.button').click(function() {
    $('nav.header-nav').toggleClass('open');
  });
});

＆＃13;

@media only screen and (min-width: 0px) and (max-width: 1080px) {
  img.standard.logo {
    height: 38px;
    width: 342px;
  }
  /* RESPONSIVE NAVIGATION MENU */
  img.menu.button {
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
    background-size: 100%;
  }
  nav.header-nav {
    /* added rules */
    transition: width .5s ease-in-out;
    white-space: nowrap;
    right: 0;
    z-index: 10;
    position: fixed;
    top: 0px;
    width: 0;
    height: 100%;
    float: right;
    margin: 0;
    padding: 0;
    background-color: #1D1D1F;
    list-style: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  nav.header-nav.open {
    /* added */
    width: 250px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
  <!-- LOGOS -->
  <a href="#">
    <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
    <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png">
  </a>
  <!-- LOGOS -->
  <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
  <!-- HEADER NAVIGATION MENU -->
  <nav class="header-nav">
    <div class="menu-header-menu-container">
      <ul id="menu-header-menu" class="menu">
        <li id="menu-item-463">
          <a href="#">WORK</a>
          <ul class="sub-menu">
            <li id="menu-item-584"><a href="#">LANDSCAPES</a>
            </li>
            <li id="menu-item-473"><a href="#">SEASCAPES</a>
            </li>
            <li id="menu-item-478"><a href="#">MACRO</a>
            </li>
            <li id="menu-item-477"><a href="#">CITIES</a>
            </li>
            <li id="menu-item-475"><a href="#">LONG EXPOSURE</a>
            </li>
            <li id="menu-item-480"><a href="#">MISCELLANEOUS</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-10"><a href="#">ABOUT</a>
        </li>
        <li id="menu-item-464"><a href="#">SHOP</a>
        </li>
        <li id="menu-item-923">
          <a href="#">SOCIAL</a>
          <ul class="sub-menu">
            <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a>
            </li>
            <li id="menu-item-924"><a href="#">INSTAGRAM</a>
            </li>
            <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-14"><a href="#">CONTACT</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

＆＃13;

Answer 2

我会设置你的css类来使用jQuery toggle类方法。首先，我不会使用html部分，我会添加一个主容器div来控制网站等。

以下是与工作版本的更深入的链接：Click here

<div class="menu-wrapper">
  <a href="">link</a>
</div>

<div class="main-container">
  <header>Hello
    <button id="menu-btn">MENU</button>
  </header>
</div>

CSS

html, body {
padding:0; 
  margin:0;
}

.main-container {
  position: absolute;
  right:0;
  width: 100%;
  max-width:100%;
  height: auto;
  background: grey;
  transition: all 800ms;
}

header {
  margin: 0;
  padding: 10px 0px;
  width: 100%;
  max-width: 100%;
  postion: relative;
  height:40px;
 }
#menu-btn {
   padding: 5px 8px;;
  position: relative;
  right: 10px;
  top: 2px;
  float: right;
  border: 0;
  border-radius: 4px;
  height: 30px;
  cursor: pointer;
  transition: background 800ms, color 800ms;
}
#menu-btn:hover {
  background: white;
  color: black;
 }
.menu-wrapper {
  position: absolute;
  top: 0; 
  right: -250px;
  bottom: 0;
  width: 250px;
  background: red;
  z-index:2000;
  transition: all 800ms;
}
.main-container.open {
  right: 250px;
}
.menu-wrapper.open {
  right: 0;
}

JS

$('#menu-btn').on('click', function(evt){
   evt.preventDefault();
   $('.main-container,.menu-wrapper').toggleClass('open');
 })

//-- check for browser resize
$(window).resize(function() {
  var scrWidth = $(window).width();
  //-- lets remvoe class if screen goes beyond mobile with
  if(scrWidth > 1080) {
      $('.main-container,.menu-wrapper').removeClass('open');
  }

 });

使用jQuery

2 个答案: