Cara Membuat Menu Navigasi yang dapat di Drag and Drop
Sebelumnya Point Website telah menyajikan tutorial Cara mudah membuat menu dropdown, kita sudah belajar cara membuat menu yaitu dengan html dan css, Untuk tutorial kali ini Point Website akan memberikan 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>Point Website</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 bagian script kita menggunakan jquery yang berfungsi untuk drag dan drop, disini kita menggunakan jquery-nya secara online jika teman-teman menggunakannya secara offline, teman-teman dapat mendownload jquery tersebut pada website resminya. Kemudian kita tambahkan CSS untuk perbaiki tampilan dari menu navigasi tersebut. Silahkan teman- teman tulis code CSS berikut dan simpan dengan nama file style.css atau nama lain yang teman-teman inginkan yang jelas extensinya harus .css, kemudian letakan pada folder yang sama dengan file HTML yang sudah teman-teman buat sebelumnya, karena pada file HTML diatas kita menghubungkan file HTML dan File CSS menggunakan 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 seperti gambar dibawah ini, silahkan teman-teman coba drag menu tersebut.
Sedikit penjelasan buat teman-teman yang menggunakan jquery-nya secara offline dapat 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 tentang Cara Membuat Menu Navigasi yang dapat di Drag and Drop semoga dapat membantu teman-teman dalam membuat dan memperlajari website.
Nah ini yang ane lagi cari...nice info izin sedot gan
ReplyDeletewkwk pusing gan, btw nice info
ReplyDeletemksih gan tutorial nya.. sngat berguna buat sy yg lg edit template
ReplyDeletewah keren ini bisa di drag & drop navigasinya
ReplyDeleteThank sob infonya :)
ReplyDeletelangsung saya coba di blog saya gan, makasih infonya :D
ReplyDeletenumpang comot skrip gan,thx dahsharing pengetahuannya.
ReplyDeleteNice 👍
ReplyDeletedemo nya mana gan??
ReplyDeleteKing Kong Gold Slots - Shootercasino
ReplyDeleteKing Kong Gold is งานออนไลน์ the online slot that allows players to play at the most popular and exciting slot games in 인카지노 the Garden State. Rating: 4.3 · 9 votes · Free · Game 제왕 카지노