Nova postadora: Cycy + Tutorial
Autor: Cycy-chan | Publicado: 2012-07-18T09:19:00-07:00



Oiiii gente linda e perfeita que lê o "De repente teen" ! Tudo bem? Espero que sim. Bom, sou a nova postadora do DRT e sou a Cycy dona do blog&nbsp;Cute Place | Official&nbsp;(&lt;---- clica!!) mas meu nome mesmo é Cinthia. Tenho 12 anos, faço aniversário dia 14/03 e sou da religião espírita. Espero que gostem do que eu posto e de mim também rsrs'&nbsp;. Enfim, hoje irei postar um tutorial de como fazer um menu sem o uso de HTML. Isso mesmo! Sem HTML *o* Quer aprender? Então clica em "Mais informações"

Vá em Layout e adicione um novo gadget de HTML/Javascript. Copie o código abaixo e cole neste gadget:


&lt;style type="text/css"&gt;

/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{

width:250;

text align:center;

list-style-type: none;

font: normal 13px Century gothic;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

overflow: auto; /*force hasLayout in IE7 */

color: white;

text-align:center;

text-decoration: none;

padding: 0px;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{

background-color: #CDF0FF; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

background-color: #FDCDFF;}

/* Holly Hack for IE \*/

* html .sidebarmenu ul li { float: left; height: 1%; }

* html .sidebarmenu ul li a { height: 1%; }

/* End */

&lt;/style&gt;

&lt;script type="text/javascript"&gt;

//Nested Side Bar Menu (Mar 20th, 09)

//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){

for (var i=0; i&lt;menuids.length; i++){

var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

for (var t=0; t&lt;ultags.length; t++){

ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"

if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu

ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item

else //else if this is a sub level submenu (ul)

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

ultags[t].parentNode.onmouseover=function(){

this.getElementsByTagName("ul")[0].style.display="block"

}

ultags[t].parentNode.onmouseout=function(){

this.getElementsByTagName("ul")[0].style.display="none"

}

}

for (var t=ultags.length-1; t&gt;-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

ultags[t].style.visibility="visible"

ultags[t].style.display="none"

}

}

}

if (window.addEventListener)

window.addEventListener("load", initsidebarmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", initsidebarmenu)

&lt;/script&gt;

&lt;div class="sidebarmenu"&gt;

&lt;ul id="sidebarmenu1"&gt;

&lt;li&gt;&lt;a href="LINK DA PÁGINA"&gt;TÍTULO&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="LINK DA PÁGINA"&gt;TÍTULO&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="LINK DA PÁGINA"&gt;TÍTULO&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="LINK DA PÁGINA"&gt; TÍTULO&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&amp;gt

Substitua e personalize o menu do jeito que você quiser e prontinho! O resultado final é esse:

Quero agradecer ao&nbsp;Annyz-BlOg&nbsp;pelo o menu e a imagem (: E é isso gente. Gostaram? Dúvidas é só comentar aqui ou no&nbsp;meu blog&nbsp;okay? Tchau gente e até o próximo post! Fuiiiiiiii...