Responsive Off-Canvas Navigation Menu with jQuery CSS – Pushy

responsive off-canvas navigation menu with jquery css

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.

Features: Uses CSS transforms & transitions, Smooth performance on mobile devices, jQuery animation fallback for IE 7-9, Menu closes when a link is selected, Menu closes when the site overlay is selected, Auto-collapsible submenus, Left or right menu position, It’s responsive!

Read More Download Demo

Cara Membuat Navigasi Menubar Dengan HTML5 dan CSS3

Cara membuat menu, navbar, navigation/navigasi, menubar, menu sidebar/sidemenu, menu topbar dengan html dan css. Navigasi menu umumnya merupakan menu topbar atau menu atas yang wajib ada disetiap website, biasanya dalam menu navigasi navbar ini berisi menu yang sangat penting untuk pengunjung website tersebut. Selain dari menu navbar penulis juga akan membahas tentang menu sidebar, untuk lebih jelas lihat dibawah ini.

Baca juga: Cara belajar menggunakan html paling dasar pertama kali

Menu Sidebar (Vertical Navigation Bar)

css-navigation-menu-1Vertical navigation bar merupakan menu yang terletak disamping kanan atau kiri dan biasanya disebut menu sidebar yang ada disetiap website seperti popular post, recent post, comment post dan lain-lain yang berisi judul artikel disetiap item menu sidebar tersebut. Untuk pembuatan menu sidebar atau vertical navigation bar adalah seperti dibawah ini.

Baca juga: Cara belajar menggunakan css paling dasar pertama kali

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
</ul>

Simpan kode diatas dengan nama sidebar.html dan juga buatkan file css dengan nama style1.css atau terserah anda saja, untuk sintak css seperti dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  width:200px;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
}
li{
  border-bottom:1px solid #ccc;
}
li a{
  display:block;
  text-decoration:none;
  color:#000;
  padding:8px 16px;
}
li a:hover{
  background-color:#555;
  color:#fff;
}
li.active a{
  background:#4169e1;
  color:#fff;
}
li:last-child{
  border-bottom:none;
}

Menu Topnav/Navbar (Horizontal Navigation Bar)

css-navigation-menu-2Horizontal navigation bar merupakan menu navbar atau topnav yang biasa disebut sebagai menu primery yang memang wajib ada disetiap website dan umum berisi menu item yang paling penting untuk penggunanya/pengunjungnya seperti berisi kategori terpenting. Untuk lebih jelas silahkan lihat dibawah ini.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
  <li class="right"><a href="#">Sign Up</a></li>
  <li class="right active"><a href="#">Sign In</a></li>
</ul>

Simpan file tersebut dengan nama index2.html dan buatkan file css dengan nama style2.css dan gunakan sintak css dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100%;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
  overflow:hidden;
}
li{
  float:left;
}
li a{
  display:block;
  text-decoration:none;
  color:#000;
  padding:14px 16px;
  text-align:center;
}
li a:hover{
  background-color:#555;
  color:#fff;
}
li.active a{
  background:#4169e1;
  color:#fff;
}
li.right{
  float:right;
}
ul.fixed-top{
    position: fixed;
    top: 0;
}
ul.fixed-bottom{
    position: fixed;
    bottom: 0;
}

Menu Dropdown (Dropdown Navigation Bar)

css-navigation-menu-3Dropdown navigation bar adalah menu item yang ada sub item-nya atau dropdown menu yang berisi sub item, untuk lebih jelas silahkan lihat kode pemrograman dibawah ini.

<ul class="navbar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
  <li class="dropdown">
    <a href="#" class="btndown">Dropdown</a>
    <ul class="itemdown">
      <li><a href="#">Item #1</a></li>
      <li><a href="#">Item #2</a></li>
      <li><a href="#">Item #3</a></li>
      <li><a href="#">Item #4</a></li>
    </ul>
  </li>
  <li class="right"><a href="#">Sign Up</a></li>
  <li class="right active"><a href="#">Sign In</a></li>
</ul>

Simpan file tersebut kedalam index3.html dan buatkan file css baru dengan nama style3.css dan gunakan kode css dibawah ini.

ul.navbar{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100%;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
  overflow:hidden;
}
ul.navbar li{
  float:left;
}
ul.navbar li a, .btndown{
  display:inline-block;
  text-decoration:none;
  color:#000;
  padding:14px 16px;
  text-align:center;
}
ul.navbar li a:hover, .dropdown:hover .btndown{
  background-color:#555;
  color:#fff;
}
ul.navbar li.active a{
  background:#4169e1;
  color:#fff;
}
ul.navbar li.right{
  float:right;
}
ul.navbar li.dropdown{
  display:inline-block;
}
.itemdown{
  display:none;
  position:absolute;
  bacground-color:#f9f9f9;
  margin:0;
  padding:0;
  box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  list-style-type:none;
}
.itemdown li{
  clear:both;
  float:none;
}
.itemdown li a{
  color:black;
  padding:12px 86px;
  display:inline-block;
  min-width: 100px;
  text-decoration:none;
}
.itemdown li a:hover{
  background-color:#f1f1f1;
}
.dropdown:hover .itemdown{
  display:block;
}

Responsif Navbar (Responsive Menu Topnav)

css-navigation-menu-4Responsif navbar merupakan responsive menu navigasi topbar yang membuat navbar dapat berjalan pada sisi desktop, tablet dan mobile phone dengan bentuk yang berbeda walau satu kerangka diantara perangkat desktop dengan perangkat mobile.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li class="right"><a href="#">Help</a></li>
</ul>

Simpan file tersebut dengan nama index4.html dan buatkanlah file css baru dengan nama style4.css dan gunakan kode css dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:#333;
}
ul li{
  float: left;
}
ul li a{
  display:block;
  color:#fff;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
}
ul li:not(.active) a:hover{
  background-color:#111;
}
ul li.active a{
  background-color:#4169e1;
}
ul li.right{
  float:right;
}
@media screen and (max-width: 600px){
  ul li.right, ul li{
    float:none;
  }
}

Responsif Menu Sidebar (Responsive Sidenav)

css-navigation-menu-5Responsif menu sidebar merupakan menu pada perangkan desktop berbentuk menu sidenav/sidebar sedangkan pada perangkat tablet dan netbook berbentuk menu topnav/navbar sedangkan pada perangkat mobile berbentuk list menu. Untuk lebih jelas lihat kode dibawah ini.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
</ul>
<div class="content">
  <h1>Side Navigation</h1>
  <p>...</p>
</div>

Simpan file tersebut dengan nama index5.html dan buatkanlah file css baru dengan nama style5.css dan gunakan kode dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  width:25%;
  background-color:#f1f1f1;
  position:fixed;
  overflow:auto;
}
ul li a{
  display:block;
  color:#000;
  padding:8px 16px;
  text-decoration:none;
}
ul li.active a{
  background-color:#4169e1;
}
ul li:not(.active) a:hover{
  background:#555;
  color:#fff;
}
div.content{
  margin-left:25%;
  padding: 1px 16px;
  height:1000px;
}
@media screen and (max-width:1024px){
  ul{
    width:100%;
    height:auto;
    position:relative;
  }
  ul li a{
    float:left;
    padding:15px;
  }
  div.content{
    margin-left:0;
  }
}
@media screen and (max-width:485px){
  ul li a{
    float:none;
    text-align:center;
  }
}

Sekian tutorial kali ini semoga bermanfaat, untuk belajar kode diatas bisa anda gunakan codepen.io dan jsfiddle untuk belajar cepat dan mudah tanpa menggunakan software komputer anda.