Senin, 13 Maret 2017

Bootstrap Scrollspy

Assalamualaikum Wr.Wb



Lagi - lagi bootstrap dan kali ini saya akan membahas Scrollspy,yaitu misalkan kita mempunyai navbar dan bila kita klik salah satu menu dari navbar tersebut kita bisa langsung menuju isi menu tanpa berpindah halaman,ini prinsipnya hampir sama dengan Name Anchor.Baiklah dari pada pusing - pusing karna saya juga bingung mau menjelaskan yang bagaimana lagi mari kita mulai hehe.

  • masukkan scrip untuk memanggil bootstrap
tuliskan scrip di antara  <head> dan </head>
<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  • Buat stylenya agar lebih menarik
tuliskan scrip style di antara <head> dan </head>

<style>
      body{
          position: relative;

      }

      #menu1{padding-top: 55px;height: 500px;color: #fff;background-color: #1e88e5;}
      #menu2{padding-top: 55px;height: 500px;color: #fff;background-color: #ff00ff;}
      #menu3{padding-top: 55px;height: 500px;color: #fff;background-color: #00cc66;}
      #menu41{padding-top: 55px;height: 500px;color: #fff;background-color: #0099ff;}
      #menu42{padding-top: 55px;height: 500px;color: #fff;background-color: #009999}
  </style>

  • Lalu kita buat scrollspy ini saya terapkan pada navbar

 <body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                      
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#menu1">Menu1</a></li>
          <li><a href="#menu2">Menu2</a></li>
          <li><a href="#menu3">Menu3</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu4 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#menu41">Menu4-1</a></li>
              <li><a href="#menu42">Menu4-2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="menu1" class="container-fluid">
    <h1>Menu 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div><!--menu1-->
<div id="menu2" class="container-fluid">
    <h1>Menu 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div><!--menu2-->
<div id="menu3" class="container-fluid">
<h1>Menu 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--menu3-->
<div id="menu41" class="container-fluid">
    <h1>Submenu 4.1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--submenu 4.1-->
<div id="menu42" class="container-fluid">
    <h1>Submenu 4.2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>

Dan hasilnya seperti berikut



Setelah menu lain di klik maka akan berpindah konten tanpa berpinda halaman



Menu Dropdown


  
Setelah Dropdown di klik



Jika di lihat dari dari mode responsive



 Itu tadi sedikit mengenai bootstrap scrollspy semoga bermanfaat walaupun mungkin penjelasan saya masih belum mudah untuk di pahami untuk itu mohon maaf atas kekurangannya,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Share:

0 komentar:

Posting Komentar