Membuat Menu Drop Down Mega CSS3 - Ensikology

Membuat Menu Drop Down Mega CSS3

Daftar Isi [Tampilkan]


Menu Drop Down Mega CSS3
Dalam tutorial ini saya akan mengajarkan Anda cara membuat Menu Mega CSS3 murni. Mega Menu biasanya digunakan di situs web perusahaan / e-commerce, tetapi menjadi lebih populer karena merupakan cara yang bagus untuk menampilkan / mengatur konten. Desain menu mega ini dapat ditemukan di The Bricks UI. Mari kita mulai dengan markup HTML.

Buat daftar tidak berurutan dengan kelas "nav" ( <ul> ), lalu untuk setiap item menu kami akan menambahkan item daftar baru ( <li> ) dengan tag jangkar ( <a> ) di dalamnya. Jika Anda ingin item menu menjadi menu mega, tambahkan saja <div> di dalam <li>.
<ul class="nav">
    <li>
        <a href="#">What's new</a>
        <div>
            <div class="nav-column">
                <h3>Home</h3>
                <ul>
                    <li><a href="#">Pampers Diapers</a></li>
                    <li><a href="#">Huggies Diapers</a></li>
                    <li><a href="#">Seventh Generation</a></li>
                    <li><a href="#">Diapers</a></li>
                    <li><a href="#">Derbies</a></li>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                    <li><a href="#">Loafers</a></li>
                </ul>
            </div>
 
            <div class="nav-column">
                <h3>Home</h3>
                <ul>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                    <li><a href="#">Loafers</a></li>
                </ul>
 
                <h3>Home</h3>
                <ul>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                    <li><a href="#">Loafers</a></li>
                </ul>
            </div>
 
            <div class="nav-column">
                <h3>Home</h3>
                <ul>
                    <li><a href="#">Pampers Diapers</a></li>
                    <li><a href="#">Huggies Diapers</a></li>
                    <li><a href="#">Seventh Generation</a></li>
                    <li><a href="#">Diapers</a></li>
                    <li><a href="#">Derbies</a></li>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                    <li><a href="#">Loafers</a></li>
                </ul>
            </div>
 
            <div class="nav-column">
                <h3 class="orange">Related Categories</h3>
                <ul>
                    <li><a href="#">Pampers Diapers</a></li>
                    <li><a href="#">Huggies Diapers</a></li>
                    <li><a href="#">Diapers</a></li>
                </ul>
 
                <h3 class="orange">Brands</h3>
                <ul>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li><a href="#">Top rated</a></li>
    <li>
        <a href="#">Earnings</a>
        <div>
            <div class="nav-column">
                <h3 class="orange">Related Categories</h3>
                <ul>
                    <li><a href="#">Pampers Diapers</a></li>
                    <li><a href="#">Huggies Diapers</a></li>
                    <li><a href="#">Diapers</a></li>
                </ul>
 
                <h3 class="orange">Brands</h3>
                <ul>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                </ul>
            </div>
 
            <div class="nav-column">
                <h3>Home</h3>
                <ul>
                    <li><a href="#">Pampers Diapers</a></li>
                    <li><a href="#">Huggies Diapers</a></li>
                    <li><a href="#">Seventh Generation</a></li>
                    <li><a href="#">Diapers</a></li>
                    <li><a href="#">Derbies</a></li>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                    <li><a href="#">Loafers</a></li>
                </ul>
            </div>
 
            <div class="nav-column">
                <h3>Home</h3>
                <ul>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                    <li><a href="#">Loafers</a></li>
                </ul>
 
                <h3>Home</h3>
                <ul>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                    <li><a href="#">Loafers</a></li>
                </ul>
            </div>
 
            <div class="nav-column">
                <h3>Home</h3>
                <ul>
                    <li><a href="#">Pampers Diapers</a></li>
                    <li><a href="#">Huggies Diapers</a></li>
                    <li><a href="#">Seventh Generation</a></li>
                    <li><a href="#">Diapers</a></li>
                    <li><a href="#">Derbies</a></li>
                    <li><a href="#">Driving shoes</a></li>
                    <li><a href="#">Espadrilles</a></li>
                    <li><a href="#">Loafers</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">All Categories</a></li>
    <li class="nav-search">
        <form action="#">
            <input type="text" placeholder="Search...">
            <input type="submit" value="">
        </form>
    </li>
</ul>

Buat Gaya Dasar
Karena gaya default browser berbeda satu sama lain, maka disarankan menambahkan beberapa gaya reset untuk menjaga konsistensi di antara mereka dan menghindari masalah di masa depan.
/* Reset */
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.nav a { text-decoration: none; }
 
.nav li { list-style: none; }

Kemudian kita akan menambahkan beberapa gaya dasar ke wadah menu dan mengapungkan item daftar ke kiri untuk menunjukkannya pada baris yang sama.
/* Menu Container */
.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;
}
 
/* Menu List */
.nav > li {
    display: block;
    float: left;
}

