Tampilan website sangat banyak macamnya dari website banyak halaman sampai dengan website satu halaman atau one page, pada kesempatan kali ini saya akan memberikan tips dan triki bagaimana caranya Membuat Website One Page Vertical Menu Javascript dan HTML. Nah seperti yang kita tahu kalau website one page banyak orang yang suka dengan fiturnya karena sangat apik dan simple, juga penggunaan nya sangat mudah dibanding dengan website banyak halaman. Di bawah ini adalah screen shoot website one page dengan menu vertical
Selain itu juga tampilan responsive
Baik sekarang kita akan implementasikan Membuat Website One Page Vertical Menu Javascript dan HTML, seperti biasa teman-teman siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vertical Layout with Navigation</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<nav class="nav">
<div class="burger">
<div class="burger__patty"></div>
</div>
<ul class="nav__list">
<li class="nav__item">
<a href="#1" class="nav__link c-blue"><i class="fa fa-camera"></i></a>
</li>
<li class="nav__item">
<a href="#2" class="nav__link c-yellow scrolly"><i class="fa fa-coffee"></i></a>
</li>
<li class="nav__item">
<a href="#3" class="nav__link c-red"><i class="fa fa-music"></i></a>
</li>
<li class="nav__item">
<a href="#4" class="nav__link c-green"><i class="fa fa-paper-plane"></i></a>
</li>
</ul>
</nav>
<section class="panel b-blue" id="1">
<article class="panel__wrapper">
<div class="panel__content">
<h1 class="panel__headline"><i class="fa fa-camera-retro"></i> Cameras</h1>
<div class="panel__block"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea molestias ducimus, eos asperiores, ab officia sint nostrum quia, corporis officiis id praesentium expedita numquam ad non error optio est in.</p>
</div>
</article>
</section>
<section class="panel b-yellow" id="2">
<article class="panel__wrapper">
<div class="panel__content">
<h1 class="panel__headline"><i class="fa fa-bolt"></i> Coffee</h1>
<div class="panel__block"></div>
<p>Paleo authentic mlkshk taxidermy, vinyl meditation lomo drinking vinegar sartorial raw denim Thundercats bitters selvage listicle. Keffiyeh Williamsburg gastropub McSweeney's.</p>
</div>
</article>
</section>
<section class="panel b-red" id="3">
<article class="panel__wrapper">
<div class="panel__content">
<h1 class="panel__headline"><i class="fa fa-music"></i> Music</h1>
<div class="panel__block"></div>
<p>Beard sriracha kitsch literally, taxidermy normcore aesthetic wayfarers salvia keffiyeh farm-to-table sartorial gluten-free mlkshk. Selvage normcore 3 wolf moon, umami Kickstarter artisan meggings cardigan drinking vinegar bicycle rights.</p>
</div>
</article>
</section>
<section class="panel b-green" id="4">
<article class="panel__wrapper">
<div class="panel__content">
<h1 class="panel__headline"><i class="fa fa-paper-plane"></i> Paper Planes</h1>
<div class="panel__block"></div>
<p>90's wayfarers lomo you probably haven't heard of them trust fund banh mi. Flannel Shoreditch dreamcatcher, quinoa flexitarian Banksy pickled post-ironic lo-fi. Photo booth asymmetrical tousled letterpress.</p>
</div>
</article>
</section>
</body>
</html>
Kemudian save dengan index.html, langkah berikutnya tambahkan css nya di link ini. Lalu panggil file nya di dalam tag <head>
<link rel="stylesheet" type="text/css" href="css/style.css">
Berikutnya tambahkan Javascript nya, teman – teman bisa download juga di sini dan panggil
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
Nah teman-teman copy link di atas ini dan pastekan tepat di atas tag penutup body “</body>”, jika sudah. Baru kita panggil link – link yang lain seperti fotn awesome, font google dsb.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
Langkah berikutnya teman-teman tinggal save dan jalankan pada browser nya, maka website one page dengan vertical menu nya sudah berhasil di buat.
Baik, sekian dulu pada artikel kali ini tentang Membuat Website One Page Vertical Menu Javascript dan HTML. Kita berjumpa kembali pada artikel berikutnya, terimakasih dan sampai jumpa.
Semoga bermanfaat 🙂