Kali ini kita akan mencoba mebuat sebuah layout web, dengan beberapa menu atau navigasi. Seperti menu home, about dan contact. Namun ketika kita klik menu tersebut kita tidak akan menjumpai halaman yang baru, melainkan masih dihalaman yang sama (index). Teknik melayout seperti ini biasanya disebut One Page Layout.
\n
\nUntuk tutorial kali ini juga kita akan mencoba membuat menu atau navigasi berada disebelah kiri dari layout utama. Disaat kita melakukan gulir (scroll) kebawah, menu tersebut tetap (Fixed) pada posisi awal.<\/p>\n
Langsung saja kita praktekkan ya teman-teman,<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>One Page Layout & Fixed Side Nav<\/title>\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"style\/style.css\">\r\n\t<script type=\"text\/javascript\" src=\"js\/jquery-3.2.1.js\"><\/script>\r\n <script type=\"text\/javascript\" src=\"js\/jquery.scrollto.js\"><\/script>\r\n <script type=\"text\/javascript\" src=\"js\/scroll.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\t<div id=\"wrapper\">\r\n\t\t<div id=\"header\">\r\n\t\t\t<h1>One Page Layout & Fixed Side Nav<\/h1>\r\n\t\t<\/div><!-- end of header -->\r\n\t\t<div id=\"nav-anchor\"><\/div>\r\n\t\t<div id=\"content\">\r\n\t <nav>\r\n\t <ul>\r\n\t <li><a href=\"#home\">Home<\/a><\/li>\r\n\t <li><a href=\"#about\">About<\/a><\/li>\r\n\t <li><a href=\"#gallery\">Gallery<\/a><\/li>\r\n\t <li><a href=\"#contact\">Contact<\/a><\/li>\r\n\t <\/ul>\r\n\t <\/nav>\r\n\t\t\t<div class=\"c-article\">\r\n\t\t\t\t<section id=\"home\">\r\n\t\t\t\t\t<h2>Home<\/h2>\r\n\t\t\t\t\t<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.<\/p>\r\n\t\t\t\t<\/section>\r\n\r\n\t\t\t\t<section id=\"about\">\r\n\t\t\t\t\t<h2>About<\/h2>\r\n\t\t\t\t\t<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.<\/p>\r\n\t\t\t\t<\/section>\r\n\r\n\t\t\t\t<section id=\"gallery\">\r\n\t\t\t\t\t<h2>Gallery<\/h2>\r\n\t\t\t\t\t<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.<\/p>\r\n\t\t\t\t<\/section>\r\n\r\n\t\t\t\t<section id=\"contact\">\r\n\t\t\t\t\t<h2>Contact<\/h2>\r\n\t\t\t\t\t<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.<\/p>\r\n\t\t\t\t<\/section>\r\n\t\t\t<\/div>\r\n\t\t<\/div><!-- end of content -->\r\n\t\t<div id=\"footer\">\r\n\t\t\t<p>Hak Cipta © 2017 | <a class=\"fot-brand\" href=\"http:\/\/www.yellowweb.id\/blog\" target=\"_blank\">YELLOWWEB.ID<\/a><\/p>\r\n\t\t<\/div><!-- end of footer -->\r\n\t<\/div><!-- end of wrapper -->\r\n\r\n<\/body>\r\n<\/html><\/pre>\nYang perlu kita perhatikan adalah source yang menuju ke file javascript<\/p>\n
<script type=\"text\/javascript\" src=\"js\/jquery-3.2.1.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/jquery.scrollto.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/scroll.js\"><\/script><\/pre>\nterdapat beberapa file javascript, seperti library utama, serta dua plugin lainnya sebagai efek scroll serta aktivasinya.<\/p>\n
Jangan lupa untuk menambahkan kode berikut ini:<\/p>\n
<div id=\"nav-anchor\"><\/div><\/pre>\nberguna ketika halaman discroll.
\nUntuk lebih jelasnya hasilnya bisa dilihat dibawah ini, dan silahkan berkreasi sampai jumpa diartikel berikutnya.<\/p>\n