Fórum para dúvidas sobre CSS, Tableless e Webstandards.
Moderador: web
 por tiagocaus Offline » Qui Fev 16, 2012 9:02 pm
|
Boa noite,
Preciso criar um simples menu com até 5 níveis de sub-menus; a forma que precisa abir é de baixo para cima, pois ele ira ficar no rodapé da tela.
Poderia me ajudar com algo simples e bem limpo?
Obrigado.
tiagocaus
VETERANO
Mensagens: 166
Registrado em: Dom Jan 18, 2009 1:35 pm
|
por web Offline » Qui Fev 16, 2012 9:58 pm
por tiagocaus Offline » Qui Fev 16, 2012 10:26 pm
Dei uma olhada, amigão, você conhece outro que seja mais limpo em códigos?
tiagocaus
VETERANO
Mensagens: 166
Registrado em: Dom Jan 18, 2009 1:35 pm
|
por web Offline » Qui Fev 16, 2012 10:36 pm
Eu achei esse exemplo
- Código: Selecionar todos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.menu {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.menu li {
position: relative;
display: inline-block;
height: 1.2em;
}
.menu li div {
position: absolute;
bottom: 1.2em;
height: 1.2em;
display: none;
left: 0;
white-space:nowrap;
}
.menu li:hover div {
display: block;
}
</style>
</head>
<body>
<p>content goes here, could use a wrapper and some padding to clear the menu</p>
<ul class="menu">
<li>item 1</li>
<li>item 2
<div>
<div>
<div>
subitem 1
</div>
subitem 2
</div>
subitem 3
</div>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
</html>
Fonte: http://www.webmasterworld.com/css/3989853.htm
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por tiagocaus Offline » Qui Fev 16, 2012 10:55 pm
Achei um site que faz menus, gostei muito. Poderia me ajudar a mudar o código para fazer ele abrir para cima?
Veja:
- Código: Selecionar todos
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#ffffff;
background-repeat:repeat;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:147px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#ffffff;
border-width:0px;
border-color:#6655ff;
border-style:solid;
text-align:left;
text-decoration:none;
padding:4px;
_padding-left:0;
font:13px Arial;
color: #444444;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#AAAAAA; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:13px Arial;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#4792E6;
border-color:#665500;
border-style:solid;
font:13px Arial;
color: #ffffff;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_anim_1.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:11px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_double_1o.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(./images/arr_double_1o.gif)}
ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(./images/arr_double_1.gif)}
</style>
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menú</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="resumo.php">Resumo</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="minhasVendas.php"><span>Minhas vendas</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="vendas.php">Vendas</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Produtos</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="produtosAtivos.php">Ativos</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="produtosFinalizados.php">Finalizados</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="produtoCadastrar">Cadastrar</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="perguntasClientes.php">Perguntas recebidas</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="minhasCompras.php"><span>Minhas compras</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="minhasCompras.php">Minhas compras</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="perguntasFeitas.php">Perguntas feitas</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="meusDados.php">Meus dados</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
tiagocaus
VETERANO
Mensagens: 166
Registrado em: Dom Jan 18, 2009 1:35 pm
|
por web Offline » Sex Fev 17, 2012 9:10 am
Você tem que ver se no site que está criando o menu não tem essa opção. Sei que é relacionado ao posicionamento ao passar o cursor. Você tem que ver no exemplo que indiquei.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
por tiagocaus Offline » Sex Fev 17, 2012 10:04 am
No site não tem. Olhando para o codigo vc saberia informar?
tiagocaus
VETERANO
Mensagens: 166
Registrado em: Dom Jan 18, 2009 1:35 pm
|
por web Offline » Sex Fev 17, 2012 10:17 am
Não sei. O que sei é que é baseado na posição. No exemplo que indiquei seria o menu li div, ai basta você tentar adaptar ao seu menu.
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb1 [@] gmail [.] com
web
ADMIN
Mensagens: 12439
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
Voltar para CSS, Tableless e Webstandards
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 2 visitantes
|
|
|
