Setelah sebelumnya kita mencar ilmu mengenai Cara Membuat Menu Navigasi yang sanggup di Drag and Drop dan Cara Praktis Membuat Menu Dropdown, pada kesempata kali ini akan menawarkan tutorial Cara Paling Praktis Membuat Menu Navigasi Transparan, dalam sebuah website sajian merupakan point paling penting yang harus diperhatikan, alasannya ialah sajian navigasi yang anggun memudahkan pengunjung untuk melihat, menelusuri dan mengakses website teman-teman, oleh alasannya ialah itu ada baiknya bila teman-teman ingin menciptakan menu, maka buatalah sajian tersebut dengan sangat teliti, dimulai dari model menu, pilihan kategori dan pilihan warna sehingga nantiya menciptakan pengujung betah dengan tampilan nya.
Hubungan Menu Navigasi dan SEO
Menu navigasi salah satu komponen penting dalam meningkatkan SEO, dimana Menu navigasi dipakai pengguna internet untuk memudahkan mereka mengakses bab yang mereka inginkan dari website teman-teman dengan cepat. Teman-teman dapat menciptakan sajian navigasi menurut kategori tulisan atau jenis halaman. Untuk meningkatkan SEO dengan Merancang Menu Navigasi , teman-teman bisa menambahkan animasi naik turun (dropdown) pada menu.
Cara Membuat Menu Navigasi Transparat
Dari klarifikasi diatas kita sanggup mengambil kesimpulan sajian yang anggun itu sajian yang simple, lezat untuk dilihat dan yang sanggup menciptakan pengunjung gampang mengakses website dan betah berkunjung pada website teman-teman. Maka dari itu, untuk lebih memudahkan teman-teman untuk memahami cara menciptakan sajian navigasi transparan teman-teman sanggup menulis code dibawah ini pada text editor kesayangan teman-teman, simpan dengan nama file index.html atau dengan nama lain yang penting extensinya harus html.
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { margin: 0px; padding: 0px; background-image: url(46.jpg); background-size: cover; opacity: 0.7; } .logo { float: left; background-color: #238e00; width: 20%; box-shadow: 3px 2px 10px black; } nav { height: 53px; overflow: hidden; background-color: #04863e; float: left; width: 80%; box-shadow: 0px 2px 10px black; } nav ul { display: inline; } nav ul li { display: inline-block; cursor: pointer; padding: 15px; transition: background-color 0.3s; } nav li a { text-transform: uppercase; text-decoration: none; color: #ffffff; font-size: 20px; font-weight: 300; padding: 20px; } nav > ul >li ul { background-color: #04863e; position: absolute; margin-top: 11px; z-index: -1; margin-left: -46px; border-radius: 0px 0px 15px 15px; text-align: center; width: 226px; padding: 4px; visibility: hidden; transition: visibility 0.3s; } nav > ul >li ul> li { margin: 10px; display: inline-block; cursor: pointer; } nav ul li:hover ul{ visibility:visible; //menampilkan sajian ketika pointerr di atasnya } nav ul li:hover { background-color: red; } </style> </head> <body> <div class="logo"> <img src="aslilogo.png" alt=" Setelah sebelumnya kita mencar ilmu mengenai Cara Paling Praktis Membuat Menu Navigasi Transparan"> </div> <nav> <ul> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> <li><a href="">Javascript</a></li> <li><a href="">Php</a></li> <li> <a href="">Database</a> <ul> <li><a href="">Bootstrap</a></li> <li><a href="">node JS</a></li> <li><a href="">AngularjS</a></li> <li><a href="">CodeIgniter</a></li> </ul> </li> </ul> </nav> </body> </html> Sebelum aku jelaskan point penting dari code diatas, silahkan teman-teman buka file html yang sudah teman-teman buat pada web browser, maka kesannya akan menyerupai berikut ini.
Sedikit klarifikasi dari code diatas, pembuatan sajian navigasi transparan ini sama menyerupai pembuatan sajian pada umumnya, akan tetapi pada tutorial Cara Paling Praktis Membuat Menu Navigasi Transparan ada sedikit manipulasi dimana kita memakai property opacity untuk menciptakan warna pada sajian menjadi transparan dan sedikit manipulasi pada submenu dengan menawarkan property z-index biar submenunya berada dibawah sajian dan menawarkan sedikit bayangan dengan property box-shadow. Sekian tutorial dari tentang Cara Paling Praktis Membuat Menu Navigasi Transparan, semoga sanggup mempunyai kegunaan dan membantu teman-teman dalam menciptakan website.
Sumber http://pointwebsite.blogspot.com/
No comments:
Post a Comment