.::Piece Design::.

JuniorGS

Ola Pessoal da Piece Design Hoje Venho Trazer pra vcs um tutorial muito legal eo menu elegante com css3

Demonstração

Bom chega de enrolaçao vamo la:

Procure pela tag:

]]></b:skin>

Agora cole acima dessa tag o codigo abaixo:



<script type="text/javascript" src="https://sites.google.com/site/piecedesign2/downloads/jquery.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/piecedesign2/downloads/kwicks.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $('.anime').kwicks({

            max:200,

   duration:400

  });

    });

</script>

#menu{

width:800px;

margin:auto;

}

#menu ul{

list-style:none;

margin:0px;

padding:0px;

position:absolute;

}

#menu ul li{

width:135px;

height:40px;

cursor:pointer;

float:left;  

}

#menu ul li.home{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ZZcB72OVaSXRxwcIel2Ov56ONWfXhu59kLcLejVDOqAmqTdp45yM9cfH_RUuuDs04tLtOEd_TnSFnOAZFR1bMihU1CAD8AeLJCI-ADKwcpxjNnnY4T5e-E9iAZ9S9QB90Vw5ShSTccD/s800/Menu%25202.jpg);

background-position:0 0;

border-radius:5px 0px 0px 5px;

}

#menu ul li.contato{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ZZcB72OVaSXRxwcIel2Ov56ONWfXhu59kLcLejVDOqAmqTdp45yM9cfH_RUuuDs04tLtOEd_TnSFnOAZFR1bMihU1CAD8AeLJCI-ADKwcpxjNnnY4T5e-E9iAZ9S9QB90Vw5ShSTccD/s800/Menu%25202.jpg);

background-position:200px 0;

}

#menu ul li.download{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ZZcB72OVaSXRxwcIel2Ov56ONWfXhu59kLcLejVDOqAmqTdp45yM9cfH_RUuuDs04tLtOEd_TnSFnOAZFR1bMihU1CAD8AeLJCI-ADKwcpxjNnnY4T5e-E9iAZ9S9QB90Vw5ShSTccD/s800/Menu%25202.jpg);

background-position:400px 0;

}

#menu ul li.pesquisa{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ZZcB72OVaSXRxwcIel2Ov56ONWfXhu59kLcLejVDOqAmqTdp45yM9cfH_RUuuDs04tLtOEd_TnSFnOAZFR1bMihU1CAD8AeLJCI-ADKwcpxjNnnY4T5e-E9iAZ9S9QB90Vw5ShSTccD/s800/Menu%25202.jpg);

background-position:600px 0;

border-radius:0px 5px 5px 0px;

}

#menu ul li.home:hover{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ZZcB72OVaSXRxwcIel2Ov56ONWfXhu59kLcLejVDOqAmqTdp45yM9cfH_RUuuDs04tLtOEd_TnSFnOAZFR1bMihU1CAD8AeLJCI-ADKwcpxjNnnY4T5e-E9iAZ9S9QB90Vw5ShSTccD/s800/Menu%25202.jpg);

background-position:0 -40px;

}

#menu ul li.contato:hover{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ZZcB72OVaSXRxwcIel2Ov56ONWfXhu59kLcLejVDOqAmqTdp45yM9cfH_RUuuDs04tLtOEd_TnSFnOAZFR1bMihU1CAD8AeLJCI-ADKwcpxjNnnY4T5e-E9iAZ9S9QB90Vw5ShSTccD/s800/Menu%25202.jpg);

background-position:200px -40px;

}

#menu ul li.download:hover{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ZZcB72OVaSXRxwcIel2Ov56ONWfXhu59kLcLejVDOqAmqTdp45yM9cfH_RUuuDs04tLtOEd_TnSFnOAZFR1bMihU1CAD8AeLJCI-ADKwcpxjNnnY4T5e-E9iAZ9S9QB90Vw5ShSTccD/s800/Menu%25202.jpg);

background-position:400px -40px;

}

#menu ul li.pesquisa:hover{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65ZZcB72OVaSXRxwcIel2Ov56ONWfXhu59kLcLejVDOqAmqTdp45yM9cfH_RUuuDs04tLtOEd_TnSFnOAZFR1bMihU1CAD8AeLJCI-ADKwcpxjNnnY4T5e-E9iAZ9S9QB90Vw5ShSTccD/s800/Menu%25202.jpg);

background-position:600px -40px;

}

#menu ul li a{

text-indent:-9999px;

display:block;

outline:none;

height:40px;  

}

Agora vai em layout>>adicionar um gadget>>HTML/Javascript:

<div id="menu">

       <ul class="anime">

           <li class="home"><a href="#">Home</a></li>

           <li class="contato"><a href="#">Contato</a></li>

           <li class="download"><a href="#">Download</a></li>

           <li class="pesquisa"><a href="#">Pesquisa</a></li>

       </ul>

    </div>

Menu Vertical CSS3

JuniorGS

Eai galera, hoje trouxe um menu completamente feito com CSS3 com uso de apenas uma imagem, confiram a demontração abaixo:

