Widodo

Membuat Menu Navigasi dengan Bootstrap Reponsive

Jika anda mempunyai sebuah website maupun blog menu navigasi sangatlah penting untuk mencari sebuah informasi dimana halaman yang akan kita tampilkan melalui menu navigasi untuk mempermudahkan pengunjung contoh kecilnya seperti beranda kembali ke halaman utama atau profile kontak dll, untuk itu s-widodo.com akan memberikan sebuah tutorial mengenai pembuatan manu navigasi dengan bootstrap, bootstrap sendiri sudah menyediakan componen-componen seperti halnya artikel yang kita bahas ini, jadi dengan adanya bootstrap itu untuk mempermudah membangun sebuah layout  maupun yang lainya dan menu navigasi yang di sediakan oleh bootstrap ini sudah termasuk reponsive untuk itu  mungking langsung aja kita mulai pembuatanya.

1.  Silahkan download bahan-bahan yang akan kita buat

<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>

Jangan lupa simpan dalam satu folder

2. Kalo udah di download bahanya langsung saja buat document baru dengan format html maupun php

3. Sekarang panggil CSS dan JQUERYnya seperti diatas

4. Setelah itu anda cukup memanggil code htmlnya seperti dibwah ini

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">S-WIDODO.COM</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
         
          </ul>
        </li>
        
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

5. Selesai

Download

Termakasih, Semoga Tutorial yang diberikan oleh s-widodo.com bermafaat



Artikel Terkait

0 Komentar