slicknav не отображается, но распознается - PullRequest
Новая
       24

slicknav не отображается, но распознается

0 голосов
/ 19 сентября 2018

Я пытался включить меню slicknav в свой школьный проект, я не совсем новичок в программировании, и я считаю, что моя ошибка довольно проста, но после 3 часов работы над мозгом я не могу найти решение длямоя проблема, некоторая помощь, понимание или советы о том, как ее исправить или, возможно, улучшить мой код, будет принята с благодарностью.(кстати, у меня уже есть функционирующее выпадающее меню для некоторых вещей, но я бы хотел иметь slicknav для мобильных экранов 

html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shape up!</title>
<link rel="shortcut icon" href="images/favicon.ico">
<!--^^^TITLE LOGO^^^-->
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<link href="styles/main_rwd.css" rel="stylesheet" type= "text/css">
<link href="styles/slicknav.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src="js/jquery.slicknav.min.js"></script>
<!--    <script href="js/jquery.slicknav.min.js"></script>-->
<script type="text/javascript">
<script>
   $(function(){
    $('#nav_menu').slicknav();
});
</script>
</head>
<header>
<img src="images/shape_up_logo.png" alt="Shape up logo">
<!--^^^SITE LOGO^^^--> 
<h1 id="logo"><a href="/index.html">Shape Up!</a></h1>
<h3>Find the best fit for you!</h3>
</header>

<body>
<main>
 <nav id="nav_menu">
     <ul>
         <li><a href="index.html" class="current">Home</a></li>
         <li><a href="strength/index.html">Strength Training</a>
             <ul>
                 <li></li>
             </ul>
         </li>
         <li><a href="cardio/index.html">Cardio Exercises</a></li>
         <li><a href="stress/index.html">Stress Relief</a>
            <ul>
                 <li><a href="stress/index.html">What is Stress?</a></li>
                 <li><a href="stress/tips.html">5 Helpful Tips</a></li>
                 <li><a href="stress/meditate.html">Meditation</a></li>
                 <li><a href="stress/vipassana.html">Vipassana</a></li>
             </ul>
         </li>
         <li><a href="diet/index.html">Healthy Diets</a>
             <ul>
                 <li><a href="diet/index.html">Why a Healthy Diet?</a></li>
                 <li><a href="diet/meals.html">Plan Your Meals</a></li>
                 <li><a href="diet/calories.html">Count Your Calories</a> 
                 </li>
                 <li><a href="diet/bmi.html">Calculate Your BMI</a></li>
             </ul>
         </li>
     </ul>
  </nav>

И следующая часть - это код CSS, относящийся к slicknav 

slicknav_menu {
display:none;
}

@media only screen and (max-width: 900px) {
body {
    box-shadow: none;
    font-size: 90%;
}
}
/*
TABLET SIZE^^^
.slicknav_menu {
display:none;
}
*/

@media only screen and (max-width: 767px) {

#nav_menu {
    display: none; 
}
.js .slicknav_menu {
    display: block;
}

}

Я прокомментировал некоторые вещи по причинам, связанным с устранением неполадок, любая помощь будет признательна, так как я, возможно, все равно пропустил простую вещь

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Я, наконец, это сделал!Однако мне жаль говорить, что я точно не знаю, как я это сделал.Я удалил кое-что здесь и там, я не совсем помню, что именно удалил.хотя я предоставлю код для любого, кто сталкивается с подобной проблемой, я знаю, что должен работать над тем, чтобы получить его там, где он мне нужен.Раздел основного скрипта: 

   <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
   <script src="js/jquery.slicknav.min.js"></script>
        <script>
   $(function(){
   $(document).ready(function(){$(body).addClass('js')}) 
   $('#nav_menu').slicknav();
   });
   </script>

и файл css: 

 .slicknav_menu {
 display:none;
 }

 @media only screen and (max-width: 900px) {
 body {
    box-shadow: none;
    font-size: 90%;
}
}



 @media only screen and (max-width: 767px) {

 #nav_menu {
    display: none; 
 }
 .slicknav_menu {
    display: block;
    position: inherit;
 }

 }
0 голосов
/ 19 сентября 2018

Ваше правило стиля: 

.js .slicknav_menu {
    display: block;
}

Ищет класс .js, которого нет в вашем документе.Типичное использование класса .js состоит в том, чтобы динамически добавить его в тег <body> с помощью javascript, чтобы вы могли по-разному управлять сайтом для пользователей с включенным и отключенным JavaScript.

Попробуйте удалить .js из вашегоправило стиля или динамически добавьте .js с чем-то вроде $(document).ready(function(){$(body).addClass('js')})

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...