Setelah sebelumnya membuat tutorial Cara Paling Praktis Membuat Menu Navigasi Transparan dan Cara Praktis Membuat Menu Dropdown rasanya belum puas kalau belum membahas dan memperlihatkan tutorial tetang menu navigasi responsive, alasannya ialah kini semua harus responsive lantaran responsive salah satu point penting dalam kontes SEO, sebelum kita tutorial Cara Membuat Menu Navigasi Responsive ada baiknya kalau teman-teman mengenal dulu apa itu responsive. Responsive itu ialah desain website yang berbersifat fleksibel terhadap segala perangkat, desain tersebut sanggup mengikuti dan menyesuaikan terhadap bentuk, besar dan kecil dari sebuah device(perangkat). disini tidak jelaskan lebih rinci lantaran responsive itu sendiri sangat kompleks maka butuh tutorial khusus untuk menjelaskan responsive dan telah menciptakan Mengenal Konsep Media Query Dalam Desain Responsive Website. Jika teman-teman sudah mengerti ihwal responvise, mari kita menciptakan sajian 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 lalu simpan dengan nama file index.html atau dengan nama lain sesuai yang teman-teman inginkan, yang terperinci extensinya harus html.
<!DOCTYPE html> <html> <head> <title></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"> <p>Cara gampang menciptakan 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> kalau sudah silahkan buka file code diatas dengan web browser, maka teman-teman akan melihat hasil menyerupai gambar dibawah ini, untuk melihat sajian yang sudah kita buat responsive atau tidak teman-teman sanggup mengecilkan resolusi layar web browser.
Pada tutorial ini aku tidak menjelaskan lagi ihwal cara pembuatan sajian navigasi, alasannya ialah telah memperlihatkan 3 tutorial cara menciptakan sajian navigasi. Dalam tutorial ini aku hanya menjelaskan ihwal cara menciptakan sajian navigasi responsive nya saja. Adapun yang menciptakan sajian diatas sanggup responsive ialah media query, untuk lebih gampang silahkan teman-teman lihat dan perhatikan code CSS Media Query yang kita gunakan pada pembuatan sajian 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 bekerjsama sangat mudah, dimana kita mengatur resolusi dengan memakai max-width, dimana pada code diatas kita sudah memilih value max-width nya sebesar 740px sehingga pada dikala resolusi lebar layar menyentuh 740px maka setiap propery dan value yang sudah kita tentukan akan digantikan dengan property dan value yang gres yang sudah kita tentukan pada media query, Lebih gampang dipahami, bekerjsama kita memakai dua buah CSS satu untuk lebar resolusi PC dan satunya lagi untuk lebar resolusi 740px. Saran aku silahkan teman-teman ubah code diatas dengan resolusi yang berbeda sesuai dengan yang teman-teman inginkan supaya lebih gampang untuk sanggup dipahami. Sekian tutorial dari tentang Cara Paling Praktis Membuat Menu Navigasi Responsive, semoga sanggup membantu teman-teman dalam menciptakan dan memperlajari website.
Sumber http://pointwebsite.blogspot.com/
No comments:
Post a Comment