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.

Membuat Link dan List Dengan HTML

Link adalah sebuah url atau alamat yang dapat diakses atau diklik selain itu juga link dapat disebut dengan penghubung antara satu page dengan page lainnya dalam sebuah halaman web sedangkan list biasa digunakan untuk sebuah penjelasan dengan ada penomoran atau bullet selain itu list juga digunakan untuk membuat menu atau navigasi baik di header atau di sidebar. Berikut dibawah ini penjelasan tentang link dan list serta dengan menu navigasinya.

a

a adalah tag html yang khusus dibuat untuk membuat link atau tautan yang dapat mengakses page/internal atau url/eksternal di sebuah website a harus disertai dengan href yang hampir sama dengan fungsi src yaitu source atau alamatnya.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<a href="page.html"> ... page ...</a>
<a href="http://www.codeberkas.xyz"> ... url ...</a>
<a href="../../www/folder"> ... folder ...</a>

</body>
</html>

ul, ol dan li

ul adalah kependekan dari unordered list yang berarti list yang berisi bullet yaitu bulat, kotak atau bulat bolong. ol adalah kependekan dari ordered list yang berisi penomoran atau angka romawi atau huruf dengan cara ditambah atribut type didepannya dengan nilai 1, A, a, I, i. li adalah list item dari ul dan ol yang digunakan untuk membuat item-item kepada keduannya sebagai contoh buatlah sebuah berkas bernama list.html dan code seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<ul>
  <li>... list 1 ...</li>
  <li>... list 2 ...</li>
  <li>... list 3 ...</li>
</ul>

<ol>
  <li>... list 1 ...</li>
  <li>... list 2 ...</li>
  <li>... list 3 ...</li>
</ol>

</body>
</html>

dl, dt, dd

dl adalah definisi dari deskripsi list (description list), sedangkan dt adalah definisi judul (defines the term), sedangkan dengan dd adalah penjelasan deskripsi (describes each), sebagai contoh buatkan berkas deskripsi.html dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<dl>
  <dt>... judul 1 ...</dt>
  <dd>... penjelasan 1 ...</dd>
  <dt>... judul 2 ...</dt>
  <dd>... penjelasan 2 ...</dd>
  <dt>... judul 3 ...</dt>
  <dd>... penjelasan 3 ...</dd>
</dl>

</body>
</html>

menu dan menuitem

menu dan menuitem umumnya digunakan pada context menu atau bisa dibilang untuk membuat menu klik kanan sedangkan untuk menu navigasi dan sidebar umumnya menggunakan ul dan li, untuk contoh buatkan berkas bernama menu.html seperti code dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<menu type="context">
  <menuitem label="Share" onclick="window.location.href='http://www.codeberkas.xyz';" icon="share.png"></menuitem>
  <menuitem label="About" onclick="window.location.assign('about.html');" icon="ico_reload.png"></menuitem>
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
</menu>

</body>
</html>

 

Vertical Menu Using jQuery and Bootstrap

vertical menu using jquery and bootstrap.

How to make vertical menu for desktop web apps using jquery and bootstrap.

vertical menu using jquery and bootstrap.

Import Library

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="bootstrap-vertical-menu.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Use Script

$(document).ready(function() {
      $('a').click(function(event) {
        $('a').removeClass('selected');
        $(this).addClass('selected');
        event.preventDefault();
      })
 });

Make Content

<nav class="navbar navbar-vertical-left">
  <ul class="nav navbar-nav">
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-star"></i> 
        <span>Menu 1</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-font"></i> 
        <span>Menu 2</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-rocket"></i> 
        <span>Menu 3</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-cog"></i> 
        <span>Menu 4</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-users"></i> 
        <span>Menu 5</span>
      </a>
    </li>
  </ul>
</nav>

 

Nested Menus Using jQuery and Bootstrap

Nested Menus Using jQuery and Bootstrap

Nested menus or navigation (deeply nested menus) using jquery and bootstrap is support desktop or mobile, Nested Nav is responsive plugin for bootstrap 2.3 – 3+

Nested Menus Using jQuery and Bootstrap

Import Library

<link href="//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="nestednav.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="jquery.nestednav.min.js"></script>

Design Style

