Jumat, 03 Januari 2020

MEMBUAT MENU DROPDOWN SEDERHANA DENGAN CSS



OK Fren... Langsung Aja yaa, Ketikkan kode berikut untuk Menunya :




Untuk mempercantik tampilannya silahkan gunaa kode CSS berikut :


/*Top level items ---------------------------------------*/
 #cssmenu >ul>li>span, #cssmenu >ul>li>a
 {
 font-size:18px;
 color:inherit;
 text-decoration:none;
 padding:10px 10px;
 font-weight:400;
 text-transform:uppercase;
 letter-spacing:2px;
 display:block;
 position:relative;
 transition:all 0.3s;
 vertical-align : bottom ;
 }

 #cssmenu li:hover > span, #cssmenu li:hover > a
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 border-radius : 3px ;
 }

 /*Sub level items ---------------------------------------*/
 #cssmenu .dropdown
 {
 text-align:left; left:0;
 letter-spacing:1px;
 font-size : 13px ;
 color: #222222;
 background-color:#FFFFFF;
 border:none; position:absolute;
 box-shadow: 0 2px 8px #CDCDCD ;
 display:none; opacity:0; cursor:pointer;
 }

 #cssmenu .dropdown li
{
 display: block;
 border-bottom : 0px #cdcdcd inset ;
 }

 #cssmenu .dropdown li > span, #cssmenu .dropdown li > a, #cssmenu .clm a, #cssmenu .clm h3
 {
 font-size:13px;
 font-weight:400;
 font-family:inherit;
 margin:0;
 padding:8px 10px;
 display:block;
 color:inherit;
 text-decoration:none;
 }

 #cssmenu .clm h3 {
 font-size:20px; font-weight:700;
 }

 #cssmenu .sub-item
{
 background-color:#FFFFFF;
 position:relative; transition:all 0.3s;
 }

 #cssmenu .dropdown li:hover
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 }

 #cssmenu .dropdown li:hover > span, #cssmenu .dropdown li:hover > a
 {
 color:#FFFFFF;
 background-color:#77A6F7;
 cursor : pointer ;
 }

 #cssmenu .clm a:hover
 {
 color:#000000; transition:color 0.2s;
 }

 #cssmenu .dropdown.right0
{
left:auto;right:0;
}

 #cssmenu .dropdown li > .dropdown.right0 {left:auto;right:100%20;} #cssmenu li.full-width{ position:static; } #cssmenu li.full-width .dropdown{ width:100%20; left:0; box-sizing:border-box; } #cssmenu li:hover > .dropdown { display:block; opacity:1; z-index:1; } #cssmenu .dropdown li > .dropdown { left:100%20; right:auto; top:0; } #cssmenu ul.dropdown { min-width:240px; /* Sub level menu min width */ } #cssmenu div.dropdown { text-align:center; } /* each column */ #cssmenu .clm { text-align:left; margin:20px; vertical-align:top;/*or middle*/ width:auto; min-width:240px; display:inline-block; *display:inline;*zoom:1; } #cssmenu .clm a:hover { color:#000000; text-decoration:underline; } /*-----------Arrows----------------*/ #cssmenu .arrow { color:inherit; border-style:solid; border-width:2px 2px 0 0; padding:5px; transform:rotate(135deg);margin-top:-10px;margin-left:5px; position:relative; display: inline-block; width: 0; height: 0; vertical-align:middle; overflow:hidden;/*for IE6*/ } #cssmenu .dropdown .arrow { transform:rotate(45deg); top:50%20;margin-top:-7px; position:absolute;left:auto;right:20px; } @keyframes topItemAnimation{ from {opacity: 0; transform:translate3d(-16%20, 0, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} } #cssmenu li a {animation:none;} #cssmenu.active li a { animation: topItemAnimation 0.5s ease 0.5s backwards;} #cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.5s ease 0.08333333333333333s backwards;} #cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.5s ease 0.16666666666666666s backwards;} #cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.5s ease 0.25s backwards;} #cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.5s ease 0.3333333333333333s backwards;} #cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.5s ease 0.4166666666666667s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}


Maka hasilnya akan tampak seperti berikut :





Ok Fren, demikian tutorial kali ini semoga bermanfaat buat fren-fren sekalian, jangan lupa kritik dan saran ya melalui komentar dan Kalo Mau copas silahkan aja tapi mohon sertakan link sumber.
Terima Kasih







Related Posts:

  • Makanan Sehat Berdasarkan Jenis Golongan DarahSebenarnya makanan yang kita makanan sudah sesuai dengan kebutuhan atau belum? Itulah yang sering menjadi pertanyaan. Ternyata konsumsi makanan sangat dipengaruhi oleh jenis golongan darah. Memang benar sekali, diyakini setia… Read More
  • Kisah Seorang Guru Dan MuridGuru : Anak-anak sekarang kita belajar tentang eksistensi, keberadaan atau wujud dari sesuatu. Coba perhatikan apakah kalian dapat melihat meja ini ? Murid-murid : (menjawab) iya… Guru : Artinya meja ini ada. Coba perhatikan … Read More
  • Jam Digital LCD 2x16 Dengan ARDUINO Sebenernya sudah lama pengen ngapdet materi ginian. Alhamdulillah sekarang diberi kesempatan menyapa teman semua dengan satu materi aplikasi Arduino : “Membuat Jam Digital  LCD 2x16”. Sebagai pewaktunya k… Read More

0 Comments:

Posting Komentar

Silahkan Berkomentar..!