fdirk Postado Dezembro 15, 2008 Denunciar Share Postado Dezembro 15, 2008 (editado) Bom dia, tenho uma página feita com alguns menus, gostaria de criar submenus, achei na net um modelo q gostei, mas não estou sabendo adptar ao formato da página q já tenho criada (não fui eu q criei essa página)Minha página "default.asp"<head><style id="MeuEstilo"><!--body { background-image: url(bgbody.JPG); background-repeat: repeat-Y; position: relative; background-attachment: scroll; background-position: center top; z-index: 10;}.img_PRINCIPAL { position: relative; top: -15px; left: 0px; z-index: 2; border-color: #FFFFFF; border-bottom-width: 1px;}.img_topo { position: relative; top: -19px; left: -0px; z-index: 1;}#menu{ position: relative; top: -24px; left: -300 px; width: 260px; font-family: Arial; z-index: 20; font-size: 13px;}#menu ul { background-image: url(fundo_menu_baixo.jpg); align: left; position: relative; background-repeat: no-repeat; background-position: bottom; color: #0D3F99; background-color: #FAFAFA; padding-bottom: 35px; border-color: #E7EFFD; border-right-width: 0px; border-left-width: 0px; border-top-width: 1px; border-bottom-width: 0px; border-style: solid;}#menu ul li { align: left; position: relative; background-repeat: no-repeat; background-position: bottom; list-style-position: inside; list-style: none; text-align: left; padding: 5px; padding-left: 0px; border-color: #E7EFFD; border-right-width: 1px; border-left-width: 0px; border-top-width: 0px; border-bottom-width: 1px; border-style: solid;}.menuselecionado ul li{ background-color: #BFFBFA;}function seleciona_fundo(objeto){ this.style.background='#DEE9FC'}--></style><title>Título</title></head><body><div align="center"><img class="img_PRINCIPAL" src="fundo_principal.PNG"><img class="img_topo" src="fundo_topo.JPG"><div id="menu"> <ul> <li onclick="location.href='default.asp'" onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">Home</li> <li onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">KM</li> <li onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">Contatos</li> <li onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">Participe: dê sugestões</li> <li onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">Mapa do Site</li> </ul> </td> </tr></table></div></div></body></html>Esse foi o modelo de submenu q gostei:<head> <style> <!-- /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; } * html ul li a { height: 1%; } /* End */ ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; top: 0; display: none; } ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } li:hover ul, li.over ul { display: block; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ --> </style> <script language="JavaScript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace (" over", ""); } } } } } window.onload=startList; </script> </head> <body> <ul id="nav"> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </body> </html>Como posso adaptar o submenu a minha página 'default.asp'??? Em relação ao formato, posição od submenu... Editado Dezembro 15, 2008 por fdirk Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 InfoCidreira Postado Dezembro 17, 2008 Denunciar Share Postado Dezembro 17, 2008 (editado) Ola!!Para criar sub-menu, basta substituir o codigo HMTL que inicia em <ul>......</ul> por este<ul id="nav"> <li><a href="#">Services</a> <ul> <li> <a href="#">Web Design</a> <!--Exemplo de Sub-Menu--> <ul> <a href="#">Sub-Menu</a> </ul> </li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> Editado Dezembro 17, 2008 por InfoCidreira Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
fdirk
Bom dia, tenho uma página feita com alguns menus, gostaria de criar submenus, achei na net um modelo q gostei, mas não estou sabendo adptar ao formato da página q já tenho criada (não fui eu q criei essa página)
Minha página "default.asp"
<head>
<style id="MeuEstilo">
<!--
body {
background-image: url(bgbody.JPG);
background-repeat: repeat-Y;
position: relative;
background-attachment: scroll;
background-position: center top;
z-index: 10;
}
.img_PRINCIPAL {
position: relative;
top: -15px;
left: 0px;
z-index: 2;
border-color: #FFFFFF;
border-bottom-width: 1px;
}
.img_topo {
position: relative;
top: -19px;
left: -0px;
z-index: 1;
}
#menu{
position: relative;
top: -24px;
left: -300 px;
width: 260px;
font-family: Arial;
z-index: 20;
font-size: 13px;
}
#menu ul {
background-image: url(fundo_menu_baixo.jpg);
align: left;
position: relative;
background-repeat: no-repeat;
background-position: bottom;
color: #0D3F99;
background-color: #FAFAFA;
padding-bottom: 35px;
border-color: #E7EFFD;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 1px;
border-bottom-width: 0px;
border-style: solid;
}
#menu ul li {
align: left;
position: relative;
background-repeat: no-repeat;
background-position: bottom;
list-style-position: inside;
list-style: none;
text-align: left;
padding: 5px;
padding-left: 0px;
border-color: #E7EFFD;
border-right-width: 1px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
border-style: solid;
}
.menuselecionado ul li{
background-color: #BFFBFA;
}
function seleciona_fundo(objeto){
this.style.background='#DEE9FC'
}
-->
</style>
<title>Título</title>
</head>
<body>
<div align="center">
<img class="img_PRINCIPAL" src="fundo_principal.PNG">
<img class="img_topo" src="fundo_topo.JPG">
<div id="menu">
<ul>
<li onclick="location.href='default.asp'" onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">Home</li>
<li onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">KM</li>
<li onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">Contatos</li>
<li onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">Participe: dê sugestões</li>
<li onmouseOver="this.style.background='#DEE9FC'" onmouseOut="this.style.background='#FAFAFA'">Mapa do Site</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Esse foi o modelo de submenu q gostei:
Como posso adaptar o submenu a minha página 'default.asp'??? Em relação ao formato, posição od submenu...
Editado por fdirkLink para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.