Assalamualakum....
Sahabat pojok code semua, bagaimana kabarnya? mudah-mudahan dalam keadaan baik baik saja. Saat ini ketika kita mengunjungi sebuah halaman wesite sudah tidak jamanya lagi static (hanya bisa tampil versi desktop) pas kita buka dengan mobile harusnya langsung menyesuaikan istilah kerenya responsive. Oleh sebab itu dipostingan kali ini saya mau share sebuah desain tampilan Home yang bisa menyesuaikan denan ukuran layar dan juga side menu yang bisa di buka tutup sesuka pengguna.
Daftar ini postingan:
- Gambaran umum
- Material yang dibutuhkan
- Process Coding
- Testing dan preview
- File Code Latihan
Material yang dibutuhkan
Untuk menunjang process pembuatan halaman seperti gambar diatas, kita membutuhkan- Jquery, untuk ini bisa download dari situs reminya jquery.com
- bootstrap 4.1.0 ini juga bisa download dari situs resminya
- Fontawesome ini juga bisa download versi freenya
- popper ini juga bisa didownlod,
Process Codeing dan Programming
Buatlah dua buah file index.html dan style.cssbuat code pada file index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script defer src="use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
untuk menu sidebar
</nav>
<div id="content" >
<nav class="navbar navbar-expand-lg navbar-light bg-light">
untuk menu top
</nav>
<div class="container-content" >
untuk content
</div>
<footer>
untuk footer
</footer>
</div>
</div>
<script src="code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
karena process penulisan code jadi error postingan :D lihat langsung aja dari file latihan ya
Lihat juga :
tapi ini code untuk file CSS
/*
DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
perspective: 1500px;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/*background: #7386D5;
color: #fff;*/
background:#eeeeee;
transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
transform-origin: bottom left;
}
#sidebar.active {
margin-left: -250px;
transform: rotateY(100deg);
}
#sidebar .sidebar-header {
/*padding: 20px;*/
height:70px;
text-align:center;
padding: 18px;
background:#f8f9fa;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
/*color: #7386D5;
background: #fff;*/
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
/*color: #fff;
background: #6d7fcc;*/
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
/*background: #6d7fcc;*/
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
/*color: #7386D5;*/
}
a.article, a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
/*padding: 20px;*/
min-height: 100vh;
transition: all 0.3s;
}
.navbar-light{
background: #6d7fcc;
}
.container-content{
padding:10px;
min-height: 100vh;
}
#sidebarCollapse {
width: 40px;
height: 40px;
background: #f5f5f5;
cursor: pointer;
}
#sidebarCollapse span {
width: 80%;
height: 2px;
margin: 0 auto;
display: block;
background: #555;
transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
transition-delay: 0.2s;
}
#sidebarCollapse span:first-of-type {
transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
opacity: 0;
}
#sidebarCollapse span:last-of-type {
transform: rotate(-45deg) translate(1px, -1px);
}
#sidebarCollapse.active span {
transform: none;
opacity: 1;
margin: 5px auto;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
transform: rotateY(90deg);
}
#sidebar.active {
margin-left: 0;
transform: none;
}
#sidebarCollapse span:first-of-type,
#sidebarCollapse span:nth-of-type(2),
#sidebarCollapse span:last-of-type {
transform: none;
opacity: 1;
margin: 5px auto;
}
#sidebarCollapse.active span {
margin: 0 auto;
}
#sidebarCollapse.active span:first-of-type {
transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse.active span:nth-of-type(2) {
opacity: 0;
}
#sidebarCollapse.active span:last-of-type {
transform: rotate(-45deg) translate(1px, -1px);
}
}
/*---------------------------------------
footer
----------------------------------------*/
footer{
background-color:#efefef;
}
Selanjutnya kita coba jalankan dan preview. Jika halinya seperti gambar diatas berarti sudah berhasil.
Klik Tombol Dibawah Untuk Memunculkan Link Download :
Tutorial Cara Download File :
EmoticonEmoticon