Dapat uang melalui internet
ProsperousBoom.com
» » Cara dapatkan Toggle Side Navigation di blog

Cara dapatkan Toggle Side Navigation di blog

Cara dapatkan Toggle Side Navigation di blog

Image of toggle side navigation example. See the navicon symbol!

HTML

123456789101112131415161718192021<div id="outer-wrapper">

    <section id="nav">
        <a href="#nav" id="toggle-nav-btn" title="Show Navigation">&equiv;</a>
        <div class="inner">
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Archive</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            ...
            ...
        </div>
    </section>

    <section id="main">
        Artikel di sini...
    </section>

</div>

CSS

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566/* Outer wrapper */
#outer-wrapper {
  background-color:black;
  overflow:hidden;
}

/* Left sidebar */
#nav {
  float:left;
  width:2.8em;
  color:#999;
  position:relative;
}

#nav .inner {
  padding:1em;
  display:none;
}

.menu,
.menu li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

.menu {margin:2em -1em 1em}

.menu a {
  display:block;
  font-weight:bold;
  color:white;
  text-decoration:none;
  height:2.4em;
  line-height:2.4em;
  padding:0 1em;
}

.menu a:hover {background-color:#222}

/* Right sidebar */
#main {
  background-color:white;
  margin-left:2.8em; /* Same with the `#nav` width */
  padding:1em 2em;
}

/* Toggle navigation button */
#toggle-nav-btn {
  text-decoration:none;
  font-size:200%;
  line-height:100%;
  color:#666;
  display:block;
  position:absolute;
  top:.2em;
  right:.4em;
}

#toggle-nav-btn:hover {color:#888}

/* When the `.menu-is-visible` class applied */
.menu-is-visible #nav {width:200px}
.menu-is-visible #nav .inner {display:block}
.menu-is-visible #main {margin-left:200px} /* Same with the `.menu-is-visible #nav` width */
.menu-is-visible #toggle-nav-btn {color:#aaa}

JavaScript

JavaScript ini digunakan untuk menambahkan dan melepaskan kelas .menu-is-visible pada elemen <body> secara bergantian:
12345678910111213141516171819202122(function() {

    var page = document.body,
        btn = document.getElementById('toggle-nav-btn');

    btn.onclick = function() {

        // Toggle the `.menu-is-visible` class to the <body> tag based on `#toggle-btn-nav` click event
        page.className = (/(^| )menu-is-visible( |$)/.test(page.className)) ?
            page.className.replace(/menu-is-visible/,"") :
                page.className + " menu-is-visible";

        // Toggle the toggle navigation title too...
        this.title = (this.title == "Show Navigation") ?
            "Hide Navigation" :
                "Show Navigation";

        return false;

    };

})();
Lihat Demo

Alternatif Lain

Kita juga bisa menggunakan plugin JQuery Toggle Sidebar untuk menampilkan dan menyembunyikan sidebar, dimana menu navigasi berada di dalam sidebar tersebut. Tapi dalam kasus ini Saya tidak menyarankannya, mengingat menggunakan JavaScript mentah saja masih bisa:
$('#nav').toggleSidebar({
    expand: "#main",
    defaultHidden: true
});



share this article to: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Unknown, Published at 19.27 and have 0 komentar

Tidak ada komentar:

Posting Komentar