Cara Menciptakan Sajian Navigasi Full Screen

Cara Membuat Navigasi Full Screen Cukup menarik jikalau kita berbicara mengenai navigasi atau sajian pada Blog, alasannya kita menemukan bebagai fitur yang menarik menyerupai Style Show Hide Navigation dan Navigasi Bouncing.

Demo   CODE

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

Silahkan Anda cari kode ]]></b:skin> lalu copy isyarat 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 isyarat </body> salin isyarat 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 isyarat diatas , maka Anda lewati langkah tersebut.

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

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

Selanjutnya pemasangan isyarat HTML, Anda dapat memasangnya pada Entri gres atau dapat 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 membisu condimentum, malesuada bersahabat 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 bersahabat 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 membisu condimentum, malesuada bersahabat 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 bersahabat 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


Sumber http://www.websiteedukasi.com/