Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 218

Menu simples

16-02-2012 21:02

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.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu simples

16-02-2012 21:58

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 218

Menu simples

16-02-2012 22:26

Dei uma olhada, amigão, você conhece outro que seja mais limpo em códigos?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu simples

16-02-2012 22:36

Eu achei esse exemplo

<!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
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 218

Menu simples

16-02-2012 22:55

Achei um site que faz menus, gostei muito. Poderia me ajudar a mudar o código para fazer ele abrir para cima?
Veja:

<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>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu simples

17-02-2012 09:10

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.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 218

Menu simples

17-02-2012 10:04

No site não tem. Olhando para o codigo vc saberia informar?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu simples

17-02-2012 10:17

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.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado