アニメ付きで閉じることのできるサイド・ナビゲーション・メニューの作成方法を学習します。
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)"
class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
<!-- Add all page content inside this div if you want the side nav to
push page content to the right (not used if you only want the sidenav to
sit on top of the page -->
<div id="main">
...
</div>
/* The side navigation menu */
.sidenav {
height: 100%; /*
100% Full-height */
width: 0; /* 0 width - change this
with JavaScript */
position: fixed; /* Stay in place
*/
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links,
change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top
right corner) */
.sidenav .closebtn {
position:
absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to
the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than
450px, change the style of the sidenav (less padding and a smaller font
size) */
@media screen and (max-height: 450px) {
.sidenav
{padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
下の例は、サイド・ナビゲーション内をスライドし、幅を 250px にします:
/* Set
the width of the side navigation to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
}
/*
Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
Try it Yourself »
以下の例は、サイド・ナビゲーションをスライドし、ページコンテンツを右にプッシュします (sidenav の幅を設定に使用する値は "page content" の左マージンを設定するためにも使用されます):
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
Try it Yourself »
下の例では、サイド・ナビゲーションでスライドし、ページ・コンテンツを右にプッシュします。 このときは、body 要素に 40% の不透明度を持つ黒の背景色を追加し、サイドナビゲーションを「強調表示」します:
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px and add a black background color to body */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0, and the background color of body to
white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
Try it Yourself »
下の例は、左側からサイドナビゲーションにスライドし、ページ全体をカバーします(幅 100%):
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.width
= "100%";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
Try it Yourself »
下の例では、アニメーションを使わずにサイド・ナビゲーションメニューを開閉します:
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.display
= "block";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
}
Try it Yourself »
チップ:ナビゲーションバーの詳細については、CSS Navbar チュートリアルをご覧ください。