Merubah menu menjadi dropdown select

Merubah menu menjadi dropdown select adalah solusi yang cerdas pada halaman website agar responsive sehingga halaman menjadi mobile friendly.

Masih menggunakan jQuery, namun kali ini kita akan menggunakan “Media query” sebagai perintah untuk merubah tampilanya.


Anda bisa merubah perintah media query untuk menyesuaikanya, dan Anda juga bisa menambahkan kode CSS lainya pada media query.

Langsung saja kita lihat script merubah menu menjadi dropdown select di bawah ini.

Script CSS menu

* { margin: 0; padding: 0; }
h1 {
    font: 300 18px "HelveticaNeue-Light", "Helvetica Neue Light", sans-serif;
    margin: 10px;
}
nav {
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 100px auto;
    text-align: center;
}
nav ul {
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: inline-block;
    font-family: verdana;
    background: #333;
    color: white;
    padding: 5px 15px;
    border: 1px solid white;
    text-decoration: none;
}
nav a:hover {
    border: 1px solid red;
    background: red;
}
nav a:active {
    background: blue;
}
nav select {
    display: none;
}
select {
    width: 100%;
    max-width: 300px;
    padding: 5px;
    border: 1px solid #999;
}
select:hover {
    border: solid 1px red;
}

Script CSS Media Query

@media (max-width: 600px) {
    nav ul     { display: none; }
    nav select { display: inline-block; }
}

Script utama html dan jQuery

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Merubah menu menjadi dropdown select</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body> 
  
    <nav> 
  
    <h1>This menu turns into a <strong>select</strong> when window is less than <strong>600px</strong> to conserve space.</h1>
  	
        <ul> 
             <li><a href="#" class="active">Home</a></li> 
             <li><a href="#">Tutorial</a></li> 
             <li><a href="#">Blog</a></li> 
             <li><a href="#">About Us</a></li> 
             <li><a href="#">Contact</a></li> 
        </ul>
  	
    </nav>
 
<script>
$(function() {
    $("<select />").appendTo("nav");
    $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : "Go to..."
    }).appendTo("nav select");
    $("nav a").each(function() {
    var el = $(this);
    $("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
    }).appendTo("nav select");
    });
    $("nav select").change(function() {
    window.location = $(this).find("option:selected").val();
    });	 
});
</script>
  
</body>
</html>

Silahkan Anda pelajari script diatas, untuk perintah merubah tampilanya silahkan Anda edit CSS Media Query-nya. Sesuaikan dengan kebutuhan yang Anda harapkan.

Gunakanlah Realtime HTML Editor ↗ untuk melihat dan meng-edit hasil dari script diatas agar tampilanya lebih baik dari script diatas.

Sampai disini dulu Free script kali ini, sampai jumpa di free script selanjutnya, dan salam sukses selalu buat Anda semuanya.

Mungkin Anda Menyukai