Menu


Menu Tab

Pages

Cara Memasang Sub Menu Rotatext

MEMASANG 
CSS MENU ROTATEXT
Login ke akun blog klik tata letak dan klik tambah gadged
copy code berikut letakan kedalam gadged tersebut klik simpan selesai
<style type="text/css"> #menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {
   border-bottom:2px solid #006400;
   margin:0 auto;
   text-align:center;
   position:relative;
   height:40px;
   z-index:999;
   background:#808080;
   -moz-perspective: 100px;
   -webkit-perspective: 100px;
   -o-perspective: 100px;
   perspective: 100px;} .menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {
   padding:0;margin:0;
   list-style:none;
   display:inline-block;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;} .text-logo {
   text-align:center;position:absolute;
   position: fixed;left: 52px;z-index: 999;
   overflow: hidden;color:#000;
   font-weight:bold;margin-top:-34px;
   border-bottom:3px solid blue;} .menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#006B6B;} .menu3Dflip ul.nav li:hover a.top-a {
   background:red;
   border-radius:8px 8px 0 0;
   -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);} .menu3Dflip ul.nav div {
   position:absolute;
   top:40px; left:4px;
   background:#fff;
   padding:5px 0 10px 0;
   border-radius:0 0 15px 15px;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;    -moz-transform-origin: 0px 0px;
   -moz-transform: rotateX(-90deg);
   -webkit-transform-origin: 0px 0px;
   -webkit-transform: rotateX(-90deg);
   -o-transform-origin: 0px 0px;
   -o-transform: rotateX(-90deg);
   transform-origin: 0px 0px;
   transform: rotateX(-90deg);
   -moz-backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;} .menu3Dflip ul.nav div.left {left:auto; right:4px;}
.menu3Dflip ul.nav div ul {
   padding:10px 0; list-style:none;
   width:140px; margin:10px 5px 0 5px;
   float:left; display:inline;
   text-align:left; background:#DCDCDC;
   border-radius:6px;
   -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);} .menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;} .menu3Dflip ul.nav div ul li a {
   display:block; width:105px;
   text-decoration:none;
   font:13px/16px arial, sans-serif;
   color:#8B0000 ; margin:0;
   padding:4px 0 4px 15px;
   background:transparent url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) no-repeat left center;} .menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) no-repeat 1px center;} .menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div {
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg); .logo {
   text-align:left;position:absolute;
   position: fixed;top: 0;left: 5px;
   z-index: 999;overflow: hidden;} </style>

<div id='menufixed'>
  <div class='menu3Dflip'>
    <ul class='nav'>
    <li><a class='top-a' href='#'><b>MENU 1</a>
<div class='col3'>
    <ul class='colLeft'>
<li><a href='http://myscript2010s.blogspot.co.id' title='HOME'>STOP</a></li>
    <li> <a href='http://Your Link'>Judul 1a</a> </li>
    <li> <a href='http://Your Link'>Judul 1b</a> </li>
    <li> <a href='http://Your Link'>Judul 1c</a> </li>
    </ul>
  <ul class='col'>
     <li><a href='http://Your Link'>Judul 2a</a></li>
     <li><a href='http://Your Link'>Judul 2b</a></li>
     <li><a href='http://Your Link'>Judul 2c</a></li>
     <li><a href='http://Your Link'>Judul 2d</a></li>
     </ul>
    <ul class='colRight'>
     <li><a href='http://Your Link'>Judul 3a</a></li>
     <li><a href='http://Your Link'>Judul 3b</a></li>
     <li><a href='http://Your Link'>Judul 3c</a></li>
     <li><a href='http://Your Link'>Judul 3d</a></li>
    </ul>

 <!!!..logo..:>
<div class='text-logo'>
<font size="3" color="grey"face="vivaldi">
&nbsp;&nbsp; <b>Mys2010<b></b></b></font> &nbsp;
<!..logo..!!:>

 </!..logo..!!:></div>
      </!!!..logo..:></div></li>
  <li><a class='top-a' href='#'><b>MENU 2</a>
<div class='col2'>
   <ul class='colLeft'>
   <li><a href='http://Your Link'>Judul 1a</a></li>
   <li><a href='http://Your Link'>Judul 1b</a></li>
   <li><a href='http://Your Link'>Judul 1c</a></li>
   <li><a href='http://Your Link'>Judul 1d</a>
   <li><a href='http://Your Link'>Judul 1e</a>
      </li>
      </li></ul>
      <ul class='colRight'>
   <li><a href='http://Your Link'>Judul 2a</a></li>
   <li><a href='http://Your Link'>Judul 2b</a></li>
   <li><a href='http://Your Link'>Judul 2c</a>   
   <li><a href='http://Your Link'>Judul 2d</a>
   <li><a href='http://Your Link'>Judul 2e</a>

     </li></li></li></ul>
</div>
  </li>
     <li><a class='top-a' href='#'><b>MENU 3</a>
<div class='col1'>
    <ul class='colSingle'>
      <li><a href='http://Your Link'>Judul 1a</a></li>
      <li><a href='http://Your Link'>Judul 1b</a></li>
      <li><a href='http://Your Link'>Judul 1c</a></li>
    </ul>
</div>
     </li>
     <li><a class='top-a' href='#'><b>MENU 4</a>
<div class='col2 left'>
 <ul class='colLeft'>
      <li><a href='http://Your Link'>Menu  1a</a></li>
      <li><a href='http://Your Link'>Menu  1b</a></li>
      <li><a href='http://Your Link'>Menu  1c</a></li>
      <li><a href='http://Your Link'>Menu  1d</a></li>
    </ul>
    <ul class='colRight'>
       <li><a href='http://Your Link'>Menu 2a</a></li>
       <li><a href='http://Your Link'>Menu 2b</a></li>
       <li><a href='http://Your Link'>Menu 2c</a></li>
       <li><a href='http://Your Link'>Menu 2d</a></li>
    </ul>
</div>
    </li>
     <li><a class='top-a' href='#'><b>MENU 5</a>
<div class='col1'>
    <ul class='colSingle'>
       <li><a href='http://Your Link'>Menu 1a</a></li>
       <li><a href='http://Your Link'>Menu 1b</a></li>
       <li><a href='http://Your Link'>Menu 1c</a></li>
    </ul>
</div>
      </li>
     <li><a class='top-a' href='#'><b>MENU 6</a>
<div class='col1'>
    <ul class='colSingle'>
      <li><a href='http://Your Link'>Beranda</a></li>
      <li><a href='http://www.blogger.com/follow-blog.g?blogID=8776766672634547419' target="_blank">
         Follow My Blog</a></li>     
    </ul>
</div>
  </li></ul></div><!!..ending to class='menu3Dflip'..!!>
</!!..ending></div><!!..edited by. myscript2010'..!!>
<!!..ending to id='menufixed'..!!></!!..ending></!!..edited>
Penjelasan :
Ganti Link yang berwarna orange dengan link sobat
Sumber by. SB77
Edited by. Myscript2010
Labels:

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi