2015-09-10 4 views
0

Я пытаюсь выяснить, как я могу скрыть падение, когда сайт загружается на мобильный телефон/смартфон или когда я изменяю размер браузера в меньшее окно. Выпадающее меню, которое я создал, появляется немедленно, и мне нужно нажать/на кнопку меню, чтобы он спрятался.Скрыть выпадающее меню при запуске на мобильном телефоне

Вот сайт я создал

http://digitalspin.ph/test/manosa/campanilla-homepage/

Вот код, который я создал

HTML

a#pull{ 
    color: #FFF; 
    font-family:'Open Sans'; 
    text-decoration: none; 
    float: left; 
    width: 54%; 
    text-align: right; 
    display: inline-block; 
    line-height: 67px; 
} 

Javascript

$(document).ready(function(){ 
    $(function() { 
     var pull  = $('#pull'); 
      menu  = $('#menu-primary-menu'); 
      menuHeight = menu.height(); 

     $(pull).on('click', function(e) { 

      menu.slideToggle(""); 
     }); 
    }); 
}); 

$(document).ready(function(){ 
    $(window).resize(function(){ 
     var w = $(window).outerWidth(); 
     if(w > 400 && menu.is(':hidden')) { 
      menu.removeAttr('style'); 
     } 
    }); 
}) 


$(document).ready(function(){ 
    $(window).resize(function(){ 
     var w = $(window).outerWidth(); 
     if(w > 640 && menu.is(':hidden')) { 
      menu.removeAttr('style'); 
     } 
    }); 
}) 
+1

В каком выпадающем списке вы подразумеваете? Я не вижу никаких изначально при использовании Chrome 46. –

+0

Извините, что забыл упомянуть, чтобы посмотреть его на мобильный телефон – clestcruz

ответ

0

У вас есть следующий код в CSS:

@media only screen and (max-width: 380px) { 
    header.secondary-navigation nav ul { 
     float: none; 
    } 
} 

Вы можете добавить display:none; только после float:none;.

+0

Это не касается проблем с jQuery, упомянутых выше. – kwh71787

1

Возможно, вы захотите рассмотреть этот подход.

$(function(){ 
    $("#pull").click(function(){ 
     $("#menu-primary-menu").toggleClass("expanded"); 
    }); 
}); 

Затем немного CSS, чтобы все это работало.

@media only screen and (max-width: 736px) { 
    .menu { 
     height: 0; 
     overflow: hidden; 
    } 
    .menu.expanded { 
     height: auto; 
    } 
} 

Я использую медиа-запрос 736 здесь, чтобы предназначаться весь путь до Iphone 6 +

Этот подход намного легче в браузере телефонов и обычно немного быстрее даже старых телефонов для визуализации.

+0

Попробует :) – clestcruz

Смежные вопросы