Posted by Aak
Aak-share.com Updated at: 3:31:00 AM

Cara Membuat Menu Navigasi Full Screen

No comments:
Cara Membuat Navigasi Full Screen ~ Cukup menarik jika kita berbicara mengenai navigasi atau menu pada Blog, karena kita menemukan bebagai fitur yang menarik seperti Style Show Hide Navigation dan Navigasi Bouncing.



Pada navigasi ini cukup sederhana namun memiliki tampilan full screen dilengkapi dengan halaman artikel dan tombol toggle yang bisa mengubah tampilan menjadi vertikal dan horizontal. Bagaimana Anda tertarik berikut ini langkah-langkahnya :

Silahkan Anda cari kode ]]></b:skin> kemudian copy kode dibawah ini dan pastekan di atasnya.

/* HTML5 display-role reset for older browsers */
  section {
  display: block;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: 'Open Sans';
}
* {
  -webkit-transition: 0.25s all ease-out;
  -moz-transition: 0.25s all ease-out;
  -o-transition: 0.25s all ease-out;
  transition: 0.25s all ease-out;
}
p {
  font-size: 14px;
  line-height: 20px;
  color: #777;
  margin-bottom: 1em;
}
.app {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #eee;
}
.app-header {
  display: flex;
  flex-direction: row;
  height: 60px;
  width: 100%;
  flex-grow: 0;
  background: #ddd;
}
.app-logo {
  display: inline-block;
  font-size: 36px;
  width: 60px;
  text-align: center;
  padding-top: 10px;
  color: #999;
  cursor: pointer;
  background: #e5e5e5;
}
.app-logo:hover {
  background: #f5f5f5;
}
.app-logo .fa-bolt {
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -o-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  transform: rotate(12deg);
}
.app-nav {
  flex: 1;
  background: #888;
}
.app-nav ul {
  display: flex;
  flex-direction: row;
}
.app-nav a {
  display: block;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
  padding: 21px;
  color: #bbb;
  text-decoration: none;
}
.app-nav a:hover {
  background: #777;
}
.app-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  background: #ccc;
}
.app-footer {
  height: 30px;
  flex-grow: 0;
  background: #777;
}
.app-side-nav {
  min-width: 20%;
  flex-grow: 0;
  background: #ddd;
}
.app-side-nav a {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  padding: 15px;
  text-decoration: none;
}
.app-side-nav a:hover {
  background: #eee;
}
.app-viewport {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #fff;
}
.app-viewport.vertical {
  flex-direction: column;
}
.app-viewport.vertical .app-pane {
  border-bottom: 5px solid #ddd;
}
.app-viewport.horizontal {
  flex-direction: row;
}
.app-viewport.horizontal .app-pane {
  border-right: 5px solid #ddd;
}
.app-pane {
  flex: 1;
  padding: 30px;
  overflow: hidden;
  -webkit-box-shadow: inset 0 -5px 15px -5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -5px 15px -5px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -5px 15px -5px rgba(0, 0, 0, 0.15);
}
.app-pane:hover,
.app-pane:focus {
  overflow: auto;
}
.app-pane:last-child {
  border: none;
}

Selanjutnya Anda cari kode </body> salin kode dibawah ini  dan pastekan diatasnya .

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>

Catatan : Jika pada Template Anda sudah terinstall kode diatas , maka Anda lewati langkah tersebut.

Masih pada kode </body> , salin kode dibawah ini pasangkan diatasnya atau dibawah kode diatas .

<script type="text/javascript">
(function ($) {
    $(function () {
        $('#split-toggle').on('click', function (e) {
            e.preventDefault();
            $('.app-viewport').toggleClass('horizontal');
        });
    });
}(jQuery));
//
</script>

Selanjutnya pemasangan kode HTML, Anda bisa memasangnya pada Entri baru atau bisa juga dibawah kode <div id='main-wrapper'> .

<div class="app">
  <header class="app-header">
    <div class="app-logo">
      <span class="fa fa-bolt"></span>
    </div>
    <nav class="app-nav">
      <ul>
        <li><a href="#" id="split-toggle">Toggle Split</a></li>
      </ul>
    </nav>
  </header>

  <main class="app-body">

    <aside class="app-side-nav">
      <nav>
        <ul>
          <li><a href="#">Nav item 1</a></li>
          <li><a href="#">Nav item 2</a></li>
          <li><a href="#">Nav item 3</a></li>
          <li><a href="#">Nav item 1</a></li>
          <li><a href="#">Nav item 2</a></li>
          <li><a href="#">Nav item 3</a></li>
        </ul>
      </nav>
    </aside>

    <section class="app-viewport vertical horizontal">
      <section class="app-pane"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed diam condimentum, malesuada erat quis, sodales eros. </p>

<p>Nulla blandit gravida facilisis. Fusce vel nisl sem. Nunc dapibus tincidunt velit, a varius velit consectetur at. </p>

<p>Duis eu ultricies elit. Maecenas a turpis sed nunc porttitor ullamcorper. In malesuada posuere lacus, sit amet facilisis erat iaculis eu. In dictum turpis sed nisl faucibus, eu pretium ante malesuada.</p>

<p>Aenean quis sapien accumsan, porta eros id, venenatis justo. Ut elementum placerat arcu sit amet placerat. </p>

<p>Phasellus justo mi, ultrices vitae nibh vel, vulputate imperdiet lorem. Morbi viverra neque nunc, viverra venenatis nibh vestibulum hendrerit. Vestibulum a mattis quam. </p></section>
      <section class="app-pane"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed diam condimentum, malesuada erat quis, sodales eros. </p>

<p>Nulla blandit gravida facilisis. Fusce vel nisl sem. Nunc dapibus tincidunt velit, a varius velit consectetur at. </p>

<p>Duis eu ultricies elit. Maecenas a turpis sed nunc porttitor ullamcorper. In malesuada posuere lacus, sit amet facilisis erat iaculis eu.</p>

<p>Aenean quis sapien accumsan, porta eros id, venenatis justo. Ut elementum placerat arcu sit amet placerat. </p>

<p>Phasellus justo mi, ultrices vitae nibh vel, vulputate imperdiet lorem. Morbi viverra neque nunc, viverra venenatis nibh vestibulum hendrerit. Vestibulum a mattis quam. </p></section>
    </section>
  </main>

  <footer class="app-footer"></footer>
</div>


Semoga bermanfaat!

Source : http://meyerweb.com

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments