BootStrap 3ビルディングメインページ

私は、メインページを作成したいと思います。メニューとナビトップは画面上に固定する必要があります。コンテンツのみがスクロール可能である必要があります。BootStrap 3ビルディングメインページ

メニューが展開されると、コンテンツは右にプッシュされ、要素が内部で並べ替えられることなく右にプッシュされるため、右のコンテンツの一部が画面外に隠されます。メニューが展開されます。

は、ここで画像を説明するために、次のとおりです。

Collapsed menu

Expanded menu

（申し訳ありませんが、私はので、私の低い評判の画像を埋め込むことはできません）

だから私は、メニューを置くと、それを展開してコンテンツを右にプッシュします。マウスがメニューの外に出ると、それは崩壊し、アイコンのみを表示します。

私はこれをほとんど管理しましたが、私はあなたにコードを与えることはできません、それはプロです。

私はCSSの初心者ですが、私にとっては大変でしたが、私はこのページを構築するためには何もしませんでした。

メニューとコンテンツをfloat: leftに貼り付けましたが、新しいページを読み込んだときにコンテンツがメニューに表示されるため、メニューアイコンをクリックできなくなりました。

出典

2017-06-29 Vincent Ducroquet

あなたは

function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    document.getElementById("main").style.marginLeft = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementById("main").style.marginLeft= "0"; 
 
}

.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
#main { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
}

<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
</div> 
 

 
<div id="main"> 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 
</div>

出典

2017-06-29 09:30:49 codesayan

、このデモを試すことができます私は私が正しくあなたのポストを理解している場合、あなたが望むどのように動作するはずです、このを作りました。サイドナビゲーションメニューの上にマウスを置くと、数行のJqueryがアニメーションに使用されます。アイコンとテキストだけのプレースホルダです

$(document).ready(function(){ 
 
    $(".sidenav").hover(function(){ 
 
    $(".hidetext").stop(true).toggle("fast"); 
 
    }); 
 
});

html, body{ 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.navbar { 
 
    margin-bottom: 0 !important; 
 
} 
 

 
.sidenav-wrapper { 
 
    margin-top: 51px; 
 
} 
 

 
.sidenav { 
 
    background-color: aquamarine; 
 
    height: 100%; 
 
    display: inline-block; 
 
    float: left; 
 
    z-index: 1; 
 
    position: fixed; 
 
} 
 

 
.sidenav span { 
 
    font-size: 45px; 
 
    padding: 20px; 
 
} 
 

 
.sidenav span .hidetext { 
 
    font-size: 18px; 
 
    margin-left: 30px; 
 
    margin-top: 12px; 
 
    float: right; 
 
    display: none; /* Changes to inline-block on hover */ 
 
} 
 

 
.main-content { 
 
    margin-top: 51px; 
 
    margin-left: 89px; 
 
    z-index: -1; 
 
    position: absolute; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="main.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <meta charset=utf-8> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="topnav"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
    
 
    <div class="sidenav"> 
 
    <div class="sidenav-wrapper"> 
 
    <span class="glyphicon glyphicon-home home" aria-hidden="true"><a href="#"><p class="hidetext">Home</p></a></span> 
 
    <br> 
 
    <span class="glyphicon glyphicon-cog" aria-hidden="true"><a href="#"><p class="hidetext">Options</p></a></span></div> 
 
    </div> 
 
    
 
    <div class="main-content"> 
 
    <p>Stuff on the right of side navigation bar</p> 
 
    <div class="test"></div> 
 
    </div> 
 
    
 
<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> 
 
<script src="script.js"></script> 
 
</body> 
 

 
</html>

出典

2017-06-30 19:17:05 Alex

BootStrap 3ビルディングメインページ

答えて

関連する問題