Membuat Side Navigation

halo teman teman kembali lagi di tips dan trik kursus dumetschool, klai ini kita akan belajar membuat Side Navigation, langsung 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 Menu Di Bawah ini </p>
	<span style ="font-size:30px; cursor:pointer " onclick ="openNav()"> ☰ Menu </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

function closeNav() {
document.getElementById(“mySidenav”).style.width = “0”;
}
</script>

sekian tutorial Membuat Side Navigation, semoga bermanfaat yah teman teman 😀

Kategori