前提
こちらを参考しに、開閉するサイドメニューを作っています。
※IE11対応にする必要あり。
発生している問題・実現したいこと
参考にしているサイトでは、開くボタンはナビの外<div id="main">
内にあり、デフォルトではメニューが閉じていて完全に見えない状態です。
######実現したいこと
・初期状態でメニューを開いておきたい
・開閉時で開閉のボタンを出し分けたい(例:開いてる時は閉じるボタンのみを表示)
・メニューを閉じた時に50pxほど残した状態にして、開くボタンのみを上の方に表示したい。
######問題
・初期状態でメニューを開いておきたいが、CSS
で250px
と設定すると<div id="main">
の要素に被ってしまう。
・ボタンの出し訳がわからない
該当のソースコード
HTML
1<div id="mySidebar" class="sidebar"> 2 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> 3 <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button> 4 <a href="#">About</a> 5 <a href="#">Services</a> 6 <a href="#">Clients</a> 7 <a href="#">Contact</a> 8</div> 9 10<div id="main"> 11 <h2>Collapsed Sidebar</h2> 12 <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p> 13</div>
JS
1function openNav() { 2 document.getElementById("mySidebar").style.width = "250px"; 3 document.getElementById("main").style.marginLeft = "250px"; 4} 5function closeNav() { 6 document.getElementById("mySidebar").style.width = "50px"; 7 document.getElementById("main").style.marginLeft= "50px"; 8}
css
1.sidebar { 2 height: 100%; 3 width: 250px; 4 position: fixed; 5 z-index: 1; 6 top: 0; 7 left: 0; 8 background-color: #111; 9 overflow-x: hidden; 10 transition: 0.5s; 11 padding-top: 60px; 12} 13.sidebar a { 14 padding: 8px 8px 8px 32px; 15 text-decoration: none; 16 font-size: 25px; 17 color: #818181; 18 display: block; 19 transition: 0.3s; 20} 21.sidebar a:hover { 22 color: #f1f1f1; 23} 24.sidebar .closebtn { 25 position: absolute; 26 top: 0; 27 right: 25px; 28 font-size: 36px; 29 margin-left: 50px; 30} 31.openbtn { 32 font-size: 20px; 33 cursor: pointer; 34 background-color: #111; 35 color: white; 36 padding: 10px 15px; 37 border: none; 38} 39.openbtn:hover { 40 background-color: #444; 41} 42#main { 43 transition: margin-left .5s; 44 padding: 16px; 45} 46/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ 47@media screen and (max-height: 450px) { 48 .sidebar {padding-top: 15px;} 49 .sidebar a {font-size: 18px;} 50}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/23 05:52
2020/01/23 05:54
2020/01/23 05:58
2020/01/23 06:02
2020/01/23 06:59
2020/01/23 07:18
2020/01/23 07:20