4 respostas neste tópico

[mirtesmix]

BAIXEI ESTE SCRIPT:
Menu com animação
Menu bem simples com uma animação bem legal. Compatível com o IE e Firefox.
Enviado em 04 de Janeiro de 2009 por pitiko
JavaScript > Menu

EU QUERIA SABER COMO FAZ PRA COLOCAR MAIS SUB MENU EM CADA MENU!
OBRIGADA

[pitiko]

Já coloquei uma versão com submenu's neste link: http://www.codigofonte.net/scripts-1714/menu-com-animacao-20

[mirtesmix]

OI, PITIKO!
BOM DIA!
EU BAIXEI O CÓDIGO DO MENU COM ANIMAÇÃO, MAS COMO EU NÃO ENTENDO NADA DE CÓDIGO FONTE, MEXI EM TUDO E NÃO CONSEGUI FAZER ELE FICAR IGUAL AO SEU.
EU USO O DREAMWEAVER, SEMPRE PEGO OS CÓDIGOS PRONTOS, COLOCO A PARTE DE CSS E JS ENTRE OS HEAD
E O DIV EU COLOCO DENTRO DA TABELA.
NÃO TEM COMO VOCÊ ME MANDAR ELE PRONTO? A PARTE DE CSS E JS JUNTOS PRA COLOCAR NO HEAD E O RESTANTE, COM AQUELE MONTE DE MENU, SUB MENU E SUBSUB MENU. VOCÊ ME MANDANDO ELE PRONTO, EU VOU MEXENDO ATÉ FICAR COMO EU PRECISO. EU TENHO ESSE ABAIXO, MAS QUERIA UM IGUAL O SEU!


COLOCAR NO HEAD


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}


/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<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>-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", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>


COLOCAR NA TABELA


<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>



OBRIGADA POR ENQUANTO,
MIRTES

[pitiko]

Pera.. não entendi, você quer que eu coloque o JavaScript e o CSS numa arquivo só? Que seria no HTML?

[mirtesmix]

OI, PITIKO!
MEU GRANDE PROBLEMA É QUE NÃO ENTENDO NADA DE NADA, MUITO MENOS DE CSS E JS, NEM SEI COMO MEXO NO DREAMWEAVER, MAS TAMBÉM SÓ FAÇO O BÁSICO. COMO SOU MUITO BURRINHA, PRECISO DE CÓDIGOS PRONTOS!
ENTREI LÁ NO SEU LINK, ENCONTREI UM MENU HORIZONTAL, MAS DEI MAIS UMAS VOLTINHAS NA NET E ENCONTREI ISSO AQUI: (FIZ UMAS MUDANÇAS NAS CORES PRA COMBINAR COM MEU SITE, O ORIGINAL TAVA VERMELHO DEMAIS )

<html>
<head>
<title>Untitled</title>

<!--|||||=========== COLOQUE ENTRE AS TAGS HEAD ==========|||||||||| -->

<!-- ||**||**||**|| FOLHA DE ESTILOS (CSS) ||**||**||**|| -->
<style type="text/css">
/*+++++++++++++++ RELATIVO AS CATEGORIAS +++++++++++++++++++++*/

/**** LINKS DOS NOMES DAS CATEGORIAS ****/
/* Link em estado natural*/
a.link_menu:link{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link depois de visitado*/
a.link_menu:visited{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link ao passar o mouse*/
a.link_menu:hover{color:#ffffff;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
/**** FIM LINKS DOS NOMES DAS CATEGORIAS ****/

/**** CELULAS DOS NOMES DAS CATEGORIAS ****/
/*padding top right bottom left */
.titulo_menu{
background-color:red;
background-image:url(none);
width:150px;
height:25px;
border:1px solid blue;
padding: 5px 0px 0px 5px;
}
/**** FIM CELULAS DOS NOMES DAS CATEGORIAS ****/

/*++++++++++++ FIM RELATIVO AS CATEGORIAS +++++++++++++++++++++*/



/*++++++++++++ RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/

/**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/
/* Link em estado natural*/
a.link_smenu:link{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link depois de visitado*/
a.link_smenu:visited{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link ao passar o mouse*/
a.link_smenu:hover{color:navy;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
/**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/

/**** CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/
/*padding top right bottom left */
.itens_menu{
background-color:blue;
background-image:url(none);
width:137px;
height:25px;
border:1px solid red;
padding: 5px 0px 0px 5px;
}
/**** FIM CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/

/**** CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/
.itens_menu_r{
background-color:#0099ff;
background-image:url(none);
width:137px;
height:25px;
border:1px solid red;
padding: 5px 0px 0px 5px;
}
/**** FIM CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/

/*++++++++++++ FIM RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/
</style>
<!-- ||**||**||** FIM FOLHA DE ESTILOS (CSS) ||**||**||** -->


<!-- |||||||||||||||| FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->
<script language="javascript">
c=0
du="";
function escondediv(dv,n){

for(i=1;i<=n;i++){
if(i==dv ){
if(du!=dv){
document.getElementById('mdiv'+i).style.display="inline"
du=dv
}else{
du=""
document.getElementById('mdiv'+i).style.display="none"
}
}else{
document.getElementById('mdiv'+i).style.display="none"
}

}
}

function reveza(qq){
document.getElementById(qq).className="itens_menu_r"
}
function volta(qq){
document.getElementById(qq).className="itens_menu"
}
</script>
<!-- ||||||||||||| FIM FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->

<!--|||||========== FIM COLOQUE ENTRE AS TAGS HEAD =========|||||||||| -->
</head>

<body>

<!--||||||||||||||||| COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

<script>
//Coloque aqui o número de itens de menu
n_divs='5'
</script>

<div class="titulo_menu"><a href="#" class="link_menu" target="alvo">Link fixo</a></div>

<div class="titulo_menu" ><a href="java script:void(escondediv('1',n_divs))" class="link_menu" >Categoria 1</a></div>
<div id="mdiv1" style="display:none">
<table border="0">
<tr><td id="um" class="itens_menu" ><a href="#" onmouseover="reveza('um')" onmouseout="volta('um')" class="link_smenu" target="alvo">link item1A</a></td></tr>

<tr><td class="itens_menu" ><a href="#" class="link_smenu" target="alvo">link item2A</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3A</a></td></tr>

</table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('2',n_divs))" class="link_menu">Categoria 2</a></div>
<div id="mdiv2" style="display:none">
<table border="0">

<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1B</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2B</a></td></tr>

<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3B</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('3',n_divs))" class="link_menu">Categoria 3</a></div>

<div id="mdiv3" style="display:none">
<table border="0">
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1C</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2C</a></td></tr>

<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3C</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('4',n_divs))" class="link_menu">Categoria 4</a></div>

<div id="mdiv4" style="display:none">
<table border="0">
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1D</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2D</a></td></tr>

<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3D</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('5',n_divs))" class="link_menu">Categoria 5</a></div>

<div id="mdiv5" style="display:none">
<table border="0">
<tr><td class="itens_menu"><a href="#" class="link_smenu">link item1E</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu">link item2E</a></td></tr>

<tr><td class="itens_menu"><a href="#" class="link_smenu">link item3E</a></td></tr>
</table>
</div>
<!--||||||||||||||||| COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

</body>
</html>


FICOU XIQUE NOS ÚRTIMO!
AGRADEÇO POR DEMAIS A SUA AJUDA!
QUANDO PRECISAR EU VOLTO!
BEIJOS LINDINHO! TÉ MAIS!
MIRTES