body .btn {
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: #999;
  text-shadow: none;
}
body .btn:hover {
  background: #ab86bd;
}
body .btn.btn-navbar {
  background: #a883ba;
  border:none;
  box-shadow: none;
}
body .btn.btn-navbar .icon-bar {
  box-shadow: none;
}
body .btn.btn-main {
  background: #8d689f;
  padding: 20px;
  color: #fff;
}
body .btn.btn-main:hover {
  background: #ab86bd;
}
body .navbar.navbar-inverse .navbar-inner {
  border-radius: 0;
  background: #666;
  border: none;
}
body .navbar.navbar-inverse .navbar-inner a {
  text-shadow: none;
}
body .navbar.navbar-inverse .nav-collapse > ul > li a {
  color: #777;
}
body .navbar.navbar-inverse .nav-collapse > ul > li > a {
  color: #fff;
}
body .navbar.navbar-inverse .navbar-inner .active a,
body .navbar.navbar-inverse .navbar-inner a:hover,
body .navbar.navbar-inverse .navbar-inner a:focus {
  background: #888;
  color: #fff;
}
body .navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
body .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, 
body .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu.open > a,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu:hover > a,
body .navbar.navbar-inverse .navbar-inner .dropdown-submenu:focus > a  {
  background: #888;
  color: #fff;
}
body .nav-collapse.in.collapse {
  height: auto !important;
}
body {
  color: #777;
}
.box-purple {
  background: #ab86bd;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #8d689f;
}
.box-green {
  background: #cbdb8f;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #9cab61;
}
.box-grey {
  background: #999;
  padding: 20px;
  color: #fff;
  border-bottom: 4px solid #777;
}
.switch-vs {
  position:absolute;
  right: 0;
  top:0;
}

#docs table {
  word-wrap: break-word;
  table-layout: fixed;
  width: 90%;
  margin:auto;
}

@media (max-width: 800px) {
  body {
  padding: 0;
  }
  .page-header {
  padding: 20px;
  }
  .icon-random {
  font-size: 100px !important;
  line-height:100px;
  }
  .icon-random:before {
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .switch-vs {
  position: static;
  display:block;
  }
}

/* modify nestednav css for theme purposes */
#nested-nav {
  background: #555;
}
#nested-nav .nested-item {
  background: #666;
  color: #555;
}
#nested-nav a.nested-link {
  color: #a8b86c;
}
#nested-nav .nested-no-link {
  color: #999999;
}
#nested-nav .nested-caret, #nested-nav .nested-no-caret {
  background: #777;
}
#nested-nav .nested-container .nested-box,
#nested-nav .nested-container {
  background: #555;
}
#nested-nav .nested-container .nested-box-title {
  background: #a8b86c;
}
#nested-nav .nested-container .nested-box-close {
  background: #93a357;
}
#nested-nav .nested-container .nested-box .nested-no-caret {
  background: #606060;
}
#nested-nav .nested-container .nested-box .nested-caret {
  background: #444;
  color: #a8b86c;
}

Use Script

$(document).ready(function(){
    $('#nestify23').click(function(){
      $('#main-nav').nestednav();
      setTimeout(function(){
        $('.btn.btn-navbar').click();
      }, 550);
    });
});

Make Content

<div id="main-nav" class="navbar navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://www.verticolabs.com/">VerticoLabs</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="/nestedNav/">These</a></li>
              <li><a href="/nestedNav/">Are</a></li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="/nestedNav/">Boring <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="/nestedNav/">Links</a></li>
                  <li><a href="/nestedNav/">You</a></li>
                  <li><a href="/nestedNav/">Should not</a></li>
                  <li><a href="/nestedNav/">Click</a></li>
                  <li><a href="/nestedNav/">Snore</a></li>
                  <li class="dropdown-submenu">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="/nestedNav/">Fruits <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                      <li><a href="/nestedNav/">Bananas</a></li>
                      <li><a href="/nestedNav/">Watermelons</a></li>
                      <li><a href="/nestedNav/">Tomatoes</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">Linkless Dropdown <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/nestedNav/">Tomato</a></li>
                  <li><a href="/nestedNav/">Carrot</a></li>
                  <li><a href="/nestedNav/">Olive</a></li>
                                </ul>
                            </li>
            </ul>
          </div>
        </div>
      </div>
</div>