» » Hyder - Simple Hidden Navigation
Senin, 02 Februari 2015

Hyder - Simple Hidden Navigation

Side Panel
widget panel ini simpel namun cukup memberi nuansa lain pada template kalian .



telah diuji coba diwidget html/javascript dan ruang posting [bekerja].

apabila ada link rell asli , maka ubah secepat mungkin.


sebab widget ini sudah tak ada lagi demonya.

jangan lupa memakai font .
ubah link script / css nya ke google code atau semacamnya . 

<!-- Main Navigation -->
  <nav id="mainnavigation">
    <ul>
           <li><a href="#" class="current"><i class="fa fa-home"></i>&nbsp;Home</a> </li>
          <li> <a href="#"><i class="fa fa-cogs"></i>&nbsp;Services</a></li>
          <li> <a href="#"><i class="fa fa-list"></i>&nbsp;Blog</a> </li>
          <li> <a href="#"><i class="fa fa-smile-o"></i>&nbsp;About US</a></li>
          <li> <a href="#"><i class="fa fa-group"></i>&nbsp;Team</a> </li>
         <li>  <a href="#"><i class="fa fa-briefcase"></i>&nbsp;Portfolio</a></li>
          <li> <a href="#"><i class="fa fa-envelope"></i>&nbsp;Contacts</a></li>
      </ul>
   
      <a href="#" class="nav-trigger"><i class="fa fa-share-square-o"></i></a>
      <div id="description">
       <div class="logo">LOGO</div>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
   
   <!-- End Social Navigation -->
      <div class="socialnavigation">
       <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
       <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
       <a href="#" class="google"><i class="fa fa-google-plus"></i></a>
       <a href="#" class="github"><i class="fa fa-github"></i></a>
       <a href="#" class="youtube"><i class="fa fa-youtube-play"></i></a>
       <a href="#" class="flickr"><i class="fa fa-flickr"></i></a>
      </div> 
   <!-- End Social Navigation -->
   
  </nav> 
  <!-- End Main Navigation -->



<style>
@import url(http://fonts.googleapis.com/css?family=Sanchez);
@import url(http://fonts.googleapis.com/css?family=Baumans);

body {
 line-height: 1;
 background-image: url(http://2.s3.envato.com/files/71907669/img/back.png);
}
ol, ul {
 list-style: none;
}
a, a > * {
 color: #de4062;
 text-decoration: none;
}
a:hover, a > *:hover {
 text-decoration: none;
}

/*  Main Navigation */

nav#mainnavigation {
 width: 300px;
 height: 100%;
 position: fixed;
 right: -300px;
 top: 0;
 z-index: 10000;
 background:#ffffff;
 -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

nav#mainnavigation.active {
 right: 0;
 background: #fff;
}

nav#mainnavigation ul li a {
 font-family: "Lato", Helvetica, Arial, sans-serif !important;
 font-weight: 300 !important;
 letter-spacing: 0.20em !important;
}

.nav-trigger {
 position: absolute;
 top: 0px;
 left: -30px;
 width: 30px;
 height: 30px;
 background: #8a7972;
 text-align: center;
 line-height: 30px;
}

.nav-trigger:hover {
 background: #de4062;
}

.nav-trigger i {
 font-size: 17px;
 width: 100%;
 color: #ffffff;
 text-decoration: none;
}

.nav-trigger i:hover {
 text-decoration: none;
 color:#222;
}

nav#mainnavigation ul li a {
 display: block;
 padding: 16px 16px 16px 20px;
 outline: none;
 color: #333;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 400;
}

nav#mainnavigationul li a i {
 font-size: 17px;
 margin-right: 20px;
 color: #555555;
}

nav#mainnavigation ul li a:hover,
nav#mainnavigation ul li.current a {
 background: #8a7972;
 box-shadow: inset 0 -1px rgba(0,0,0,0);
 color: #333;
 text-decoration: none;
 border-right: 5px solid #de4062;
}

nav#mainnavigation ul li a:hover i,
nav#mainnavigation ul li.current a i {
 color: #222;
 -webkit-transition: all 0.6s ease-in-out;
       -moz-transition: all 0.6s ease-in-out;
     -ms-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
         transition: all 0.6s ease-in-out;
}

/* end Main Navigation */
/* =========================================== */

/* Description */
#description{
 width: 250px;
 margin: 25px;
}
#description .logo {
 font-family: 'Sanchez', serif;
 text-align: center ;
 font-size: 50px;
 padding: 5px;
 color: #de4062;
}
#description p {
    padding: 5px;
    text-align: justify;
    color: #8a7972;
    font-family: 'Baumans', cursive;

}

/* end Description */


/* =========================================== */

/* Social Nav */

.socialnavigation{
 position: absolute;
 bottom: 0;
 left: 0;
}

.socialnavigation a {
 position: relative;
 width: 50px;
 height: 50px;
 display: inline-block;
 float: left;
 background: #8a7972;
 text-align: center;
 line-height: 50px;
 -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
     -ms-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
         transition: all 0.6s ease-in-out;
}
.socialnavigation a i {
 font-size: 17px;
 color: #ffffff;
}
.socialnavigation a.twitter:hover {background: #de4062 !important;}
.socialnavigation a.facebook:hover {background: #de4062 !important;}
.socialnavigation a.google:hover {background: #de4062 !important;}
.socialnavigation a.github:hover {background: #de4062 !important;}
.socialnavigation a.youtube:hover {background: #de4062 !important;}
.socialnavigation a.flickr:hover {background: #de4062 !important;}
</style>


<!--reset.css--> 
<style>
/* ==================================================================
CSS Reset
================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

</style>


<!--jquery/1.8.2--> 
<script type="text/javascript" src="https://googledrive.com/host/0B7DpE12vkWyedzJOY0ZjVTdwRnc"></script>

 <!--menu.js-->
<script type="text/javascript" src="https://googledrive.com/host/0B7DpE12vkWyeWEJCMnBjcnhlV00"></script>

 <!--jquery.appear.js-->
<script type="text/javascript" src="https://googledrive.com/host/0B7DpE12vkWyeOEpNUkJiZVhoWDA"></script>


Tambahkan komentar Komentator

Konversi KodeOOT

Terima kasih telah berkomentar
Langganan: Posting Komentar (Atom)