como fasso pra fazer aqeles botoes qe qando a gente coloca o ponteiro do mouse sobre ele, aparece os sub-menus?
Botoes Com Listagem
Started By Marcelo MG, 08/02/2007, 16:29
4 replies to this topic
#2
Andreia Regina
-
- Conselheiros
-
- 1347 posts
Veterano
- Sexo:Feminino
- Localidade:PR
- Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.
Posted 08/02/2007, 17:07
Procura por menu dropdown em Javascript
Estou movendo seu tópico para lá
Teoria em Desenvolvimento para JavaScript / DOM / ECMAScript
Estou movendo seu tópico para lá
Teoria em Desenvolvimento para JavaScript / DOM / ECMAScript
Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum
#3
Marcelo MG
-
- Usuários
-
- 48 posts
Turista
- Sexo:Masculino
Posted 08/02/2007, 19:12
obrigado por colocar no lugar certo, mas como faz esses botoes? tipo, eu posso fazer a imagem do botao com o photoshop e depois fazer com qe ele apareça uma listagem qando chegar com o mouse sobre ele?
#4
matt.cavotta
-
- Usuários
-
- 347 posts
Ativo
- Sexo:Masculino
- Localidade:Campinas
- Interesses:Desenvolvimento Web & Programação
Posted 08/02/2007, 20:12
WebFórum - Equipe de Desenvolvimento - Estagiario
I'm back!
Edgy Eft 7.04
I'm back!
Edgy Eft 7.04
#5
Marcelo MG
-
- Usuários
-
- 48 posts
Turista
- Sexo:Masculino
Posted 08/02/2007, 20:21
poxa, vlw olha ai, consegui fazer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<body background="fundo.jpg">
<meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" />
<meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." />
<meta name="author" content="Nick Rigby" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="language" content="pt-br" />
<meta name="ICBM" content="-22.975781,-43.193082" />
<meta name="DC.title" content="CSS para Web Design" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Drop Down Menus - Parte 3</title>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}
}
window.onload = IEHoverPseudo;
</script>
<style type="text/css">
body { font: normal 62.5% verdana; }
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: #fff; /* IE6 Bug */
font-size: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #777;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
left: 149px; /* Set 1px less than menu width */
top: 0;
}
ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */
ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; }
ul#primary-nav li a:hover { color: #E2144A; }
</style>
</head>
<body>
<ul id="primary-nav">
<li><a href="#">A</a></li>
<li class="menuparent"><a href="#">B</a>
<ul>
<li><a href="#">BB</a></li>
<li><a href="#">BBB</a></li>
<li><a href="#">BBBB</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">C</a>
<ul>
<li><a href="#">CC</a></li>
<li><a href="#">CCC</a></li>
<li class="menuparent"><a href="#">CCCC</a>
</li>
<li><a href="#">CCCCCC</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">D</a>
<ul>
<li><a href="#">DD</a></li>
<li><a href="#">DDD</a></li>
<li><a href="#">DDDD</a></li>
<li><a href="#">DDDDD</a></li>
</ul>
</li>
</ul>
</body>
</html>
1 user(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)
