Cara Membuat Menu Bar/Navigasi WEB RESPONSIVE

setealah beberapa hari saya belajra mebuat sebuah WEB al hasil walaupun belum bagus, saya ingin mengulang pembelajaran saya dengan cara mengajarkanna pada Anda. Kata orang memang cara belajar yang paling bagus adalah dengan cara mengulang dan mengajarkannya kembali. 

  Seperti yang kita tahu sekarang penggunakan Smartphon sudah dibilang mengalahkan penggunaan Komputer sebagai mesin penjelajah informasi, kana smartphon merupakan perngkat yang mudah untuk di bawa-bawa, dan jika anda ingin mendapatkan informasi melalui internet, anda tingga melakukanya melalui smarphon anda, tanpa harus bersusah payah membuka  laptop.

  perkembangan ini juga diikuti oleh penyedia informasi seperti web-web yang bertebaran bebas di internet. Agar pengguna atau pencari informasi semakin betah dengan web tersebut, maka penampilan dari  web  tersebut haruslah menarik selain dari isi konten yang informatif. lalau apa yang harus di perhatikan ?  WEB HARUS RESPONSIVE atau bisa menyesuaikan dengan lebar layar si pencari informasi.

nah sekarang kita akan belajar  bagaimana cara membuat sebuah web yang responsive.. Oke kita akan mulai dari bagian MENUBAR/Navigasi  bagian ini adalah bagian penting, agar para user atau pencari informasi dapat degan mudah menemukan kategori konten yang kita sediakan dalam sebuah Web.

Contoh sebagi berikut

Buat kode #HTML seperti berikut ini

<div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

 

// clas "icon"  digunakan untuk membuat icon Close

kemudian tambahkan CSS di bawah ini.

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;}

 

sekarang kita akan membuat settigan agar WEB navigasi bisa RESPONSIVE

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }}