Anzeige Dropdown-Menü in der Nähe von Hamburger Symbol, wenn es angezeigt wird

Wie kann ich ein vorhandenes Dropdown-Menü in der Nähe von Hamburger-Menü korrekt anzeigen, wenn es angezeigt wird?Anzeige Dropdown-Menü in der Nähe von Hamburger Symbol, wenn es angezeigt wird

Ich habe versucht, auf diese Weise zu finden, aber keinen Erfolg. Kann es nicht richtig herausziehen! Habe auch keine Beispiele dafür gefunden. Ein neues Dropdown-Menü zu erstellen und ein anderes zu verstecken, ist kein Problem, aber es ist nicht so einfach, dieses in der Nähe des Hamburger-Menüs zu verschieben. Für mich, ofcorse :)

Aber ich denke, danach wird es einige andere Probleme geben. Überlappt sich gegenseitig und so weiter ...

Vielleicht wirklich den einfachsten Weg wählen und einen neuen machen?

Wie auch immer, vielleicht jemand klüger kann es helfen, und zu tun, wenn es nichts :)

Vielleicht für jemand anderen zu tun, wird nützlich sein ...

Hier image ist, wie ich es mir vorgestellt habe

Hier LIVE DEMO

Quelle

2017-11-12 aisiic

<head> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     
 
     <ul class="nav navbar-nav" style="display:inline-block;float:right;position:relative;right:70px;"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Second <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Second-1</a></li> 
 
      <li><a href="#">Second-2</a></li> 
 
      <li><a href="#">Second-3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"   aria-expanded="false" style="right:-60px;"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">First</a></li> 
 
     
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Second <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Second-1</a></li> 
 
      <li><a href="#">Second-2</a></li> 
 
      <li><a href="#">Second-3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Third</a></li> 
 
     <li><a href="#">Fourth</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fifth <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Fifth-1</a></li> 
 
      <li><a href="#">Fifth-2</a></li> 
 
      <li><a href="#">Fifth-3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

Diese Ausrichtung ist in Ordnung, solange die Schaltfläche angezeigt wird, ein besseres Verhalten des Dropdowns, wenn Sie darauf klicken, können Sie die Eigenschaft width ändern.

Quelle

2017-11-12 20:29:54 Obed

Vielen Dank für Ihre Hingabe, aber das war nicht was ich wollte! Ich wollte einen anderen Weg finden - nur irgendwie bewegen Sie es mit CSS! – aisiic

Anzeige Dropdown-Menü in der Nähe von Hamburger Symbol, wenn es angezeigt wird

Antwort

Verwandte Themen