Список вопросов, связанных с jQuery

Question

Я работаю над сценарием jQuery для гибкого мобильного навигатора на моем сайте Wordpress. Я установил его так, чтобы мое навигационное меню располагалось вправо, и когда я нажимаю кнопку, он скользит влево, а тэг html перемещается вместе с ним.

Есть несколько вопросов, которые возникают у меня с этим скриптом, я, вероятно, что-то здесь не вижу.

Прежде всего, кнопка меню позволяет мне открывать и закрывать меню один раз, а затем автоматически закрывать себя каждый раз, когда я нажимаю на нее, пока не обновляю страницу.

Во-вторых, если у меня открыто меню для мобильных устройств, и я расширяю окно от медиа-запроса на 1080 пикселей, навигационное меню исчезает, а тег html остается плавающим 250 пикселей влево, оставляя пробел, где было меню. Могу ли я добавить команду в jQuery, которая автоматически закроет меню и вернет html-тег назад, когда экран будет шире 1080 пикселей?

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

Я бы множество и па класс CSS использовать тогда метод класса переключения JQuery. Прежде всего я бы не использовать 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'); 
    } 

}); 

Answer 2

Я бы упростить, создав класс для нав будучи открытыми, чтобы быть переключены в JQuery. Задайте вместо отрицательного значения для right (это должно позаботиться о вашей второй проблеме (если я правильно ее понимаю) и использовать переход CSS для анимации ширины.

Полная ширина выглядит немного нечетной , но, похоже, это выходит за рамки вашего вопроса. Вы можете установить правила CSS, чтобы отображать его, как вы хотите, с помощью медиа-запросов. Кроме того, я бы посоветовал не использовать jQuery, чтобы делать что-нибудь отзывчивое в этом случае, это кажется ненужным.

Я также установил white-space: nowrap на .header-навигационный элемент так, чтобы элементы не в конечном итоге изменения завернутые линии во время переключения.

Скрипки: https://jsfiddle.net/rplittle/bjfwf2o5/

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

@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; 
 
    } 
 
}

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