Отзывчивая меню с использованием CSS и Javascript

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

function myFunction(){ 
 
    var x = document.getElementById("myMenubar"); 
 
    if (x.className === "menubar"){ 
 
    x.className += "responsive"; 
 
    }else{ 
 
    x.className = "menubar"; 
 
    } 
 
}

.menubar{ 
 
    \t position:absolute; 
 
    \t width:600px; 
 
    \t margin-left:35%; 
 
    \t margin-top:4.5%; 
 
    } 
 
    
 
    .menubar ul{ 
 
    \t overflow:hidden; 
 
    } 
 
    
 
    .menubar ul li{ 
 
    \t display:inline-block; 
 
    \t margin-right:15%; 
 
    \t list-style-type:none; 
 
    } 
 
    
 
    .menubar ul li a{ 
 
    \t text-decoration:none; 
 
    \t color:white; 
 
    } 
 
    
 
    .menubar ul li.icon{display:none;} 
 
    .menubar ul li a:hover{color:red;text-decoration:none;} 
 
    .menubar ul li a.current{color:red;text-decoration:none;} 
 
    
 
    @media screen and (max-width:765px){ 
 
    \t .menubar{ 
 
    \t \t width:130px; 
 
    \t \t margin-left:57%; 
 
    \t } 
 
    \t .menubar ul li:not(:first-child) {display:none;} 
 
    \t .menubar ul li.icon{ 
 
    \t \t float:right; 
 
    \t \t display:inline-block; 
 
    \t } 
 
    } 
 
    
 
    @media screen and (max-width:765px){ 
 
    \t .menubar.responsive ul{position:relative;} 
 
    \t .menubar.responsive ul li.icon{ 
 
    \t \t position:absolute; 
 
    \t \t right:0; 
 
    \t \t top:0; 
 
    \t } 
 
    \t .menubar.responsive ul li{ 
 
    \t \t float: none; 
 
     \t display: inline; 
 
    \t } 
 
    \t .menubar.responsive ul li a{ 
 
    \t \t text-decoration:none; 
 
    \t \t color:white; 
 
    \t \t text-align:center; 
 
    \t } 
 
    }

<div class="menubar" id="myMenubar"> 
 
    \t \t <ul> 
 
     \t \t <li><a href="#" class="current">Home</a></li> 
 
      \t <li><a href="#">About</a></li> 
 
      \t <li><a href="#">Products</a></li> 
 
      \t <li><a href="#">Contact</a></li> 
 
       <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> 
 
     \t </ul> 
 
    </div>

Что я делаю неправильно? Я использую http://www.w3schools.com/howto/howto_js_topnav.asp учебник, и я изменяю немного кода в соответствии с моим дизайном. Я думаю, что база все равно

источник

2017-01-13 ShafiqqAziz

Вы можете использовать рамки Bootstrap для отзывчивого –

@SantoshKhalse хорошо ,, я начну свое исследование, .. спасибо за совет – ShafiqqAziz

Вы хотите изменить

x.className += "responsive";

x.className += " responsive";

На данный момент, ваш класс становится menubarresponsive вместо menubar и responsive.

источник

2017-01-13 07:58:35 southrop

Да, спасибо за ваш ответ .. Это исправить! – ShafiqqAziz

Используйте это !!!

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <nav id="menu" class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Page 1-1</a> 
 
       </li> 
 
       <li><a href="#">Page 1-2</a> 
 
       </li> 
 
       <li><a href="#">Page 1-3</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li><a href="#">Page 2</a> 
 
      </li> 
 
      <li><a href="#">Page 3</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</body> 
 

 
</html>

источник

2017-01-13 07:47:57 ThinhLe

я создам новый, используя свой ответ, , Спасибо! – ShafiqqAziz

OK ... Так я начну, указывая на ошибки:

Существует ошибка в вашем CSS. .menubar.responsive выбирает все элементы с ОБО в названиях классов menubar и отзывчивый.
В вашем javascript также есть ошибка. Свойством classname является строка. Поэтому x.classname += responsive не будет добавлять отзывчивый как другой класс, но будет сцеплять текущее имя класса с responsive, поэтому результат будет menubarresponsive.
Вы не назначили myFunction() любому объекту.

Решение

Вы можете либо изменить CSS, которые я не буду рекомендовать, как это длительный processs, или изменить свой код яваскрипта. Здесь я сменил ваш логический оператор if на простой оператор, который переключает класс responsive.

function myFunction() { 
 
    document.getElementById('myMenubar').classList.toggle('responsive'); 
 
}

.menubar{ 
 
    position:absolute; 
 
    width:600px; 
 
    margin-left:35%; 
 
    margin-top:4.5%; 
 
} 
 

 
.menubar ul{ 
 
    overflow:hidden; 
 
} 
 

 
.menubar ul li{ 
 
    display:inline-block; 
 
    margin-right:15%; 
 
    list-style-type:none; 
 
} 
 

 
.menubar ul li a{ 
 
    text-decoration:none; 
 
    color:white; 
 
} 
 

 
.menubar ul li.icon{display:none;} 
 
.menubar ul li a:hover{color:red;text-decoration:none;} 
 
.menubar ul li a.current{color:red;text-decoration:none;} 
 

 
@media screen and (max-width:765px){ 
 
    .menubar{ 
 
     width:130px; 
 
     margin-left:57%; 
 
    } 
 
    .menubar ul li:not(:first-child) {display:none;} 
 
    .menubar ul li.icon{ 
 
     float:right; 
 
     display:inline-block; 
 
    } 
 
} 
 

 
@media screen and (max-width:765px){ 
 
    .menubar.responsive ul{position:relative;} 
 
    .menubar.responsive ul li.icon{ 
 
     position:absolute; 
 
     right:0; 
 
     top:0; 
 
    } 
 
    .menubar.responsive ul li{ 
 
     float: none; 
 
     display: inline; 
 
    } 
 
    .menubar.responsive ul li a{ 
 
     text-decoration:none; 
 
     color:white; 
 
     text-align:center; 
 
    } 
 
}

<div class="menubar" id="myMenubar"> 
 
     <ul> 
 
      <li><a href="#" class="current" onclick="myFunction()">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Products</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> 
 
     </ul> 
 
</div>

источник

2017-01-13 08:01:32

Отзывчивая меню с использованием CSS и Javascript

ответ

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