Membuat style menu yang tersembunyi dengan jquery

Pernahkan kita berkunjung di salah salah satu webiste yang memiliki keunikan salahsatunya adalah menu yang akan di tampilkan

di sembunyikan terlebih dahulu. sehinnga di harapkan siapa saja yang ingin mengetahui menu tersebut di harapkan untuk mengklik tombol sehinnga ketika di klik akan tampil beberapa informasi dari menu tersebut, berikut informasi gambar:

nah untuk memulai itu berikut coding yang dapat kalian gunakan


<div id="flyout-ribbon" class="ribbon">

  <ul>

    <li><a href="#"><img src="ads.png" alt="Ads" width="48" height="48" />Ads</a></li>

    <li><a href="#"><img src="users.png" alt="Users" width="48" height="48" />Users</a></li>

    <li><a href="#"><img src="images.png" alt="Images" width="48" height="48" />Images</a></li>

    <li><a href="#"><img src="hsettings.png" alt="General Settings" width="48" height="48" />General Settings</a></li>

    <li><a href="#"><img src="tools.png" alt="Tools" width="48" height="48" />Tools</a></li>

    <li<a href="#"><img src="errors.png" alt="Errors" width="48" height="48" />Errors</a></li>

  </ul>

</div>

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


<script src="flyout.ribbon.min.js" type="text/javascript"></script>

<script type="text/javascript">

  $(function() {

    $('#flyout-ribbon').FlyoutRibbon();

  });

</script>

css

 

.ribbon {position:fixed; top:0; right:0; width:32px; height:100px; overflow:hidden}


.ribbon ul, .ribbon .ribbon-toggle {height:98px; background:#b5b5b5; background:-webkit-gradient(linear, left top, left bottom, from(#ececec), to(#b5b5b5)); background:-moz-linear-gradient(top, #ececec, #b5b5b5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ececec', endColorstr='#b5b5b5')}

.ribbon .ribbon-toggle {width:30px; position:absolute; top:0; right:0; border:solid 1px #000; -moz-border-radius-topleft:6px; -moz-border-radius-bottomleft:6px; -webkit-border-top-left-radius:6px; -webkit-border-bottom-left-radius:6px; border-top-left-radius:6px; border-bottom-left-radius:6px}

.ribbon .ribbon-toggle.on {-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-1, M12=-1.2246063538223773e-16, M21=1.2246063538223773e-16, M22=-1); -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=-1.2246063538223773e-16, M21=1.2246063538223773e-16, M22=-1,sizingMethod='auto expand')"}

.ribbon .ribbon-toggle .arrow {border-style:dashed; border-color:transparent; border-width:20px; border-right-style:solid; border-right-color:#333; right:15px; top:30px; display:-moz-inline-box; display:inline-block; font-size:100px; height:0; line-height:0; position:relative; vertical-align:middle; width:0}

.ribbon ul {margin:0 30px 0 100%; border-top:solid 1px #000; border-bottom:solid 1px #000}

.ribbon li {float:left; text-align:center; margin:4px}

.ribbon li a {text-decoration:none; display:block; width:80px; height:73px; padding:8px; background:#efefef; border:solid 1px #ccc; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px}
9 .ribbon li a:hover {background:#ccc}

untuk dapat mengdownload versi lengkap coding dapat di klik disni

 

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

 

 

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id