Rabu, 01 November 2017

Mega Menu Dropdown dengan CSS

     No comments
Mega menu adalah jenis dropdown menu yang menampilkan dropdown besar. Dropdown besar tersebut biasanya berisi halaman banyak sekali link, dan terkadang juga memiliki paragraf. Mega Menu digunakan pada situs-situs besar yang memiliki banyak sekali konten dan jenis halaman sehingga membutuhkan navigasi yang banyak, seperti situs-situs pemerintahan. Jadi, Mega Menu kurang cocok jika diterapkan pada blog. Navigasi menu memegang peranan penting dalam memberi petunjuk kepada visitor tentang kategori konten apa yang dimiliki.

Ciri-ciri menu pada mega menu dropdown
  1.  Menu akan muncul secara dropdown ketika dilakukan mouse hover
  2.  Menampilkan semua pilihan dalam panel yang besar
  3.  Menggunakan icon atau gambar untuk membantu user
  4.  Menyajikan konten terbaru yang berupa gambar, judul dan tanggal posting dari kategori menu yang telah diklik/ dipilih
Langsung saja tanpa basa-basi, ane bakal langsung share syntax html nya
<!DOCTYPE html>
<html>
<head>
       <title>Mega Menu With Pure CSS</title>
       <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
       <div class="page-title">
              <h1>Mega Dropdown Menu</h1>
              <h3>Himawan Ari Dwi Laksono</h3>
              <h3>5140411276</h3>
       </div>
       <div class="mega-menu">
              <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Profile</a>
                     <div class="menu-detail profile">
                           <div class="section section-1">
                           <h3 class="section-title">Section 1</h3>
                           <div class="section-content">
                           <p>Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor. Malu vouse dosum la quiz. Mad wasim do metam la giu dolor. Dolor la samoi jud huuta la qui. Mad wasim do metam la giu dolor. Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor. Malu vouse dosum la quiz. Dolor la samoi jud huuta la qui.Mad wasim do metam la giu dolor. Lorem ipsum dolor Sit amet, lorem-loreman amets sit dolor.</p>
                           </div>
                     </div>
              <div class="section links">
                     <h3>Links</h3>
                     <ul>
                     <li><a href="#">About Me</a></li>
                     <li><a href="#">About Blog</a></li>
                     <li><a href="#">Portfolio</a></li>
                     <li><a href="#">Contact/Hire Me</a></li>
                     <li><a href="#">Curriculum Vitae</a></li>
                     </ul>
              </div>
              <div class="section social-media">
                     <h3>Social Media Profile</h3>
                     <ul>
                     <li class="facebook"><a href="#">Me on Facebook</a></li>
                     <li class="twitter"><a href="#">Me on Twitter</a></li>
                     <li class="googleplus"><a href="#">Me on Google+</a></li>
                     <li class="linkedin"><a href="#">Me on LinkedIn</a></li>
                     <li class="dribbble"><a href="#">Me on Dribbble</a></li>
                     </ul>
              </div>
              </div>
                     </li>
                     <li><a href="#">Categories</a>
                     <div class="menu-detail categories">
                     <div class="section seo">
                           <h3><a href="#">Search Engine Optimization</a></h3>
                           <ul>
                           <li><a href="#">Link Building</a></li>
                           <li><a href="#">SEO Tools</a></li>
                           <li><a href="#">SEO News</a></li>
                           <li><a href="#">Study Cases</a></li>
                           <li><a href="#">SEO On-page</a></li>
                           </ul>
                     </div>
                     <div class="section copywrite">
                           <h3><a href="#">Blogging</a></h3>
                           <ul>
                           <li><a href="#">Blogger Tricks & Tutorial</a></li>
                           <li><a href="#">Wordpress Tricks & Tutorial</a></li>
                           <li><a href="#">Content Strategies</a></li>
                           <li><a href="#">Make Money Blogging</a></li>
                           <li><a href="#">Blog Design</a></li>
                           </ul>
                     </div>
                     <div class="section im">
                           <h3><a href="#">Internet Marketing</a></h3>
                           <ul>
                           <li><a href="#">List Building</a></li>
                           <li><a href="#">Copy Writing</a></li>
                           <li><a href="#">Social Media Marketing</a></li>
                           <li><a href="#">Content Marketing</a></li>
                           <li><a href="#">Interview the Gurus</a></li>
                           </ul>
                     </div>
              </div>
       </li>
       </ul>
       </div>
