Home Trik dan Tips Tutorial Blog Cara Membuat Menu Dropdown Sederhana

Cara Membuat Menu Dropdown Sederhana

Cara Membuat Menu Dropdown Sederhana - Pada kesempatan ini saya akan memberikan tutorial Cara Membuat Menu Dropdown Sederhana, mungkin artikel ini tidak asing lagi bagi sahabat blogger profesional, tetapi masih banyak blogger pemula yang masih kebingungan untuk membuatnya.

Gambar Ilustrasi : Cara Membuat Menu Dropdown Sederhana

DropDown Menu atau Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain

Cara Membuat Menu Dropdown Sederhana adalah sebagai berikut :

1. Buka akun blogger anda.

2. Pilih menu template > klik Edit Html

3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>

nav {     display: block;     margin-top: 100px;     background: #374147; }  .menu {     display: block; }  .menu li {     display: inline-block;     position: relative;     z-index: 100; }  .menu li:first-child {     margin-left: 0; }  .menu li a {     font-weight: 600;     text-decoration: none;     padding: 20px 15px;     display: block;     color: #fff;     transition: all 0.2s ease-in-out 0s; }  .menu li a:hover,.menu li:hover>a {     color: #fff;     background: #9ca3da; }  .menu ul {     visibility: hidden;     opacity: 0;     margin: 0;     padding: 0;     width: 150px;     position: absolute;     left: 0px;     background: #fff;     z-index: 99;     transform: translate(0,20px);     transition: all 0.2s ease-out; }  .menu ul:after {     bottom: 100%;     left: 20%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none;     border-color: rgba(255, 255, 255, 0);     border-bottom-color: #fff;     border-width: 6px;     margin-left: -6px; }  .menu ul li {     display: block;     float: none;     background: none;     margin: 0;     padding: 0; }  .menu ul li a {     font-size: 12px;     font-weight: normal;     display: block;     color: #797979;     background: #fff; }  .menu ul li a:hover,.menu ul li:hover>a {     background: #9ca3da;     color: #fff; }  .menu li:hover>ul {     visibility: visible;     opacity: 1;     transform: translate(0,0); }  .menu ul ul {     left: 149px;     top: 0px;     visibility: hidden;     opacity: 0;     transform: translate(20px,20px);     transition: all 0.2s ease-out; }  .menu ul ul:after {     left: -6px;     top: 10%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none;     border-color: rgba(255, 255, 255, 0);     border-right-color: #fff;     border-width: 6px;     margin-top: -6px; }  .menu li>ul ul:hover {     visibility: visible;     opacity: 1;     transform: translate(0,0); }  .responsive-menu {     display: none;     width: 100%;     padding: 20px 15px;     background: #374147;     color: #fff;     text-transform: uppercase;     font-weight: 600; }  .responsive-menu:hover {     background: #374147;     color: #fff;     text-decoration: none; }  a.homer {     background: #9ca3da; }  @media (min-width: 768px) and (max-width: 979px) {     .mainWrap {         width: 768px;     }      .menu ul {         top: 37px;     }      .menu li a {         font-size: 12px;     }      a.homer {         background: #374147;     } }  @media (max-width: 767px) {     .mainWrap {         width: auto;         padding: 50px 20px;     }      .menu {         display: none;     }      .responsive-menu {         display: block;         margin-top: 100px;     }      nav {         margin: 0;         background: none;     }      .menu li {         display: block;         margin: 0;     }      .menu li a {         background: #fff;         color: #797979;     }      .menu li a:hover,.menu li:hover>a {         background: #9ca3da;         color: #fff;     }      .menu ul {         visibility: hidden;         opacity: 0;         top: 0;         left: 0;         width: 100%;         transform: initial;     }      .menu li:hover>ul {         visibility: visible;         opacity: 1;         position: relative;         transform: initial;     }      .menu ul ul {         left: 0;         transform: initial;     }      .menu li>ul ul:hover {         transform: initial;     } }  @media (max-width: 480px) { }  @media (max-width: 320px) { }

5. Selanjutnya letakan kode html di bawah ini tepat di bawah kode </header>

<nav><a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>        <ul class="menu"><li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>   <ul class="sub-menu"><li><a href="#">Sub-Menu 1</a></li><li><a href="#">Sub-Menu 2</a></li><li><a href="#">Sub-Menu 3</a></li><li><a href="#">Sub-Menu 4</a></li><li><a href="#">Sub-Menu 5</a></li></ul></li><li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li><li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>  <ul class="sub-menu"><li><a href="#">Sub-Menu 1</a></li><li><a href="#">Sub-Menu 2</a>    <ul><li><a href="#">Sub Sub-Menu 1</a></li><li><a href="#">Sub Sub-Menu 2</a></li><li><a href="#">Sub Sub-Menu 3</a></li><li><a href="#">Sub Sub-Menu 4</a></li><li><a href="#">Sub Sub-Menu 5</a></li></ul></li><li><a href="#">Sub-Menu 3</a>    <ul><li><a href="#">Sub Sub-Menu 1</a></li><li><a href="#">Sub Sub-Menu 2</a></li><li><a href="#">Sub Sub-Menu 3</a></li><li><a href="#">Sub Sub-Menu 4</a></li><li><a href="#">Sub Sub-Menu 5</a></li></ul></li></ul></li><li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li><li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>  <ul class="sub-menu"><li><a href="#">Sub-Menu 1</a></li><li><a href="#">Sub-Menu 2</a>    <ul><li><a href="#">Sub Sub-Menu 1</a></li><li><a href="#">Sub Sub-Menu 2</a></li><li><a href="#">Sub Sub-Menu 3</a></li><li><a href="#">Sub Sub-Menu 4</a></li><li><a href="#">Sub Sub-Menu 5</a></li></ul></li><li><a href="#">Sub-Menu 3</a>    <ul><li><a href="#">Sub Sub-Menu 1</a></li><li><a href="#">Sub Sub-Menu 2</a></li><li><a href="#">Sub Sub-Menu 3</a></li><li><a href="#">Sub Sub-Menu 4</a></li><li><a href="#">Sub Sub-Menu 5</a></li></ul></li></ul></li><li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li><li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li></ul></nav>

6. Langkah terakhir simpan kode di bawah ini tepat di atas kode </body>

Cara Membuat Menu Dropdown Sederhana

Related Post

0 comments:

Post a Comment

Send Quick Massage

Pages