2017-09-15 70 views
-1

我正在WordPress中定製一個網站,我被困在移動響應菜單中。我希望我的菜單可以觸摸到打開子菜單,但是我可以同時看到所有菜單和子菜單,我也希望菜單打開一半而不是全屏打開。這是我的網站link如何打開Wordpress SubMenu

此媒體查詢隱藏子菜單,但如何打開子菜單時觸摸移動?

@media screen and (max-width: 990px) { 
    .sub-menu {display: none !important;} 

} 

這是我的菜單CSS代碼:

.store-menu { 
    background: #0bb1af none repeat scroll 0 0; 
} 
.main-navigation { 
    clear: both; 
    display: block; 
    float: left; 
    width: 100%; 
} 

.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 
.main-navigation ul.menu li::before { 
    border-right: 1px solid #099896; 
    content: ""; 
    height: 100%; 
    position: absolute; 
    right: -2px; 
    top: 0; 
} 
.main-navigation ul.menu li:last-child::before { 
    border-right: none; 
} 

.main-navigation li { 
    display: inline-block; 
    font-family: "Lato"; 
    font-size: 16px; 
    font-weight: normal; 
    position: relative; 
    text-transform: uppercase; 
    transition: all ease-in-out 0.3s; 
    -webkit-transition: all ease-in-out 0.3s; 
    -moz-transition: all ease-in-out 0.3s; 
} 
.main-navigation li a { 
    display: block; 
    text-decoration: none; 
    padding: 15px; 
    color: #fff; 
} 

.main-navigation ul ul { 
    background: #0bb1af; 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    position: absolute; 
    top: 110%; 
    left: 0; 
    min-width: 200px; 
    white-space: nowrap; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    transition: all ease-in-out 0.3s; 
    -webkit-transition: all ease-in-out 0.3s; 
    -ms-transition: all ease-in-out 0.3s; 
    opacity: 0; 
    visibility: hidden; 
    z-index: 99999; 
} 
.main-navigation ul li:hover > ul.sub-menu { 
    top: 100%; 
    opacity: 1; 
    filter: Alpha(opacity= 100); 
    visibility: visible; 
} 
.main-navigation ul ul.sub-menu li:before { 
    border-right: none; 
    } 
.main-navigation ul ul.sub-menu li { 
    display: block; 
    border-bottom: 1px solid #00908d; 
    position: relative; 
} 
.main-navigation ul ul.sub-menu li:last-child { 
    border-bottom: none; 
} 
.main-navigation ul ul.sub-menu li a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    /*margin-bottom: 5px;*/ 
    font-size: 14px; 
    } 
.main-navigation ul ul.sub-menu li ul { 
    position: absolute; 
    left: 110%; 
    top: 0; 
    border-bottom-left-radius: 0; 
    border-top-right-radius: 5px; 
    } 
.main-navigation ul ul.sub-menu li:hover ul { 
    left: 100%; 
    top: 0; 
    } 

.main-navigation ul ul li:hover > ul, 
.main-navigation ul ul li.focus > ul { 
    left: 100%; 
    top: 100%; 
} 

.nav-menu li a:hover, .main-navigation .current_page_item > a, 
.main-navigation .current-menu-item > a, 
.main-navigation .current_page_ancestor > a { 
    background: #1B8E8D; 
} 
.main-navigation ul li:last-child ul { 
    left: inherit; 
    right: 0; 
} 

.main-navigation ul li:last-child ul ul { 
    left: inherit; 
    right: 110%; 
} 

.main-navigation ul li:last-child ul li:hover ul { 
    border-radius: 5px 0 0 5px; 
    left: inherit; 
    right: 100%; 
} 

@media screen and (min-width: 37.5em) { 
    .menu-toggle { 
     display: none; 
    } 
    .main-navigation ul { 
     display: block; 
    } 
} 

.site-main .comment-navigation, 
.site-main .posts-navigation, 
.site-main .post-navigation { 
    margin: 0 0 1.5em; 
    overflow: hidden; 
    } 

.comment-navigation .nav-previous, 
.posts-navigation .nav-previous, 
.post-navigation .nav-previous { 
    float: left; 
    width: 50%; 
    } 

    .comment-navigation .nav-next, 
    .posts-navigation .nav-next, 
    .post-navigation .nav-next { 
    float: right; 
    text-align: right; 
    width: 50%; 
    } 

回答

1

下面試試這個代碼。

它只是將一個點擊函數綁定到您的#primary-menu所有具有.menu-item-has-children的元素。如果你點擊這個,它會得到最接近的ul,並檢查class是否爲sub-menu。如果沒有,則會阻止點擊和display: block !importantsub-menu

希望這可以幫助你。

jQuery('#primary-menu .menu-item-has-children').click(function(event) { // Bind click function 
    var clickedElement = jQuery(event.target.closest('ul')); // find which element is clicked 
    if (clickedElement.attr("class") != "sub-menu" && window.matchMedia('(max-width: 767px)').matches) { // If the element is NOT a sub-menu and the width of the screen is below 990px 
     event.preventDefault(); // prevent the user from accessing it 
     jQuery(this).find('.sub-menu').attr('style','display: block !important'); // and display the sub-menu 
    } 
}); 

你可以添加一些東西,將刪除所有其他sub-menu的的display: block !important。像這裏面的點擊功能:

+0

謝謝,它的工作。我是jQuery的新手,我如何關閉子菜單?你提到一個else語句,但它不起作用,我還可以在jQuery菜單中添加+嗎?其他{jQuery(this).find('。sub-menu')。attr('style','display:none!important'); } –

+0

對不起,不需要'else'。只需添加:'jQuery('#primary-menu .menu-item-has-children')。find('。sub-menu')。attr('style','display:none');'點擊功能。 –

+0

@MoiezMalik有用嗎? –