ブートストラップ - バーの残りの部分を残さずに固定することができるnavbarボタン

私はBootstrapとjQuery UIを使用して、反応しやすいドラッグアンドドロップゲームを開発しています。ブートストラップ - バーの残りの部分を残さずに固定することができるnavbarボタン

私はページ上部の折りたたみ可能なNavbarを使用しています。ナビゲーションバーを非表示にし、トグルボタンを画面の隅に固定して、下部のボタンにスペースを確保します。

ページのスクリーンショット：私はドロップされた要素を受け取るためにその背後にあるポリゴンを必要とするので、私はナビゲーションバーを設定することはできません

は固定されており、透明であること。

また、ドラッグアンドドロップを妨げるため、スクロールを許可したくありません。ここで

は私のコードです：

<nav role="navigation" class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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="index.php">Connaissez vous Sain<i Style="color: #B34; font-size: 28px" class="fa fa-map-signs" aria-hidden="true"></i>é ?</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li ><a href="index.php"><span class="glyphicon glyphicon-home" 
        aria-hidden="true"></span> Home</a></li> 
       <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
        role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt"></span> 
        Menu <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="quartiers.php">Noms des Quartiers</a></li> 
         <li><a href="#">Centres des Quartiers</a></li> 
         <li><a href="#">Points d'interets</a></li> 
         <li><a href="#">Land Marks</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><i class="fa fa-envelope-o"></i> Contact</a></li> 
      </ul> 
     </div> 
</nav>

更新：

：結果の

nav { position: fixed; top: -60px; } .navbar-toggle { position: relative; top: 60px; z-index: 10; }

スクリーンショット：私はCSSを使用して、簡単な解決策を考え出した

出典

2017-07-22 Mohannad Adham

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</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.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
/* @Media query for mobile only maybe needed here */ 
 
.navbar-brand{ 
 
    display: none; 
 
} 
 
.navbar{ 
 
    float: right; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<nav role="navigation" class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <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="index.php"><i Style="color: #B34; font-size: 28px" class="fa fa-map-signs" aria-hidden="true"></i></a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li ><a href="index.php"><span class="glyphicon glyphicon-home" 
 
        aria-hidden="true"></span> Home</a></li> 
 
       <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
 
        role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt"></span> 
 
        Menu <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="quartiers.php">Noms des Quartiers</a></li> 
 
         <li><a href="#">Centres des Quartiers</a></li> 
 
         <li><a href="#">Points d'interets</a></li> 
 
         <li><a href="#">Land Marks</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#"><i class="fa fa-envelope-o"></i> Contact</a></li> 
 
      </ul> 
 
     </div> 
 
</nav> 
 

 
<script> 
 

 
$(".navbar-toggle").click(function() { 
 
    if($("#navbar").hasClass("in")){ 
 
    $('.navbar').css('float','right'); 
 
    }else{ 
 
    $('.navbar').css('float','none'); 
 
    } 
 
}); 
 
</script> 
 
</body> 
 
</html>

出典

2017-07-22 16:00:50 xxLITxx

ブートストラップ - バーの残りの部分を残さずに固定することができるnavbarボタン

答えて

関連する問題