Responsif menu Menggunakan CSS dan JavaScript

Pada program kali ini akan memperlihatkan tetntang html dan css. Kode ini akan mengajarkan Anda tentang cara untuk menerapkan menu responsif di situs responsif. Saya hanya menggunakan CSS dan JavaScript untuk kode ini. Kode ini sangat mudah untuk diterapkan pada website Anda. Fitur kode ini secara otomatis akan menyesuaikan desain menu ketika perubahan ukuran halaman.

Untuk memahami lebih baik berikut langkah- langkahnya:

Membuat Tampilan Awal

Copy kode di bawah ini dan simpan sebagai "index.html". File ini termasuk JAVASCRIPT, HTML tag dan menghubungkan file CSS.

Copy dan paste kode di bawah di bawah tag kepala file index.html Anda.



<link rel="stylesheet" href="style.css" media="screen">


<!-- javascript -->


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">


</script>


<script> 


$(document).ready(function(){


  $("#resmenu").click(function(){


 $("#menudo").slideToggle("slow");


  });


});


</script>

Membuatr UL LI Untuk Menu

Copy dan Paste kode yang ada dibawah ini simpan kedalam file index.html yang telah dbuatl.



<div id="menu">


 <ul>


  <li><a class="active" href="#">Menu 1</a>


   <ul>


    <li><a href="#">Menu 1.1</a></li>


    <li><a href="#">Menu 1.2</a>


     <ul>


      <li><a href="#">Menu 1.2.1</a></li>


      <li><a href="#">Menu 1.2.2</a></li>


     </ul>


    </li>


   </ul>


  </li>


  <li><a href="#">Menu 2</a>


   <ul>


    <li><a href="#">Menu 2.1</a></li>


    <li><a href="#">Menu 2.2</a>


     <ul>


      <li><a href="#">Menu 2.2.1</a></li>


      <li><a href="#">Menu 2.2.2</a></li>


     </ul>


    </li>


   </ul>


  </li>


  <li><a href="#">Menu 3</a></li>


  <li><a href="#">Menu 4</a></li>


  <li><a href="#">Menu 5</a></li>


  <li><a href="#">Menu 6</a></li>


 </ul>


</div>





<div id="resmenu">


 <div id="lineline">


  <div id="linebar">


  </div>


  <div id="linebar">


  </div>


  <div id="lastline">


  </div>


 </div>


 Menu


</div>


<div id="menudo">


</div>

Menulis JAVASCRIPT

Kode dibawah ini akan memungkinkan kita untuk menduplikasi isi dari tag #menu dan tampilan dalam tag #menu. Salin kode di bawah dan paste di bawah tag body.



<script type="text/javascript">





   var MyDiv1 = document.getElementById('menu');


   var MyDiv2 = document.getElementById('menudo');


   MyDiv2.innerHTML = MyDiv1.innerHTML;





</script>

Membuat file CSS Style

Kode atau koding dibawah ini mengajarkan kita membuat desain untuk website yang akan kita buat. copy dan paste kode dibawah ini simpan dengan nama "style.css".



body {


 margin: 0;


 font-family: arial;


 line-height: 1.5em;


}


#menu ul li:hover > ul {


 display: block;


}


#menu ul li a:hover > ul {


 display: block;


}


#menu{


 width: auto;


 margin-top: 11px;


 margin-left: 20px;


}


#menu ul ul {


 text-align:left !important;


 display: none;


}


#menu ul {


 list-style: none outside none;


 display: block;


 line-height:1px;


 padding:0;


}


#menu ul:after {


display: block;


}


#menu ul li {


 float: left;


 position:relative;


 line-height:19px;


}


#menu > ul > li > a:hover {


 border-bottom: 4px solid #0097C4 !important;


 color:#0097C4;


 background-repeat: repeat;


}





#menu ul li a {


 color: #666666;


 font-size: 12px;


 padding: 27px 15px 33px 15px;


 text-decoration: none;


 text-transform: uppercase;


 border-bottom: 4px solid #00FF00 !important;


 display: block;


 position: relative;


 transition: all 0.2s linear 0s;


 position:relative;


}


#menu .active{


 border-bottom: 4px solid #0097C4 !important;


 color:#0097C4;


 background-repeat: repeat;


}


#menu ul ul {


 border-top: 1px solid #ECECEC !important;


 position: absolute;


 z-index:1;


 background-color: #FFFFFF;


 border: 1px solid #ECECEC;


 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);


 margin-left:-1px !important;


 margin-top: 1px !important;


}


#menu ul ul li {


 float: none;


 position: relative;


 margin-right: 0 !important;


 width:230px;


 line-height:19px;


 margin: -1px 0 0;


 border-left: medium none;


}


#menu ul ul li a {


 font-size: 12px;


 padding: 8px 10px !important;


 text-transform: uppercase;


 border: medium none !important;


 border-bottom: 1px solid #ECECEC !important;


} 


#menu > ul > li > ul > li > a:hover {


 color: #0097C4 !important;


}


#menu ul ul ul {


 position: absolute; left: 100%; top:0;


 width:230px;


}


#menu ul ul ul li a {


 padding: 8px 10px;


}


#menu ul ul ul li a:hover {


 color: #0097C4 !important;


}





#resmenu{


 display: none;


 background-color: #555555;


    color: #FFFFFF;


    cursor: pointer;


    font-size: 23px;


    padding: 10px;


}


#linebar {


    background-color: #FFFFFF;


    height: 4px;


    margin-bottom: 4px;


}


#lineline {


    float: left;


    height: 19px;


    margin-right: 7px;


    width: 20px;


 margin-top: 1px;


}


#lastline {


    background-color: #FFFFFF;


    height: 4px;


}


#menudo{


 display: none;


 background-color: #555555;


}


a {


 text-decoration: none;


}


#menudo ul {


    margin: 0;


 padding: 0;


 list-style: none;


}


#menudo ul ul li a {


 padding-left: 20px;


}


#menudo ul ul ul li a {


 padding-left: 30px;


}


#menudo ul li {


    border-top: 1px solid #747474;


}


#menudo ul li a {


    color: #FFFFFF;


    display: inline-block;


    font-size: 17px;


    padding: 10px 0 10px 10px;


}


@media only screen and (max-width: 767px) {


#menu {


 display: none;


}


#resmenu{


 display: block;


}


}


@media only screen and (min-width: 480px) and (max-width: 767px) {


#menu {


 display: none;


}


#resmenu{


 display: block;


}


}

Setelah selesai semua maka tinggal menjalankan dengan klik run google chorome jika menggunakan notepad++, jika tidak klik saja langsung pada index.html maka akan menuju hasil dari program yang telah dibuat...

silahkan dicoba :)

untuk kode lebih lengkap download pada link dibawah

Download Code

sumber: sourcecodester.com.

Home

Tutorial Coding