Membuat Templates Web Menjadi Responsive - Assalamualaikum Warahmatullahi Wabarakathuh dalam jumpa kita kali ini kami akan membahas bagaimana caranya agar tampilan web yang kita buat menjadi responsive, web desain yang responsive (RWD)merupakana suatu hal yang sangat diperlukan bagi anda yang ingin membuat suatu web agar terlihat menarik dan rapih untuk dibaca oleh para client untuk itu kami akan memberikan sedikit tutorial mengenai mengubah desain web menjadi responsive supaya bisa diakses dengan bantuan css murni.
1. Mula-mula buatlah kerangka web yang ingin dibuat simpan file berikut dengan nama myTemplate.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Menu With Multilevel Dropdown</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="Stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<div class="menu-wrapper">
<button class="menu-toggle">Menu</button>
<div class="multi-level-responsive-menu">
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<h2 style="margin:0 auto; margin: 20px; color:blue">Membuat Tampilan Web Responsive</h2>
<h3 style="margin:0 auto; margin: 20px; color:blue">By Young Informatics</h3>
<div class="isi" style="background-color:rgb(80,130,210); width:95%; padding:10px 15px; color:white; font-family: pristina; margin:0 auto; font-size: 20px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
2. Nah Setelah html tsb disimpan buat dan simpanlah sebuah file yang bernama style.css dalam satu folder yang sama sesuai dengan lokasi file diatas
* {
padding:0;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-box-sizing:border-box;
}
img {
max-width: 100%;
height: auto;
}
ul,ol {
list-style-type: none;
}
body {
background-color: #0273c7;
font-family: 'Arial', sans-serif;
}
.page-title {
font-family: 'cambria', serif;
margin:17px auto;
text-align: center;
color:#fff;
font-size: 17px;
}
.page-title h1 {
font-size:40px;
line-height: 1;
}
.page-title a{
color:#ff7777;
text-decoration: none;
}
.page-title a:hover{
text-decoration: underline;
color: #ff3333;
}
.container {
max-width:700px;
min-height: 500px;
width:100%;
padding:10px;
margin:auto;
background-color:rgb(80,190,125);
}
.menu-wrapper {
margin:10px auto;
position: relative;
width:100%;
}
.menu-wrapper ul{
margin:0;
padding:0;
}
.multi-level-responsive-menu {
background-color: #333;
clear: both;
display: block;
width: 100%;
}
.menu-toggle {
display: none;
}
.multi-level-responsive-menu ul {
padding:0;
display: table;
width: 100%;
list-style: none;
}
.multi-level-responsive-menu ul li ul li:first-child {
border-top: 1px solid #DD3D36;
}
.multi-level-responsive-menu ul li {
position: relative;
display: inline-block;
float:left;
}
.multi-level-responsive-menu ul li:last-child {
border-right: 0;
}
.multi-level-responsive-menu ul li a{
display: block;
text-align: center;
padding:11px 20px;
color:#fff;
text-decoration: none;
line-height: 1;
font-weight: 500;
font-size: 14px;
}
.multi-level-responsive-menu ul li.active a{
background-color:#DD3D36 ;
}
.multi-level-responsive-menu ul li:not(.active) a:hover {
background-color:#DD3D36 ;
}
ul.menu li span.arrow-bottom,
ul.menu li span.arrow-right {
position: absolute;
top:15px;
right:7px;
border:5px solid transparent;
width:0;
height:0;
}
ul.menu li span.arrow-bottom {
border-top-color: #fff;
}
ul.menu li span.arrow-right {
border-left-color: #fff;
}
@media(min-width: 768px) {
.multi-level-responsive-menu ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
height: 0;
width: 0;
background-color: #333;
-webkit-transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
transition:opacity 0.5s;
top:100%;
left: 0;
padding: 0;
min-width: 200px;
}
.multi-level-responsive-menu ul li ul li{
white-space: nowrap;
display: block;
width: 100%;
}
.multi-level-responsive-menu ul li ul li a {
width: 100%;
border-radius: 0;
color:#fff;
padding:10px 20px;
text-align: left;
}
.multi-level-responsive-menu ul li a i {
margin-left: 10px;
float: right;
font-weight: 500;
margin-top: 5px;
}
.multi-level-responsive-menu >ul >li:hover >ul {
visibility: visible;
opacity: 1;
height: auto;
width: auto;
display: block;
z-index: 999;
}
.multi-level-responsive-menu >ul >li >ul li:hover >ul {
visibility: visible;
opacity: 1;
height: auto;
width: auto;
display: block;
z-index: 999;
left:100%;
top: 0;
}
.multi-level-responsive-menu >ul >li >ul li >ul li:hover >ul{
visibility: visible;
opacity: 1;
height: auto;
width: auto;
display: block;
z-index: 999;
left:100%;
top: 0;
}
}
@media (max-width: 767px) {
button.menu-toggle {
display: block;
color: #fff;
background-color: #333;
border:0;
padding:10px 20px;
text-align: right;
width: 100%;
outline: none;
cursor: pointer;
}
button.menu-toggle.active {
background-color: #DD3D36;
}
.multi-level-responsive-menu {
display: table;
}
.multi-level-responsive-menu ul.menu {
display: none;
}
.multi-level-responsive-menu ul li {
display: block;
width: 100%;
float: none;
}
.multi-level-responsive-menu ul li a{
text-align: left;
padding:10px;
}
.multi-level-responsive-menu ul li ul {
width: 100%;
position: relative;
left:0 !important;
padding-left: 10px;
display: none;
}
}
.halaman{
width: 700px;
height:auto;
background-color:green;}
1. Tampilan dekstop
ok...., demikianlah tutorial kami semoga informasi ini bermanfaat bagi anda, Wasalamualaikum WR.WB
0 komentar:
Posting Komentar