Cara Membuat Affix Menu dengan Bootstrap

by | Sep 18, 2016 | Bootstrap, HTML, PHP MySQL | 0 comments

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Menu Affix dengan Bootstrap. 

Oke langsung saja teman teman bisa salinkan scriptnya dibawah sini :

<head>
  <title>Menu Affix</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

kemudian teman teman salinkan script dibawah ini :

<body>

<div class="container-fluid" style="background-color:#eee;color:red;height:200px;">
  <div class="row">
    <div class="col-md-6">
      Ismet Maulana
      <span class="glyphicon glyphicon-glass"></span>
    </div>
    <div class="col-md-6"></div>
  </div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</nav>

<div class="container-fluid atas" style="height:2000px">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet congue ligula. Nunc augue nibh, pulvinar nec odio vel, interdum cursus felis. Donec sed mauris tempus, tempus est vel, sagittis eros. Proin vehicula dolor non pulvinar eleifend. Nunc ut lorem mattis quam rhoncus bibendum et vitae leo. Pellentesque semper lorem arcu, et volutpat nisi suscipit vitae. Vestibulum volutpat volutpat odio quis placerat. Suspendisse aliquam mi quis nulla suscipit ullamcorper. Aenean rutrum ac libero ac condimentum. Proin egestas dapibus commodo. Vivamus odio purus, sodales eu arcu eget, blandit aliquam lectus. Morbi condimentum rhoncus nisl, quis luctus elit tincidunt consectetur. Maecenas in justo elit. Duis interdum tristique neque ut suscipit. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet congue ligula. Nunc augue nibh, pulvinar nec odio vel, interdum cursus felis. Donec sed mauris tempus, tempus est vel, sagittis eros. Proin vehicula dolor non pulvinar eleifend. Nunc ut lorem mattis quam rhoncus bibendum et vitae leo. Pellentesque semper lorem arcu, et volutpat nisi suscipit vitae. Vestibulum volutpat volutpat odio quis placerat. Suspendisse aliquam mi quis nulla suscipit ullamcorper. Aenean rutrum ac libero ac condimentum. Proin egestas dapibus commodo. Vivamus odio purus, sodales eu arcu eget, blandit aliquam lectus. Morbi condimentum rhoncus nisl, quis luctus elit tincidunt consectetur. Maecenas in justo elit. Duis interdum tristique neque ut suscipit. </p>
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet congue ligula. Nunc augue nibh, pulvinar nec odio vel, interdum cursus felis. Donec sed mauris tempus, tempus est vel, sagittis eros. Proin vehicula dolor non pulvinar eleifend. Nunc ut lorem mattis quam rhoncus bibendum et vitae leo. Pellentesque semper lorem arcu, et volutpat nisi suscipit vitae. Vestibulum volutpat volutpat odio quis placerat. Suspendisse aliquam mi quis nulla suscipit ullamcorper. Aenean rutrum ac libero ac condimentum. Proin egestas dapibus commodo. Vivamus odio purus, sodales eu arcu eget, blandit aliquam lectus. Morbi condimentum rhoncus nisl, quis luctus elit tincidunt consectetur. Maecenas in justo elit. Duis interdum tristique neque ut suscipit. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet congue ligula. Nunc augue nibh, pulvinar nec odio vel, interdum cursus felis. Donec sed mauris tempus, tempus est vel, sagittis eros. Proin vehicula dolor non pulvinar eleifend. Nunc ut lorem mattis quam rhoncus bibendum et vitae leo. Pellentesque semper lorem arcu, et volutpat nisi suscipit vitae. Vestibulum volutpat volutpat odio quis placerat. Suspendisse aliquam mi quis nulla suscipit ullamcorper. Aenean rutrum ac libero ac condimentum. Proin egestas dapibus commodo. Vivamus odio purus, sodales eu arcu eget, blandit aliquam lectus. Morbi condimentum rhoncus nisl, quis luctus elit tincidunt consectetur. Maecenas in justo elit. Duis interdum tristique neque ut suscipit. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet congue ligula. Nunc augue nibh, pulvinar nec odio vel, interdum cursus felis. Donec sed mauris tempus, tempus est vel, sagittis eros. Proin vehicula dolor non pulvinar eleifend. Nunc ut lorem mattis quam rhoncus bibendum et vitae leo. Pellentesque semper lorem arcu, et volutpat nisi suscipit vitae. Vestibulum volutpat volutpat odio quis placerat. Suspendisse aliquam mi quis nulla suscipit ullamcorper. Aenean rutrum ac libero ac condimentum. Proin egestas dapibus commodo. Vivamus odio purus, sodales eu arcu eget, blandit aliquam lectus. Morbi condimentum rhoncus nisl, quis luctus elit tincidunt consectetur. Maecenas in justo elit. Duis interdum tristique neque ut suscipit. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet congue ligula. Nunc augue nibh, pulvinar nec odio vel, interdum cursus felis. Donec sed mauris tempus, tempus est vel, sagittis eros. Proin vehicula dolor non pulvinar eleifend. Nunc ut lorem mattis quam rhoncus bibendum et vitae leo. Pellentesque semper lorem arcu, et volutpat nisi suscipit vitae. Vestibulum volutpat volutpat odio quis placerat. Suspendisse aliquam mi quis nulla suscipit ullamcorper. Aenean rutrum ac libero ac condimentum. Proin egestas dapibus commodo. Vivamus odio purus, sodales eu arcu eget, blandit aliquam lectus. Morbi condimentum rhoncus nisl, quis luctus elit tincidunt consectetur. Maecenas in justo elit. Duis interdum tristique neque ut suscipit. </p>
</div>

</body>

lalu salinkan juga script ini :

<style>
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }


  </style>

Jika sudah di salin kemudian teman teman save dan jalan kan di browsernya, kemudian lihat tampilannya .

Cukup mudah bukan?kita telah selesai mengerjakan tentang Bagaimana Cara Membuat Affix Menu  dengan Bootstrap, oke cukup sekian tutorial tentang tentang Bagaimana Cara Membuat Affix Menu  dengan Bootstrap.

Selamat mencoba dan terimakasih …

#KeepLearn

#IsmetMA