Template admin gunanya untuk mengatur data yang di tampilkan kepada user, baik itu tampilan, jenis huruf, paragraf dan lain sebagainya. Nah kali ini saya akan menshare bagaimana Cara Membuat Template Admin sederhana dengan HTML dan CSS, oke langsung saja kita praktekan.
Pertam tama kalian bisa buka text editor kalian dan ketikan file index.html di bawah ini.
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>admin Template</title>
<!-- 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">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Dumet School</a>
</div>
</nav>
<aside class="sidebar">
<menu>
<ul class="menu-content">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li>
<a href="#"><i class="fa fa-cube"></i> <span>Data Master</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul>
<li><a href="">Merk</a></li>
<li><a href="">Kategori</a></li>
<li><a href="">Produk</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-shopping-basket"></i> <span>Pembelian</span></a></li>
</ul>
</menu>
</aside>
<section class="content">
<div class="inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum suscipit consequuntur in, perspiciatis laudantium ipsa fugit. Iure esse saepe error dolore quod, laboriosam magnam quam totam debitis, ullam cum quasi!
</p>
</div>
</section>
</div>
</body>
</html>
ketika kode javascrip di bawah tag penutup div
<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>
$(“menu li > a”).click(function(e){
$(“menu ul ul”).slideUp(),$(this).next().is(“:visible”) || $(this).next().slideDown(),e.stopPropagation()
});
</script>
Buat file dengan nama style.css
style.css
body{
font-family: 'Quicksand', sans-serif;
}
.wrapper{
width: 100%;
height: 100%;
}
.navbar{
margin-bottom: 0;
}
.sidebar{
width: 100%;
height: 100%;
background: #293949;
position: absolute;
z-index: 100;
}
ul{
padding: 0;
margin-left: -40px;
}
ul li{
list-style: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
ul li a{
text-decoration: none;
color: #aeb2b7;
display: block;
padding: 19px 0px 18px 25px;
transition: all 200ms ease-in;
}
ul li a:hover{
text-decoration: none;
color: #1abc9c;
}
ul li a:visited{
text-decoration: none;
color: #fff;
}
li li a span{
display: inline-block;
}
ul ul{
display: none;
margin:0px;
}
ul li a .fa-angle-down{
margin-right: 10px;
}
/*apabila lebar min 768px*/
@media(min-width: 768px) {
.sidebar{
width: 240px;
}
.content{
margin-left: 250px;
}
.inner{
padding: 15px;
}
}
tampilan nya akan seperti di bawah ini, dan ini hanya sebuah tampilan yang fungsi fungsi nya akan kita buat di artikel berikutnya.
sekian tutorial membuat Membuat Template Admin sederhana dengan HTML dan CSS.
The post Membuat Template Admin sederhana dengan HTML dan CSS appeared first on Kursus Website Terbaik.