oke yang pertama - tama, yang harus temen2 lakukan adalah membuat 2 file, kenapaharus dua file, karena menurut saya probadi ini lebih mensimplekan cara kerja kita..


oke apa saja file 2 itu?
file yang pertama adalah index.html
file yang kedua adalah style.css

 oke , kita langsung buka file index.html nya dan masukkan kode berikut

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Demo Menu Responsive</title>
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/></script>
 <script>
 $(document).ready(function() {
     $('.parent').click(function() {
         $('.nav').toggle('slow');
     });
 });
 </script>
</head>

<body>
 <div id="container">
  <nav>
   <a href="#" class="parent">Daftar Menu <span class="fl_r"><i class="fa fa-bars"></i></span></a>
   <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Kontak</a></li>
    <li><a href="#">Portfolio</a>

     <ul>
      <li><a href="#">
       <span class="i_menu"><i class="fa fa-arrow-right"></i></span>Artikel</a>
      </li>
      <li><a href="#">
       <span class="i_menu"><i class="fa fa-arrow-right"></i></span>Tugas</a>
      </li>
     </ul>

    </li>
   </ul>
  </nav>
 </div>
</body>
</html>


Setelah itu silahkan Anda copy CSS dibawah ini ke dalam file style.css :

*{
 padding: 0;
 margin: 0;
}

body{
 background-color: #555;
 padding: 20px 0;
 font-family: sans-serif;
 font-size: 14px;
}

h1{font-size: 25px;}h2{font-size: 16px;}

h1,h2{
 margin: 15px 0;
 padding:0;
 color: #fff;
 font-weight: normal;
}

p{
 color: #fff;
}

pre{
 background-color: #dfdfdf;
 min-width: 200px;
 font-style: italic;
 padding: 10px;
 border-radius: 5px;
 word-wrap:break-word;
 display: block;
}

#container{
 width: 70%;
 margin: 0 auto;
 padding: 0;
}

nav{
 background-color: #fff;
}

nav ul{
 padding: 0;
 margin: 0;
 list-style: none;
}

nav ul ul{
 position: absolute;
 display: none;
}

nav ul li{
 display: inline-block;
 height: auto;
}

nav ul li li{
 display: block;
 background-color: #dedede;
}

nav ul li li a{
 min-width: 120px;
 display: block;
}

nav li a, nav a{
 height: auto;
 display: block;
 padding: 0 10px;
 line-height: 40px;
 text-decoration: none;
 text-shadow: 1px 1px 1px #ccc;
 color: #000;
}

nav li a:hover{
 background-color: #777;
 color: #fff;
}

nav ul li:hover > ul{
 display: block;
}

.parent{
 display: none;
 box-shadow: 0px 1px 8px #555;
}

.fl_r{
 float: right;
 clear: both;
}

.i_menu{
 visibility: hidden;
 margin-right: 10px;
}

.form-control{
 width: 100%;
 height: auto;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-shadow: 0 0 8px #555;
}

@media screen and (max-width: 1200px){
 #container{
  width: 70%;
 }
}

@media screen and (max-width: 992px){
 #container{
  width: 90%;
 }

 .i_menu{
  visibility: visible;
 }

 .nav{
  display: none;
 }

 .parent{
  display: block;
 }

 nav ul li{
  display: block;
 }

 nav ul ul{
  position: relative;
 }

 nav ul li li a{
  padding-left: 30px;
 }
}

@media screen and (max-width: 768px){
 #container{
  width: 95%;
 }
} 

Previous Post Next Post

Komentar

Komentar kotor, menyinggung dan mengandung karakter yang tidak diperkenankan oleh admin akan di hapus dari Blog, Terimakasih!

Post a Comment

Komentar kotor, menyinggung dan mengandung karakter yang tidak diperkenankan oleh admin akan di hapus dari Blog, Terimakasih!