Membuat Side Navigation
halo teman teman kembali lagi di tips dan trik kursus Source Code Aplikasi, klai ini kita akan belajar membangun Side Navigation, seketika saja ktia praktekan yah teman teman..
buka text editor kalian dan beri nama dengan nama index.html
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge>
<meta name=viewport content=width=device-width, initial-scale=1>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Side Nav </title>
<link rel=stylesheet href=style.css>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css integrity=sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u crossorigin=anonymous>
<!-- Optional theme -->
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css integrity=sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp crossorigin=anonymous>
</head>
<body>
<div class =container-fluid >
<div class =row>
<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>
<h2> Contoh Side navigation </h2>
<p> Click Fitur Di Bawah ini </p>
<span style =font-size:30px; cursor:pointer onclick =openNav()> ☰ Fitur </span>
</div> <!-- penutup row -->
</div> <!-- penutup container fluid -->
</body>
</html>
lalu ketikan kode javascript berikut setelah kode penutup span
<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>
<script>
function openNav() {
document.getElementById(“mySidenav”).style.width = “250px”;
}
function closeNav() {
document.getElementById(“mySidenav”).style.width = “0”;
}
</script>
lalu ketikan kode css di bawah ini dan beri nama dengan nama style.css
style.css
body {
font-family: Lato, sans-serif;
}
.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 {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav { padding-top: 15px;}
.sidenav a { font-size: 18px;}
}lalu ketikak script javascript di bawah ini
<script>
function openNav() {
document.getElementById(“mySidenav”).style.width = “250px”;
}
function closeNav() {
document.getElementById(“mySidenav”).style.width = “0”;
}
</script>
sekianlah panduan Membangun Side Navigation, semoga bermanfaat yah teman teman 😀
Sumber https://kursuswebsite.org