</div>
</body>
</html>

Dan ini untuk syntax css nya
/* Css resets */
* {
padding:0;
margin:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-box-sizing:border-box;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
body {
font-family: 'cambria', serif;
background-color: #2c73ee;
}
h1,h2,h2,h3,h4,h5 {
margin:0.3em 0 0.5em 0;
}
/* End css resets */

/* Css default */
@media (min-width:768px){
   .container {
       width:900px;
   }
}
.container {
margin:3vh auto;
padding:10px;
}
.page-title {
margin:17px auto;
text-align: center;
color:#fff;
font-size: 17px;
}
.page-title h1 {
font-size:40px;
line-height: 1;
}
.page-title a{
color:#ff7777;
text-decoration: none;
}
.page-title a:hover{
text-decoration: underline;
color: #ff3333;
}
/* End css default */

.mega-menu, .mega-menu >ul {
position: relative;
background-color: #333;
height: 50px;
}
.mega-menu >ul >li {
display: inline-block;
padding:15.5px 0;
overflow: hidden;
}
.mega-menu >ul >li >a {
padding:17px;
color:#eee;
text-decoration: none;
}
.mega-menu >ul >li:hover {
background-color: #3399dd;
-webkit-transition:ease 0.3s;
}
.mega-menu .menu-detail {
height: 0;
visibility: hidden;
opacity: 0;
position: absolute;
}
.mega-menu >ul >li:hover >div.menu-detail {
opacity: 1;
height: 300px;
width:100%;
visibility: visible;
top:50px;
right:0;
left: 0;
z-index: 99;
background-color: #252525;
color:#fff;
-webkit-transition:height 1s;
-moz-transition:height 1s;
transition:height 1s;
border-top:3px solid #3399dd;
overflow: hidden;
}
.menu-detail .section {
padding:20px;
}
@media (min-width: 768px){
   .menu-detail.profile .section-1 {
       width:40%;
       float: left;
   }
   .menu-detail.profile .links {
       width:20%;
       float: left;
   }
   .menu-detail.profile .social-media {
       width:40%;
       float: left;
   }
   .menu-detail.categories .seo {
       width:33.33%;
       float: left;
   }
   .menu-detail.categories .copywrite {
       width:33.33%;
       float: left;
   }
   .menu-detail.categories .im {
       width:33.33%;
       float: left;
   }
}
.menu-detail .links ul li {
padding:10px 0;
display: block;
}
.menu-detail .links ul li a{
color:#3399dd;
text-decoration: none;
}
.menu-detail .links ul li a:hover {
color:#2c73cc;
}
.menu-detail .social-media ul li {
display: block;
margin-bottom: 5px;
}
.menu-detail .social-media ul li a{
color:#fff;
text-decoration: none;
display: block;
width: 100%;
padding:7px 10px;
}
.social-media li.facebook {
background-color: #48649f;
}
.social-media li.twitter {
background-color: #3399dd;
}
.social-media li.googleplus {
background-color: #cc3333;
}
.social-media li.linkedin {
background-color: #2c73cc;
}
.social-media li.dribbble {
background-color: #dd3355;
} 
.menu-detail.categories .section h3 a{
color:#fff;
}
.menu-detail.categories .section ul li {
padding:10px 0;
display: block;
}
.menu-detail.categories .section ul li a{
color:#3399dd;
text-decoration: none;
}
.menu-detail.categories .section ul li a:hover {
color:#2c73cc;
}

Hasil dari Mega Menu Dropdown

Sekian tutorial untuk Mega Menu Dropdown yang telah sedikit ane jelaskan pada kesempatan kali ini, semoga postingan ini dapat bermanfaat dan menambah wawasn seputar HTML dan CSS. Bye..

0 komentar:

Posting Komentar

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com