728x90 AdSpace

Latest News

21 November 2011

Menu Navigasi CSS3

Snapshot Menu 1


Snapshot Menu 2




Langkah Pemasangan Menu 1

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

Cari kod
]]></b:skin>

Pastekan kod dibawah sebelum/diatas kod ]]></b:skin> tersebut


/* CSS3 TRANSITION ONLY EFFECT */
#panel {
width:300px;
list-style:none;
padding-top:30px;
display:inline-block;
}

#panel li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
}

#panel li a {
color:#fff;
display:block;
padding:10px;
}

#panel li a:hover {
color:#00c6ff;
}

#panel li.animation {
-moz-transition: all 0.4s ease-in-out;
-moz-transform:translateX(0px);
-o-transition: all 0.4s ease-in-out;
-o-transform:translateX(0px);
-webkit-transition: all 0.4s ease-in-out;
-webkit-transform:translateX(0px);
}

#panel li.animation:hover {
-moz-transform:translateX(25px);
-o-transform:translateX(25px);
-webkit-transform:translateX(25px);
}


3.Klik save template

4.Pergi ke layout page atau design-->Add a gadget-->Html Javascript
(Letakkan di sisi semasa di page element)

Pastekan kod dibawah dekat situ


<div id="panel">
<ul>
<li><h3>MENU</h3></li>
<li class="animation"><a href="#">Link 1</a></li>
<li class="animation"><a href="#">Link 2</a></li>
<li class="animation"><a href="#">Link 3</a></li>
<li class="animation"><a href="#">Link 4</a></li>
<li class="animation"><a href="#">Link 5</a></li>
</ul>
</div>


Langkah Pemasangan Menu 2

1.Log masuk ke blogger dashboard anda

2.Dekat Blogger Dashboard anda-->Klik Design --> Edit Html

Cari kod
]]></b:skin>

Pastekan kod dibawah sebelum/diatas kod ]]></b:skin> tersebut


/* CSS3 TRANSITION ONLY EFFECT */
#paneltwo {
width:300px;
list-style:none;
position:relative;
display:inline;
}

#paneltwo li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
float:left;
overflow:hidden;
position:relative;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
z-index:10;
overflow:hidden;
}

#paneltwo li a {
color:#fff;
display:block;
padding:10px;
}

#paneltwo li a:hover {
color:#00c6ff;
}

#paneltwo li.linkOne,
#paneltwo li.linkTwo,
#paneltwo li.linkThree,
#paneltwo li.linkFour,
#paneltwo li.linkFive {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne,
#paneltwo:hover li.linkTwo,
#paneltwo:hover li.linkThree,
#paneltwo:hover li.linkFour,
#paneltwo:hover li.linkFive {
-moz-transform:translateX(0px);
-moz-transition: all 1s ease-in-out;
-webkit-transform:translateX(0px);
-webkit-transition: all 1s ease-in-out;
-o-transform:translateX(0px);
-o-transition: all 1s ease-in-out;
}

#paneltwo li.linkOne {
-moz-transform:translateX(-90%);
-moz-transition-delay:0.6s;

-webkit-transform:translateX(-90%);
-webkit-transition-delay:0.6s;

-o-transform:translateX(-90%);
-o-transition-delay:0.6s;

z-index:5;
}

#paneltwo li.linkTwo {
-moz-transform:translateX(-180%);
-moz-transition-delay:0.5s;

-webkit-transform:translateX(-180%);
-webkit-transition-delay:0.5s;

-o-transform:translateX(-180%);
-o-transition-delay:0.5s;

z-index:4;
}

#paneltwo li.linkThree {
-moz-transform:translateX(-270%);
-moz-transition-delay:0.4s;

-webkit-transform:translateX(-270%);
-webkit-transition-delay:0.4s;

-o-transform:translateX(-270%);
-o-transition-delay:0.4s;

z-index:3;
}

#paneltwo li.linkFour {
-moz-transform:translateX(-360%);
-moz-transition-delay:0.3s;

-webkit-transform:translateX(-360%);
-webkit-transition-delay:0.3s;

-o-transform:translateX(-360%);
-o-transition-delay:0.3s;
z-index:2;
}

#paneltwo li.linkFive {
-moz-transform:translateX(-450%);
-moz-transition-delay:0.2s;

-webkit-transform:translateX(-450%);
-webkit-transition-delay:0.2s;

-o-transform:translateX(-450%);
-o-transition-delay:0.2s;

z-index:1;
}

#paneltwo:hover li.linkOne {
-moz-transition-delay:0s;
-webkit-transition-delay:0s;
-o-transition-delay:0s;
z-index:5;
}

#paneltwo:hover li.linkTwo {
-moz-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
-o-transition-delay:0.2s;
z-index:4;
}

#paneltwo:hover li.linkThree {
-moz-transition-delay:0.4s;
-webkit-transition-delay:0.4s;
-o-transition-delay:0.4s;
z-index:3;
}

#paneltwo:hover li.linkFour {
-moz-transition-delay:0.6s;
-webkit-transition-delay:0.6s;
-o-transition-delay:0.6s;
z-index:2;
}

#paneltwo:hover li.linkFive {
-moz-transition-delay:0.8s;
-webkit-transition-delay:0.8s;
-o-transition-delay:0.8s;
z-index:1;
}


3.Klik save template

4.Pergi ke layout page atau design-->Add a gadget-->Html Javascript
(Letakkan paling atas semasa di page element)

Pastekan kod dibawah dekat situ


<div id="paneltwo">
<li class="mask"><h3>MENU2 ></h3></li>
<li class="linkOne"><a href="#">Link 1</a></li>
<li class="linkTwo"><a href="#">Link 2</a></li>
<li class="linkThree"><a href="#">Link 3</a></li>
<li class="linkFour"><a href="#">Link 4</a></li>
<li class="linkFive"><a href="#">Link 5</a></li>

</div>
Menu Navigasi CSS3
  • Blogger Comments
  • Facebook Comments

0 ulasan:

Catat Ulasan

Top