Menata Tautan Menu
Kita akan mulai dengan gaya umum seperti padding, tinggi, posisi, dll. Kemudian kita akan mengatur gaya tipografi seperti ukuran font, warna, bayangan teks, dll. Kita juga akan menetapkan warna latar belakang dan batas kiri dan kanan . Agar transisi gaya tetap lancar, kami akan menambahkan transisi CSS3. Perhatikan bahwa kami menetapkan properti yang sama lima kali, ini diperlukan karena properti ini belum sepenuhnya diterapkan di semua browser, dan karena properti ini sedang dalam pengujian, semua browser yang berbeda menggunakan awalan sebelum properti. Jadi, jika Anda ingin mendukung beberapa browser saat ini dan yang lebih lama, gunakan awalan ini.
/* Menu Links */
.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
     
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
    border-left: 1px solid #4b4441;
    border-right: 1px solid #312a27;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

Untuk kondisi hover, kami hanya akan mengubah warna latar belakang. Untuk menyelesaikan penataan tautan menu, kami akan menambahkan sudut bulat ke tautan pertama menggunakan :first-child pemilih pseudo :first-child dan menghapus batas kiri.
.nav > li:hover > a { background: #4b4441; }
 
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}

Formulir Pencarian

Kami akan mulai dengan wadah formulir: atur posisi ke relatif, tambahkan batas kiri seperti yang ada pada tautan menu dan atur lebar untuk mewarisi. Dengan mengatur lebar untuk mewarisi itu akan menggunakan lebar dari input anak.
/* Search Form */
.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #4b4441;
}

Kemudian kita akan memberi style pada input teks: float ke kiri, atur tinggi, padding, dll. Untuk menyembunyikan input teks kita akan mengatur lebar menjadi 1px dan menghapus padding kiri dan kanan. Pada status :focus :hover dan :focus kami akan memperbarui nilai lebar dan padding.
.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 24px;
    padding: 15px 0;
    line-height: 24px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #999999;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
 
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
 
.nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; }
 
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width: 110px;
    padding: 15px 20px;
 
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;

Gaya untuk input masukan mirip dengan input teks, kami hanya akan menetapkan lebar dan tinggi tetap, menambahkan ikon latar belakang dan sudut bulat menggunakan properti border-radius . Kami juga telah menetapkan transisi untuk kedua input agar memiliki animasi yang halus dan menyenangkan.
.nav > li.nav-search input[type="submit"] {
    display: block;
    float: left;
    width: 20px;
    height: 54px;
    padding: 0 25px;
    cursor: pointer;
 
    background: #372f2b url(../img/search-icon.png) no-repeat center center;
 
    border-radius: 0 3px 3px 0;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
 
.nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; }

Demo Menu Drop Down Mega CSS3
Mega Dropdowns
Ini adalah salah satu bagian terpenting. Kami akan mulai dengan mengatur posisi ke absolut, lebar ke 100%, tampilan untuk diblokir dan nilai-nilai atas dan kiri. Kemudian kita akan menyembunyikan dropdown menggunakan opacity, visibility, dan properti overflow. Setelah itu kita akan menambahkan warna latar belakang, sudut membulat dan beberapa transisi. Alasan kami akan menggunakan tiga properti ini untuk menyembunyikan dropdown dan bukan display: none; karena jika kita menggunakan display: none; transisi tidak akan berhasil.
/* Menu Dropdown */
.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 50px;
    left: 0;
 
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
 
    background: #ffffff;
    border-radius: 0 0 3px 3px;
 
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

Untuk menunjukkan dropdown pada hover, kita perlu mengatur opacity menjadi 1 dan visibilitas dan melimpah properti agar terlihat.
.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

Beberapa konten
Karena sekarang menu mendukung konten apa pun dalam bahasa apa pun (html, php, js, dll.). Untuk contoh ini kita akan membuat tata letak berbasis kolom dengan beberapa daftar tautan di dalamnya. Tambahkan kode html berikut di dalam mega dropdown ( <div> )
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
 
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>

Kemudian kami akan menambahkan beberapa gaya dasar untuk konten ini. Kami akan mengatur lebar masing-masing kolom menjadi 20%, padding 2,5% dan mengapungkan kolom ke kiri. Untuk menyelesaikannya, kami akan menambahkan beberapa gaya tipografi untuk tajuk dan tautan.
/* Menu Content Styles */
.nav .nav-column {
    float: left;
    width: 20%;
    padding: 2.5%;
}
 
.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;
     
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #372f2b;
    text-transform: uppercase;
}
 
.nav .nav-column h3.orange { color: #ff722b; }
 
.nav .nav-column li a {
    display: block;
    line-height: 26px;
     
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #888888;
}
 
.nav .nav-column li a:hover { color: #666666; }


Sumber : designmodo
Ingatlah untuk selalu memberikan komentar yang sopan dan mengikuti Pedoman Komunitas kami.
Emoticon

Posting Komentar