Beranda » CSS » HTML » Cara Membuat Menu Responsive Sederhana Dengan HTML dan Css

Cara Membuat Menu Responsive Sederhana Dengan HTML dan Css

Kali ini saya akan menulis tentang HTML dan Css yaitu cara membuat menu responsive sederhana pada HTML dan Css. Sebelum kita masuk kepada pembahsan lebih lanjut, ada baiknya teman-teman membaca postingan saya terdahulu yaitu Sekilas Tentang HTML dan Cara Menyimpan File HTMl. Jika sudah maka akan kita lanjutkan....Lansung saja ya.... Pertama-tama buka teks editor anda dan ketikkan syntax berikut

   <!DOCTYPE html>  
   <html lang="en">  
   <head>  
   <title>CSS only Demo Responsive</title>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1" media="all">  
   <link rel="stylesheet" href="main.css" media="all" type="text/css">  
   <link rel="stylesheet" href="responsive.css" media="all" type="text/css">  
   <script src="responsive.1.0.js" type="text/javascript"></script>  
   </head>  
   <body>  
        <div id="container">  
             <header>  
                  <label for="show-menu" onclick="displayMenu()" class="show-menu" id="showMenu">Show Menu</label>  
                  <input type="checkbox" id="show-menu" role="button">  
                  <ul id="menu">  
                       <li><a href="index.html">Home</a></li>  
                       <li><a href="javascript:void(0)">About</a>  
                            <ul class="hidden">  
                                 <li><a href="javascript:void(0)">Who We Are</a></li>  
                                 <li><a href="javascript:void(0)">What We Do</a></li>  
                            </ul>  
                       </li>  
                       <li><a href="javascript:void(0)">Portfolio</a>  
                            <ul class="hidden">  
                                 <li><a href="javascript:void(0)">Photography</a></li>  
                                 <li><a href="javascript:void(0)">Web & User Interface Design</a></li>  
                                 <li><a href="javascript:void(0)">Illustration</a></li>  
                            </ul>  
                       </li>  
                       <li><a href="javascript:void(0)">News</a></li>  
                       <li><a href="contact.html">Contact</a></li>  
                  </ul>  
             </header>  
        </div>  
        <script src="jquery-2.1.3.js" type="text/javascript"></script>  
        <script type="text/javascript">  
             function displayMenu(){  
                  document.getElementById("showMenu").innerHTML;  
             }  
        </script>  
   </body>  
   </html>

Simpan sebagai index.html.
Selanjutnya copi dan pastekan syntax berikut dan simpan sebagai css.html

   #container {  
        display: block;  
        width: 100%;  
        margin: 1.09123432523124534% auto;  
   }  
   header{  
        display: block;  
        padding-bottom: 50px;  
   }  
   ul {  
        list-style-type: none;  
        margin: 0;  
        padding: 0;  
        position: absolute;  
   }  
   li {  
        display: inline-block;  
        float: left;  
        margin-right: 0.0625em;  
   }  
   li a {  
        display: block;  
        min-width: 8.75em;  
        height: 3.125em;  
        text-align: center;  
        line-height: 3.125em;  
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
        color: #fff;  
        background: #2f3036;  
        text-decoration: none;  
   }  
   li:hover a {  
        background: #19c589;  
   }  
   li:hover ul a {  
        background: #f3f3f3;  
        color: #2f3036;  
        height: 2.5em;  
        line-height: 2.5em;  
   }  
   li:hover ul a:hover {  
        background: #19c589;  
        color: #fff;  
   }  
   li ul {  
        display: none;  
   }  
   li ul li {  
        display: block;  
        float: none;  
   }  
   li ul li a {  
        width: auto;  
        min-width: 6.25em;  
        padding: 0 1.25em;  
   }  
   ul li a:hover + .hidden, .hidden:hover {  
        display: block;  
   }  
   .show-menu {  
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
        text-decoration: none;  
        color: #fff;  
        background: #19c589;  
        text-align: center;  
        padding: 0.625em;  
        display: none;  
   }  
   input[type=checkbox]{  
        display: none;  
   }  
   input[type=checkbox]:checked~#menu {  
        display: block;  
   }  
   @media screen and (max-width:768px){   
        header{  
             padding-bottom: 0;  
        }  
        ul {  
             position: static;  
             display: none;  
        }  
        li {  
             margin-bottom: 0.0625em;  
        }  
        ul li, li a {  
             width: 100%;  
        }  
        .show-menu {  
             display: block;  
        }  
   }

Sekarang Coba buka dengan cara klik 2kali pada file index.html.. Tampilannya masih sangat-sangat sederhana.. Silahkan diedit dan diperbaiki agar lebih ok...

Belum ada tanggapan untuk "Cara Membuat Menu Responsive Sederhana Dengan HTML dan Css"

Post a Comment