Responsive Menüleiste mit CSS und Javascript

Ich habe eine reaktive Menüleiste erstellt, die ein Problem festgestellt, wo, wenn ich auf die Dropdown-Taste klicken, gibt es überhaupt keinen Stil.Responsive Menüleiste mit CSS und 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>

Was mache ich falsch? Ich benutze http://www.w3schools.com/howto/howto_js_topnav.asp Tutorial und ich ändere ein bisschen Code, um mein Design zu passen. Ich denke, die Basis sind alle gleich

Quelle

2017-01-13 ShafiqqAziz

Sie Bootstrap Rahmen für reaktions –

können @SantoshKhalse in Ordnung ,, Ich werde mein Studium beginnen, .. danke für deinen Rat – ShafiqqAziz

Sie werden

x.className += "responsive";

x.className += " responsive";

Im Moment ändern wollen, wird Ihre Klasse menubarresponsive statt menubar und responsive.

Quelle

2017-01-13 07:58:35 southrop

ja, danke für deine antwort .. Es repariert es! – ShafiqqAziz

Verwenden Sie es !!!

<!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>

Quelle

2017-01-13 07:47:57 ThinhLe

ich werde eine neue mit Ihrer Antwort erstellen, , Danke! – ShafiqqAziz

OK ... Also werde ich mit dem Hinweis darauf, die Fehler starten:

Es ist ein Fehler in Ihrem CSS. .menubar.responsive wählt alle Elemente mit BEIDEN der Klassennamen Menüleiste und responsive aus.
Es ist auch ein Fehler in Ihrem Javascript. Die Eigenschaft classname ist eine Zeichenfolge. Daher wird keine Antwort als eine andere Klasse hinzufügen, sondern wird den aktuellen Klassennamen mit responsive verketten, so dass das Ergebnis menubarresponsive sein wird.
Sie haben myFunction() keinem Objekt zugewiesen.

Lösung

Sie könnte entweder Ihre CSS ändern, die ich nicht empfehlen, da es ein langwieriger processs ist, oder ändern Sie Ihre JavaScript-Code. Hier habe ich Ihre logische if-Anweisung in eine einfache Anweisung geändert, die die responsive-Klasse umschaltet.

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>

Quelle

2017-01-13 08:01:32

Responsive Menüleiste mit CSS und Javascript

Antwort

Verwandte Themen