Cara Paling Mudah Membuat Menu Navigasi Responsive
Setelah sebelumnya Point Website membuat tutorial Cara Paling Mudah Membuat Menu Navigasi Transparan dan Cara Mudah Membuat Menu Dropdown rasanya belum puas jika belum membahas dan memberikan tutorial tetang menu navigasi responsive, sebab sekarang semua harus responsive karena responsive salah satu point penting dalam kontes SEO, sebelum kita tutorial Cara Membuat Menu Navigasi Responsive ada baiknya jika teman-teman mengenal dulu apa itu responsive. Responsive itu adalah desain website yang berbersifat fleksibel terhadap segala perangkat, desain tersebut dapat mengikuti dan menyesuaikan terhadap bentuk, besar dan kecil dari sebuah device(perangkat). disini Point Website tidak jelaskan lebih rinci karena responsive itu sendiri sangat kompleks maka butuh tutorial khusus untuk menjelaskan responsive dan Point Website telah membuat Mengenal Konsep Media Query Dalam Desain Responsive Website. Jika teman-teman sudah mengerti tentang responvise, mari kita membuat menu navigasi responsive, untuk kebutuhan tutorial ini kita membutuhkan Jquery, silahkan teman-teman download jquery pada website resminya. ika sudah silahkan teman-teman tulis code dibawah ini kemudian simpan dengan nama file index.html atau dengan nama lain sesuai yang teman-teman inginkan, yang jelas extensinya harus html.
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #2b2b2b;
}
header {
width: 100%;
height: 100%;
background-color: #1f1f1f;
overflow: hidden;
}
nav {
margin: 0px;
width: 100%;
height: 50px;
background-color: #282828;
box-shadow: 0 0 10px black;
}
nav ul {
overflow: hidden;
margin: 0px;
padding: 0px;
-webkit-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
span.logo {
font-size: 30px;
color: #d6a923;
text-transform: uppercase;
float: left;
font-weight: bold;
}
nav p {
color: white;
text-transform: uppercase;
padding-left: 5px;
font-size: 13px;
}
nav ul li {
display: inline-block;
margin-top: 13px;
}
nav li a {
text-decoration: none;
text-transform: uppercase;
color: white;
font-size: 17px;
padding: 16px;
}
li a:hover {
background-color: #222221;
border-bottom: 2px solid #b6660e;
color: #b6660e;
}
.hendel {
width: 100%;
padding: 10px 10px;
float: left;
background-color: #3d4241;
box-sizing: border-box;
cursor: pointer;
display: none;
font-size: 20px;
color: white;
}
.banner {
width: 50%;
height: 200px;
text-align: center;
float: left;
margin-top: 20px;
}
.banner b {
padding: 20px 0 0 40px;
color: #e9931a;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
}
.banner span {
color: #07b6c5;
}
.banner h2 {
padding-left: 49%;
color: white;
text-transform: uppercase;
margin-bottom: 19px;
}
.button {
width: 85px;
height: 32px;
margin: auto;
display: block;
position: relative;
border: 2px solid #16263a;
border-radius: 11px;
background-color: #1b5d8c;
}
.button .tombol {
display: block;
position: absolute;
bottom: 2px;
line-height: 33px;
font-weight: 400;
background-color: #0095ff;
color: white;
height: 100%;
width: 100%;
text-align: center;
text-transform: uppercase;
box-shadow: 0px 3px 0px #1b5d8c;
border-radius: 6px;
transition: all 0.15s linear;
}
.button:active .tombol {
bottom: 0;
box-shadow: 0px 0px 0px #045f35;
}
.lorem {
margin-top: 10px;
float: left;
width: 50%;
margin-bottom: 10px;
}
.lorem p {
width: 98%;
text-align: justify;
color: white;
padding-bottom: 7px;
}
.lorem h1 {
padding-bottom: 5px;
color: white;
}
.button2 {
width: 110px;
height: 32px;
float: right;
display: block;
margin-right: 10px;
position: relative;
border: 2px solid #16263a;
border-radius: 11px;
background-color: #1b5d8c;
}
.button2 .tombol2 {
display: block;
position: absolute;
bottom: 2px;
line-height: 33px;
font-weight: 400;
background-color: #0095ff;
color: white;
height: 100%;
width: 100%;
text-align: center;
text-transform: uppercase;
box-shadow: 0px 3px 0px #1b5d8c;
border-radius: 6px;
transition: all 0.15s linear;
}
.button2:active .tombol2 {
bottom: 0;
box-shadow: 0px 0px 0px #045f35;
}
@media screen and (max-width: 740px) {
nav ul {
max-height: 0px;
}
.showing {
max-height: 30em;
}
nav ul li {
width: 100%;
box-sizing: border-box;
text-align: left;
padding: 15px 15px 15px 0px;
margin-top: 0px;
}
nav ul li:hover {
background-color: #272d2c;
cursor: pointer;
border-bottom: 2px solid #b6660e;
}
.hendel {
display: block;
}
.hendel img {
float: right;
width: 30px;
height: 30px;
}
.banner {
width: 100%;
height: 170px;
}
.banner b {
margin: 0px;
font-size: 40px;
padding: 0px;
}
.banner h2 {
padding: 0px;
}
.lorem {
width: 100%;
margin-left: 5px;
}
}
</style>
</head>
<body id="body">
<header>
<nav>
<ul>
<a href="http://pointwebsite.blogspot.com">
<span class="logo">Point Website
<p>Cara mudah membuat website</p>
</span>
</a>
<li><a href="http://pointwebsite.blogspot.com">home</a></li>
<li><a href="http://pointwebsite.blogspot.com">about</a></li>
<li><a href="http://pointwebsite.blogspot.com">contact</a></li>
<li><a href="http://pointwebsite.blogspot.com">service</a></li>
<li><a href="http://pointwebsite.blogspot.com">desain</a></li>
</ul>
<div class="hendel"><span class="icon"><img src="icon/nav-r.png"></span></div>
</nav>
<div class="banner">
<b>website <span>desain</span></b>
<h2>Company</h2>
<div class="button">
<a href="http://pointwebsite.blogspot.com" target="_blank"><span class="tombol">Share</span></a>
</div>
</div>
<div class="lorem">
<h1>Premium Desain</h1>
<p>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.
</p>
<div class="button2">
<a href="http://pointwebsite.blogspot.com" target="_blank"><span class="tombol2">read more</span></a>
</div>
</div>
</header>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$('.hendel').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
</body>
</html>
jika sudah silahkan buka file code diatas dengan web browser, maka teman-teman akan melihat hasil seperti gambar dibawah ini, untuk melihat menu yang sudah kita buat responsive atau tidak teman-teman dapat mengecilkan resolusi layar web browser.
Pada tutorial ini saya tidak menjelaskan lagi tentang cara pembuatan menu navigasi, sebab Point Website telah memberikan 3 tutorial cara membuat menu navigasi. Dalam tutorial ini saya hanya menjelaskan tentang cara membuat menu navigasi responsive nya saja. Adapun yang membuat menu diatas dapat responsive adalah media query, untuk lebih mudah silahkan teman-teman lihat dan perhatikan code CSS Media Query yang kita gunakan pada pembuatan menu navigasi responsive ini.
@media screen and (max-width: 740px) {
nav ul {
max-height: 0px;
}
.showing {
max-height: 30em;
}
nav ul li {
width: 100%;
box-sizing: border-box;
text-align: left;
padding: 15px 15px 15px 0px;
margin-top: 0px;
}
nav ul li:hover {
background-color: #272d2c;
cursor: pointer;
border-bottom: 2px solid #b6660e;
}
.hendel {
display: block;
}
.hendel img {
float: right;
width: 30px;
height: 30px;
}
.banner {
width: 100%;
height: 170px;
}
.banner b {
margin: 0px;
font-size: 40px;
padding: 0px;
}
.banner h2 {
padding: 0px;
}
.lorem {
width: 100%;
margin-left: 5px;
}
}
Jika teman-teman perhatikan pada code Media Query diatas sebenarnya sangat mudah, dimana kita mengatur resolusi dengan menggunakan max-width, dimana pada code diatas kita sudah menentukan value max-width nya sebesar 740px sehingga pada saat resolusi lebar layar menyentuh 740px maka setiap propery dan value yang sudah kita tentukan akan digantikan dengan property dan value yang baru yang sudah kita tentukan pada media query, Lebih mudah dipahami, sebenarnya kita menggunakan dua buah CSS satu untuk lebar resolusi PC dan satunya lagi untuk lebar resolusi 740px. Saran saya silahkan teman-teman ubah code diatas dengan resolusi yang berbeda sesuai dengan yang teman-teman inginkan agar lebih mudah untuk dapat dipahami. Sekian tutorial dari Point Website tentang Cara Paling Mudah Membuat Menu Navigasi Responsive, semoga dapat membantu teman-teman dalam membuat dan memperlajari website.
bagus, sngat brmanfaat...
ReplyDeletewahh mantab gan, saran saya sih setiap sintaks nya tolong jelasin apa fungsi nya :D
ReplyDeleteterima kasih om, lumayan buat blog ane..
ReplyDeletekalau buat menu yang ada iconnya di samping gimana?
ReplyDeletewah keren, izin mengaplikasikan tutorialnya di blog gan hehe
ReplyDeletesaya coba dulu gan
ReplyDeletebiar tampilan blog saya jadi responsive
thanks gan, atas kunjungan nya..
ReplyDeletebuat Irvan tq saran nya mas, sebenarnya saya mau jelasain semua code nya, cuman karena saya sudah pernah post 3 buah tutorial tentang menu pada Point Website jadi saya tidak jelasin lagi..
thx, artikel nya sangat menambah pengetahuan saya.
ReplyDeleteijin praktek :D
ReplyDeleteSaya save dl y gan. Kyknya perlu sy coba make css ini biar agak keren blig saya..
ReplyDelete