oleh : Muchamad Eki S.A., S.Kom. M.M.
Selamat Datang di Blog SMK Negeri 1 Panyingkiran untuk Materi Pembelajaran Kerja Proyek

Minggu, 17 September 2017

Menu Drop Down dengan CSS

Menu Drop Down dengan CSS





<!doctype html>

 <style type="text/css">
  body {
   margin:0;
   padding:0;
   line-height: 1.5;
  }
  .menu-wrapper {
   margin:10px auto;
   position: relative;
   width:700px;
  }
  .menu-wrapper ul{
   margin:0;
   padding:0;
   background-color: #333;
  }
   ul.menu-horizontal {
    width:100%;
    position: relative;
   }
   ul.menu-horizontal li {
    list-style: none;
   }
   /*Style menu horizontal*/
   ul.menu-horizontal >li{
    display: inline-block;
   }
   ul.menu-horizontal li a{
    position: relative;
    display: block;
    padding:10px 20px;
    text-decoration: none;
    color:#eee;
   }
   ul.menu-horizontal li a:hover {
    background-color:#4db2ec;
    -webkit-transition:all 0.5s ease-in-out;
   }
   /*Style Tanda panah pada menu yang mempunyai sub menu*/
   ul.menu-horizontal >li >a >span.arrow {
    width:0;
    height: 0;
    border:5px solid transparent;
    border-top:7px solid #eee;
    position: absolute;
    right: 5px;
    top:17px;
    z-index:
   }
 
   /*Style tanda panah pada sub menu level 1 dan level 2*/
   ul.menu-horizontal li ul li span.arrow {
    width:0;
    height: 0;
    border:5px solid transparent;
    border-left:7px solid #eee;
    position: absolute;
    right: 5px;
    top:17px;
    z-index:
   }
 
 
   /*Menyembunyikan sub menu ketika tidak dihover*/
   ul.submenu {
    position: absolute;
    display: none;
   }
 
   ul.submenu li {
    position: relative;
   }
 
   /*untuk menciptakan efek animasi ketika dihover*/
   @-webkit-keyframes mantul-vertikal {
    0%{top: -300px;opacity: 0;}
    50%{top: 120%;opacity: 1;}
    75%{top: 80%;opacity: 1;}
    100%{opacity: 1;top:100%;}
   }
   @keyframes mantul-vertikal {
    0%{top: -300px;opacity: 0;}
    50%{top: 120%;opacity: 1;}
    75%{top: 80%;opacity: 1;}
    100%{opacity: 1;top:100%;}
   }
   @-webkit-keyframes mantul-horizontal {
    0%{left:300%;opacity: 0}
    50%{left: 80%;opacity: 1;}
    75%{left: 110%;opacity: 1;}
    100%{left:100%;opacity: 1}
   }
   @keyframes mantul-horizontal {
    0%{left:300%;opacity: 0}
    50%{left: 80%;opacity: 1;}
    75%{left: 110%;opacity: 1;}
    100%{left:100%;opacity: 1}
   }
   
   /*Menampilkan sub menu level 1 ketika menu di hover*/
   ul.menu-horizontal li:hover ul.level-1 {
    min-width: 150px;
    display: block;
    top:100%;
    -webkit-animation:mantul-vertikal 1s;
    animation:mantul-vertikal 1s;
   }
 
   /*Menampilkan sub menu level 1 ketika menu di hover*/
   ul.menu-horizontal li ul li:hover ul.level-2 {
    min-width: 150px;
    display: block;
    -webkit-animation:mantul-horizontal 1s;
    animation:mantul-horizontal 1s;
    top:0;
    left:100%;
   }
 </style>


<div class="menu-wrapper">
<ul class="menu-horizontal">

<li><a href="#">Materi 1<span class="arrow"></span></a>
   <ul class="submenu level-1">
 
          <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/materi-bahasan-simulasi-digital.html">Materi Bahasan</a>
         </li>
         <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/mengetik-10-jari.html">Mengetik 10 Jari</a>
         </li>
         <li><a href="#">Pengolah Kata<span class="arrow"></span></a>

  <ul class="submenu level-2">

         <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengolah-kata.html">Pengertian, Fungsi dan Contohnya</a></li>
         <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/pengunaan-shortcut-pada-keyboard-dalam.html">Penggunaan Shortcut pada Keyboard</a></li>
   </ul>
  </li>

  <li><a href="#">Pengolah Angka<span class="arrow"></span></a>
    <ul class="submenu level-2">
    <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengolah-angka.html">Pengertian, Fungsi dan Contohnya</a></li>
    </ul>
  </li>

  <li><a href="#">Komunikasi Daring<span class="arrow"></span></a>
    <ul class="submenu level-2">
    <li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
    </ul>
  </li>

  </ul>
</li>





<li><a href="#">Materi 2<span class="arrow"></span></a>
  <ul class="submenu level-1">

  <li><a href="#">Kelas Maya<span class="arrow"></span></a>
    <ul class="submenu level-2">
    <li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
    </ul>
  </li>

  <li><a href="#">Presentasi Video<span class="arrow"></span></a>
    <ul class="submenu level-2">
    <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengertian-presentasi-video-fungsi-dan.html">Pengertian, Fungsi dan Contohnya</a></li>
    </ul>
  </li>

  <li><a href="#">Simulasi Visual<span class="arrow"></span></a>
    <ul class="submenu level-2">
    <li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
    </ul>
  </li>

  <li><a href="#">Buku Digital<span class="arrow"></span></a>
    <ul class="submenu level-2">
    <li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
    </ul>
  </li>

  </ul>
</li>




<li><a href="#">Video Tutorial<span class="arrow"></span></a>
  <ul class="submenu level-1">
  <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/link-video-tutorial-simulasi-digital.html">Link Video Tutorial Simulasi Digital Kelas 10</a>
  </li>

  <li><a href="#">Microsoft Excel<span class="arrow"></span></a>
    <ul class="submenu level-2">
    <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-countifs.html">Excel-Countifs</a></li>
    <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-data-validation.html">Excel-Data Validation</a></li>
    <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-conditional.html">Excel-Conditional Formating</a></li>
    <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/artikel-dan-video-tutorial-excel-filter.html">Excel-Filter-Sort</a></li>
    </ul>
    </li>
  </ul>
</li>




<li><a href="#">Informasi<span class="arrow"></span></a>
  <ul class="submenu level-1">
  <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/about-me.html">About Me</a></li>
  <li><a href="http://smkn1panyingkiran.sch.id">Web Sekolah</a></li>
  <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/paket-keahlian-di-smk-negeri-1.html">Kompetensi Keahlian</a></li>
  <li><a href="#">Presentasi<span class="arrow"></span></a>
    <ul class="submenu level-2">
    <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/presentasi-kelas-digital-edmodo.html">Presentasi Kelas Digital Intermediate</a></li>
    <li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/presentasi-dan-tutorial-pembuatan-blog.html">Presentasi dan Tutorial Pembuatan Blog Sebagai Media Pembelajaran</a></li>
    </ul>
    </li>
  </ul>
</li>



<li><a href="#">Evaluasi<span class="arrow"></span></a>
  <ul class="submenu level-1">
  <li><a href="https://docs.google.com/forms/d/e/1FAIpQLScx9NEMTNjqVH_p6Lxl25Evu_qrnLHSYqE4TcxW0pTecQZKMg/viewform">Pengelolaan Informasi</a></li>
  </ul>
</li>




</ul>
</div>

</!doctype>






sumber :
http://smkn1panyingkiran.sch.id