Dalam sebuah website kita sangat membutuhkan komponen yang biasanya disebut dengan nama menu, menu tersebut juga memiliki dua jenis yaitu menu vertical dan horizontal dengan berbagai macam efek yang dapat diaplikasikan.

Kali ini saya akan sharring bagaimana cara membuat menu vertikal dengan efek push left pada framework bootstrap, jadi jika kalian tidak menggunakan framework bootstrap maka kalian membutuhkan jQuery 2.1.0 yang dimana bootstrap juga menggunakan versi jQuery tersebut untuk menjalankan semua javascriptnya.

Untuk demo link kalian dapat dilihat pada jsfiddle untuk mempermudah proses modifikasiĀ jika diperlukan atau jika ingin tampilan full screen kalian dapat menggunakan link ini.

Struktur HTML

Untuk Struktur HTML kalian harus meletakkan nav di luar container dan buttonset di dalam container ataupun componen menu yang berfungsi sebagai tombol menampilkan menu.

<body class="pushmenu-push">
    <nav class="pushmenu pushmenu-left">
         <h3><i class="glyphicon glyphicon-th-list"></i> Menu</h3>

        <li><a href="#">Beranda</a>

        </li>
        <li><a href="#">Forum</a>

        </li>
        <li><a href="#">Blog</a>

        </li>
        <li><a href="#">About</a>

        </li>
         <h3><i class="glyphicon glyphicon-bullhorn"></i> Social Media</h3>

        <li><a href="#">Facebook</a>

        </li>
        <li><a href="#">Twitter</a>

        </li>
         <h3><i class="glyphicon glyphicon-tags"></i> Trending Topic</h3>

        <li><a href="#">Topic 1</a>

        </li>
        <li><a href="#">Topic 2</a>

        </li>
        <li><a href="#">Topic 3</a>

        </li>
        <li><a href="#">Topic 4</a>

        </li>
        <li><a href="#">Topic 5</a>

        </li>
    </nav>
    
</section> <section class="content"> <h1>Slideout Navigation</h1> <p></p> </section> <!-- End Content --> </div> <!-- End Main --> </div> <!-- End Container --> </body>

Memasukan code CSS

Karena pada artikel ini kita akan membuatnya menggunakan framework bootstrap maka code CSS yang harus dimasukkan yaitu :

body {
    margin: 0;
}
.pushmenu {
    /*this is the nav*/
    font-family: Arial, Helvetics, sans-serif;
    width: 240px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position:fixed;
}
.pushmenu h3 {
    color: #cbbfad;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 20px;
    margin: 0;
    background: #282522;
}
.pushmenu li {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 0.5em 1em;
    list-style:none;
    display: block;
    /* drops the nav vertically*/
}
.pushmenu li a {
    font-size: 1em;
    text-decoration: none;
    color:black;
}
.pushmenu li a:hover {
    color:#333;
}
.pushmenu li:active {
    background: #454f5c;
    color: #fff;
}
.pushmenu-left {
    left: -240px;
}
.pushmenu-left.pushmenu-open {
    left: 0;
}
.pushmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
.pushmenu-push-toright {
    left: 240px;
}
/*Transition*/
 .pushmenu, .pushmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#nav_list {
    background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
    cursor: pointer;
    height: 27px;
    width: 33px;
    text-indent: -99999em;
}
nav-list.active {
    background-position: -33px top;
}
.buttonset {
    background: #00A287;
    padding: 1em;
}
section.content {
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 20px;
}

Catatan : Namun jika kalian tidak menggunakan framework bootstrap atau hanya menggunakan jQuery saja maka kalian harus mengatur kembali pada bagian padding dan menambahkan height jika diperlukan.

Memasukkan Javascript

Agar perintah untuk memunculkan menu dan efek push left dapat berjalan maka diperlukan code ini dan pastikan letak javascript ini tepat dibawah jQuery atau menambahkan code ini pada file javascript yang sudah ada.

body {
    margin: 0;
}
.pushmenu {
    /*this is the nav*/
    font-family: Arial, Helvetics, sans-serif;
    width: 240px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position:fixed;
}
.pushmenu h3 {
    color: #cbbfad;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 20px;
    margin: 0;
    background: #282522;
}
.pushmenu li {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 0.5em 1em;
    list-style:none;
    display: block;
    /* drops the nav vertically*/
}
.pushmenu li a {
    font-size: 1em;
    text-decoration: none;
    color:black;
}
.pushmenu li a:hover {
    color:#333;
}
.pushmenu li:active {
    background: #454f5c;
    color: #fff;
}
.pushmenu-left {
    left: -240px;
}
.pushmenu-left.pushmenu-open {
    left: 0;
}
.pushmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
.pushmenu-push-toright {
    left: 240px;
}
/*Transition*/
 .pushmenu, .pushmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#nav_list {
    background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
    cursor: pointer;
    height: 27px;
    width: 33px;
    text-indent: -99999em;
}
nav-list.active {
    background-position: -33px top;
}
.buttonset {
    background: #00A287;
    padding: 1em;
}
section.content {
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 20px;
}

Maka hasilnya kurang lebih akan seperti ini :

//jsfiddle.net/SabunColek/vehLoark/7/embedded/

Bagaimana apakah tutorial ini bermanfaat untuk kalian ?, jika ada pertanyaan yang ingin disampaikan kalian dapat langsung mengirimkannya lewat kotak komentar dibawah dan pastikan informasi tentang apa yang ingin ditanyakan lengkap.`