0
Я пытаюсь создать это мобильное меню.Неполадка при работе с мобильным навигационным меню
https://anythinggraphic.net/responsive-mobile-navigation-menu/
Я добавил весь код и когда я получаю страницу в мобильный видовом, страница не делает ничего, кроме показывают два набора периодов «...». В отличие от фрагмента, страница на самом деле показывает список, как только он попадает в указанный видовой экран, он показывает периоды. У меня есть реализованный код мета-виджета и JQuery vocab.
Что я делаю неправильно?
$(document).ready(function(){
\t $(function() {
\t // Insert Responsive Navigation Icon, Close Icon, and Overlay
\t // If you have access to your HTML, you should put this directly into your markup.
\t $('<div class="responsive-nav-icon" />').appendTo('.row.one');
\t $('<div class="responsive-nav-close" />').appendTo('nav');
\t $('<div id="overlay" />').insertAfter('footer');
\t // Navigation Slide In
\t $('.responsive-nav-icon').click(function() {
\t \t $('nav').addClass('slide-in');
\t \t $('html').css("overflow", "hidden");
\t \t $('#overlay').show();
\t \t return false;
\t });
\t // Navigation Slide Out
\t $('#overlay, .responsive-nav-close').click(function() {
\t \t $('nav').removeClass('slide-in');
\t \t $('html').css("overflow", "auto");
\t \t $('#overlay').hide();
\t \t return false;
\t });
});
});.responsive-nav-icon::before,
.responsive-nav-close::before {
color: #93a748;
content: "\f0c9";
font-family: FontAwesome;
font-size: 22px;
position: relative;
}
.responsive-nav-close::before {
color: #93a748;
content: "\f00d";
font-size: 18px;
}
.responsive-nav-icon {
\t background: #fff;
\t line-height: normal;
\t padding: 5px 8px 4px;
\t top: 5%; left: 5%;
}
.responsive-nav-icon:hover,
.responsive-nav-close:hover {
\t opacity: .7;
}
.responsive-nav-close {
\t top: 10px; right: 10px;
}
.responsive-nav-icon,
.responsive-nav-close {
cursor: pointer;
display: none;
}
#overlay {
background: 0 0 rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
position: fixed;
top: 0; left: 0;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 100%;
z-index: 90;
}
@media only screen and (max-width: 960px) {
\t .responsive-nav-icon,
\t .responsive-nav-close {
\t display: block;
\t position: absolute;
\t z-index: 1;
\t }
\t nav {
\t height: 100%;
\t padding: 20px;
\t position: fixed;
\t top: 0; left: -400px;
\t -moz-transition: all 0.2s linear 0s;
\t -webkit-transition: all 0.2s linear 0s;
\t -ms-transition: all 0.2s linear 0s;
\t transition: all 0.2s linear 0s;
\t width: 0;
\t }
\t
\t nav.slide-in {
\t left: 0;
\t overflow-y: scroll;
\t width: 280px;
\t z-index: 100;
\t }
\t
\t nav .menu-item {
\t \t display: block;
\t }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
\t \t <div class="wrap">
\t \t \t <nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
\t \t \t \t <ul class="menu">
\t \t \t \t \t <li class="menu-item">
\t \t \t \t \t \t <a href="#">Home</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li class="menu-item">
\t \t \t \t \t \t <a href="#">About</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li class="menu-item">
\t \t \t \t \t \t <a href="#">Blog</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li class="menu-item">
\t \t \t \t \t \t <a href="#">Login</a>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t </div>
\t </header>
\t \t
\t <main class="content" itemprop="mainContentOfPage" role="main">
\t \t ...
\t </main>
\t \t
\t <footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
\t \t ...
\t </footer>
Что вы имеете в виду ?? – Paul
Я могу видеть ваш html-код. вы связали только файл jquery. '' Вам также необходимо связать jquery script, который запускает меню. –
У меня был сценарий jquery, закодированный на моей странице. Я не знаю, о какой другой ссылке вы ссылаетесь. – Paul