Sebelumnya telah menyajikan tutorial Cara gampang menciptakan hidangan dropdown, kita sudah mencar ilmu cara menciptakan hidangan ialah dengan html dan css, Untuk tutorial kali ini akan menunjukkan tutorial Cara Membuat Menu Navigasi Yang Dapat di Drag and Drop. Untuk lebih mudahnya silahkan teman-teman tulis code HTML berikut ini.
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="draggable" id="draggable"> <nav> <ul> <li><a href="#">Konsep Dasar</a></li> <li> <a href="#">Website Programing</a> <ul> <li><a href="#">HTML & CSS</a></li> <li><a href="#">Pemograman PHP</a></li> <li><a href="#">Pemograman Java</a></li> </ul> </li> <li><a href="#">Web Desain</a></li> <li><a href="#">Database</a></li> <li><a href="#">Bootstrap</a></li> </ul> </nav> </div> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#draggable" ).draggable(); } ); </script> </body> </html> Silahkan teman-teman perhatikan code HTML diatas pada bab script kita memakai jquery yang berfungsi untuk drag dan drop, disini kita memakai jquery-nya secara online jikalau teman-teman menggunakannya secara offline, teman-teman sanggup mendownload jquery tersebut pada website resminya. Kemudian kita tambahkan CSS untuk perbaiki tampilan dari hidangan navigasi tersebut. Silahkan teman- sahabat tulis code CSS berikut dan simpan dengan nama file style.css atau nama lain yang teman-teman inginkan yang terang extensinya harus .css, lalu letakan pada folder yang sama dengan file HTML yang sudah teman-teman buat sebelumnya, alasannya pada file HTML diatas kita menghubungkan file HTML dan File CSS memakai metode External Style.
body { margin: 0px; padding: 0px; } nav { float: left; } nav ul { list-style: none; margin: 0px; padding: 0px; } nav ul li { width: 150px; padding: 15px; position: relative; background-color: #34495e; border-top: 1px solid #bdc3c7; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } nav ul li:hover { background-color: #2ecc71; } nav > ul > li { border-right: 4px solid #f1c40f; } nav ul ul { transition: all 0.3s; opacity: 0; position: absolute; visibility: hidden; border-left: 4px solid #f1c40f; left: 100%; top: -2%; } nav ul li:hover > ul { opacity: 1; visibility: visible; } nav ul li a { color: #fff; text-decoration: none; } nav > ul > li:nth-of-type(2)::after { content: "+"; position: absolute; margin-left: 10%; color: #fff; font-size: 20px; } Jika semua sudah siap, mari kita jalankan file yang sudah kita buat tadi pada web browser maka hasil nya akan terlihat menyerupai gambar dibawah ini, silahkan teman-teman coba drag hidangan tersebut.
Sedikit klarifikasi buat teman-teman yang memakai jquery-nya secara offline sanggup mendownload jquery tersebut dan meletakannya pada folder yang sama dengan file CSS dan HTML yang sudah teman-teman buat, pada file html ganti kedua code <script src="https://code.jquery.com/jquery-1.12.4.js"></script> dengan code ini <script type="text/javascript" src="nama-file-teman-teman"></script>. pada SRC ganti dengan nama file Jquery yang sudah teman-teman download. Sekian tutorial wacana Cara Membuat Menu Navigasi yang sanggup di Drag and Drop biar sanggup membantu teman-teman dalam menciptakan dan memperlajari website.
No comments:
Post a Comment