Skip to main content

Cara Membuat Menu Slider Berbasis HTML

Hai kembali lagi dengan mimin disini, kali ini mimin bakal Share tutorial berbasis HTML, Yaitu Cara Membuat Menu Slider. Langsung saja kita mulai tutorialnya Yah.
Langkah Pertama
Buat File Baru dengan extension HTML.
Kemudian Buat lah kode seperti dibawah Ini.

<!DOCTYPE html>
<html>
<head>
<title>Menu Slider Berbasis HTML</title>
<style type="text/css">


</style>
</head>
<body>


</body>
</html>
Pastekan ke file yang baru kalian buat.
Langkah Kedua
Kemudian Kita Buat Tempat Menu slider nya, Berikut kode nya.
<img src="header.png" width="250" height="103">

<header>

<input type="checkbox" id="tag-menu"/>

<label class="fa fa-bars menu-bar" for="tag-menu"></label>

<div class="jw-drawer">

  <nav>

    <ul>

    <li><img src="h.png" width="100" height="100"></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Tools</a></li>

      <li><a href="#">Admin</a></li>

      <li><a href="#">Blogger</a></li>

      <li><a href="#">About</a></li>

    </ul>

  </nav>

</div>

</header>
Letakkan kode diatas ini dibawah <body>.
Langkah Ketiga
Kita Tambahkan style CSS nya.
body{

color:#A55842;

background:#6EA597;

font-family: 'Viga', cursive;

}

*{

margin:0;

padding:0;

}

header{

background:#51796F;

}

.menu-bar {

 color:#FFF;

 font-size:18px;

 cursor:pointer;

 padding:4px 2px;

 margin-left:10px;

 margin-top:5px;

 margin-bottom:5px;

}



.menu-bar:hover {

 background-color:rgba(0, 0, 0, 0.1);

 border-radius:5px;

}



#tag-menu {

 display:none;

}





#tag-menu:checked ~ div.jw-drawer {

 animation: slide-in 0.5s ease;

 animation-fill-mode: forwards;

}



.jw-drawer {

 position:fixed;

    transition-timing-function: ease-out;

 left:-280px;

 background-color:#51796F;

 height:100%;

 z-index:100;

 width:145px;

 animation: slide-out 0.5s ease;

 animation-fill-mode: forwards;

 margin-left: 0px;

}



.jw-drawer ul li {

 list-style:none;

}



.jw-drawer ul li a {

 padding:10px 20px;

 text-decoration:none;

 display:block;

 color:#FFF;

 

}



.jw-drawer ul li a:hover{

 background-color:rgba(0, 0, 0, 0.1);

}



.jw-drawer ul li a i {

 width: 15px;

 height:15px;

 text-align:center;

 padding-top:500px;

}



@keyframes slide-in {

 from {left: -280px;}

 to {left: 0;}

}



@keyframes slide-out {

 from {left: 0;}

 to {left: -280px;}

}
Letakkan kode css diatas ini dibawah <style type="text/css">.
Langkah terakhir
Langkah terakhir, adalah memberikan link style sheet nya.
<link href="https://fonts.googleapis.com/css?family=Caveat|Viga|Trade+Winds|Droid+Sans+Mono" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Letakkan link style sheet nya dibawah </title>.
Sekarang tinggal save atau simpan aja, setelah itu coba jalankan di browser kalian masing-masing.
Maka bentuk Hasil nya Akan Seperti ini.
Mungkin itu saja yang bisa mimin berikan, sekian dulu yah tutorial kali ini, semoga Bermanfaat Buat Kita Semua. 
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Text Mengetik Sendiri Dengan JavaScript

Hai sobat codes, kali ini mimin bakal share sebuah tutorial bagaimana Cara Membuat Text Seakan Mengetik sendiri dengan Menggunakan JavaScript. Buatlah Sebuah File Baru dengan extensi HTML. Contoh : mengetik.html Kemudian Untuk Langkah-Langkah nya Sihlakan Ikuti Sesuai langkah-langkah Berikut ini, Perhatikan dengan baik-baik! Langkah Pertama Copy Script HTML dibawah Ini, pastekan Ke file baru yang telah sobat Buat. <!DOCTYPE html> <html> <head> <title>Text Sedang Mengetik...</title> </head> <body> </body> </html> Baca Juga:  Cara Membuat Text Berkedip Dengan JavaScript Langkah Kedua Kemudian, copykan kode JavaScript berikut ini. <script type="text/javascript"> TypingText = function(element, interval, cursor, finishedCallback) {   if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {     this.running = true;     return;   }   this....
Post a Comment
Baca Lebih Lanjut »

Cara Membuat Text Berkedip Dengan JavaScript

Hai sobat codes , kali ini mimin Bakal Share Sebuah Tutorial Bagaimana Sih Caranya Membuat Sebuah Text Berkedap Kedip Hanya Dengan Menggunakan JavaScript, Untuk Memulai Membuat Text Berkedap Kedip, Buat Lah Sebuah File Baru Dengan Nama Sesuai Keinginan kalian. Berikan extensi file tersebut dengan extensi HTML. Contoh : berkedip.html Langkah Pertama Copykan Code HTML berikut ke file yang telah Kalian Buat. <!DOCTYPE html> <html> <head> <title>Contoh Text Berkedip</title> </head> <body> </body> </html> Langkah Kedua Kemudian, Tambahkan Kode JavaScript Berikut ini. <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script> setInterval(function(){      $(".kedip").toggle(); },400); </script> Letakkan dibawah tag <body> . Baca Juga:  Cara Redirect Halaman Web Menggunakan JavaScript Langkah Ketiga Untuk Membuat Text nya menjad...
Post a Comment
Baca Lebih Lanjut »

How To Deface Method Dorking SHELL

Hai sobat codes ,kembali lagi dengan Mimin Disini .Kali ini mimin bakal share sebuah tutorial Deface Metode Dorking SHELL ,Ok langsung saja kita mulai tutorialnya. Sebelum Itu Kita Harus Sudah mempersiapkan Semua Perlatanya . Script Deface Shell Backdoor DORK intext:Uploader By filetype:php intetx:Uploader By filetype:php5 intext:Uploader By filetype:phtml intitle:Uploader By intitle:Mini Shell filetype:php5 intitle:Mini Shell By filetype:phtml intitle:Mini Shell filetype:php filetype:php intext:SMP intitle:Uploader filetype:php intext:SMP intitle:Shell Upload filetype:php intext:SMP intitle:Priv8 Home Root Priv8 Home Root Uploader By inurl:/images/ intitle:sh3ll ext:php intitle:sh3ll ext:php "/public_html/" intitle:"C99Shell v. 1.0 beta (5.02.2005) PHP intitle:"b374k PHP intitle:"b374k-mini-shell PHP intitle:"Cyber Shell PHP intitle:"GFS Web-Shell PHP intitle:"NFM 1.8 PHP intitle:"r57shell PHP intitle:...
Post a Comment
Baca Lebih Lanjut »