Demonstração

Bom... vamos ao tutorial
Vá em:
Modelo>>Editar Html>>Aperte CTRL+F
Busque pela tag:
]]></b:skin>
Logo acima dela cole o seguinte código:

 

/* Menu Vertical

----------------------------------*/

#hor {

list-style:none;

padding:0;

margin:0;

}

#hor li {

float:left;

padding:5px;

}

#hor a {

display:block;

height: 12px;

text-indent:-999em;

}

#hor a.home {

width:46px;

background:url(vHome.gif) no-repeat 0 0;

}

#hor a.download {

width:94px;

background:url(vDownload.gif) no-repeat 0 0;

}

#hor a.contact {

width:74px;

background:url(vContact.gif) no-repeat 0 0;

}



/* CSS Style for Vertical Menu */

#ver {

list-style:none;

padding:0;

margin:0;

}

#ver li {

padding:2px;

}

#ver li a {

display:block;

height:12px;

text-indent:-999em;

}

#ver a.home {

width:47px;

background:url(hHome.gif) no-repeat 0 0;

}

#ver a.download {

width:95px;

background:url(hDownload.gif) no-repeat 0 0;

}

#ver a.contact {

width:74px;

background:url(hContact.gif) no-repeat 0 0;

}



.clear {

clear:both;

}



*{

/* A universal CSS reset */

margin:0;

padding:0;

}



#navigationMenu body{

font-size:14px;

color:#666;

background:#111 no-repeat;



/* CSS3 Radial Gradients */

background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);

background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;

}

#navigationMenu li{

list-style:none;

height:39px;

padding:2px;

width:40px;

}

#navigationMenu span{

/* Container properties */

width:0;

left:38px;

padding:0;

position:absolute;

overflow:hidden;

/* Text properties */

font-family:'Myriad Pro',Arial, Helvetica, sans-serif;

font-size:18px;

font-weight:bold;

letter-spacing:0.6px;

white-space:nowrap;

line-height:39px;

/* CSS3 Transition: */

-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */

-moz-transition: 0.25s;

transition: 0.25s;

}

#navigationMenu a{

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMNiyFMqiMRAC7KYkkq341x6wJqRGTFj57JIuja6PLV0LlSDpcWIhsf2Tok5pK9FvNYuEIvwAO3xc-XqW8GPC280ZgRzbOUPfNdNjDUbNRZ6G1vnJ1I8BobovOXB_WZn6elM0EHOggdWFH/s1600/navigation.jpg') no-repeat;

height:39px;

width:38px;

display:block;

position:relative;

}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }

#navigationMenu a:hover{

text-decoration:none;

/* CSS outer glow with the box-shadow property */

-moz-box-shadow:0 0 5px #9ddff5;

-webkit-box-shadow:0 0 5px #9ddff5;

box-shadow:0 0 5px #9ddff5;

}

/* Green Button */

#navigationMenu .home { background-position:0 0;}

#navigationMenu .home:hover { background-position:0 -39px;}

#navigationMenu .home span{

background-color:#7da315;

color:#3d4f0c;

text-shadow:1px 1px 0 #99bf31;

}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}

#navigationMenu .about:hover { background-position:-38px -39px;}

#navigationMenu .about span{

background-color:#1e8bb4;

color:#223a44;

text-shadow:1px 1px 0 #44a8d0;

}

/* Orange Button */

#navigationMenu .arquivo { background-position:-76px 0;}

#navigationMenu .arquivo:hover { background-position:-76px -39px;}

#navigationMenu .arquivo span{

background-color:#c86c1f;

color:#5a3517;

text-shadow:1px 1px 0 #d28344;

}

/* Yellow Button */

#navigationMenu .marcadores { background-position:-114px 0;}

#navigationMenu .marcadores:hover{ background-position:-114px -39px;}

#navigationMenu .marcadores span{

background-color:#d0a525;

color:#604e18;

text-shadow:1px 1px 0 #d8b54b;

}

/* Purple Button */

#navigationMenu .contato { background-position:-152px 0;}

#navigationMenu .contato:hover { background-position:-152px -39px;}

#navigationMenu .contato span{

background-color:#af1e83;

color:#460f35;

text-shadow:1px 1px 0 #d244a6;

}

Salve, agora vá em:
Layout>>Adicionar Gadget>>HTML/JavaScript
Cole o seguinte codigo no JavaScript

 <div style='position: fixed; top: 40%; left: 0%;'/>

<ul id="navigationMenu">

<li>

<a class="home" href="Link do menu">

<span>Home</span>

</a>

</li>

<li>

<a class="about" href="Link do menu">

<span>About Us</span>

</a>

</li>

<li>

<a class="arquivo" href="Link do menu">

<span>Arquivo</span>

</a>

</li>

<li>

<a class="marcadores" href="Link do menu">

<span>Marcadores</span>

</a>

</li>

<li>

<a class="contato" href="Link do menu">

<span>Contato</span>

</a>

</li>

</ul>

</div>