Senin, 24 Maret 2014
» »Unlabelled » Navigasi toggle

on
No Comment







KODE HTML

<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>


KODE CSS

/* 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}


KODE JAVASCRIPT

(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;

    };

})();


Diposting oleh di 11:41 AM
Share:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)