[Resolvido] Sub-menu

- KbeçãO - · Março 4, 2011

Bom dia iMastes..

como prometi ontem, o proximo post so veio hj..

:P

Então...

tenho um menu q funcione beleza..

mas durante a construção, descobri que esqueci de 2 sub-menus...

e ñ sei como oculta-lo co CSS...

da preciso da ajuda de vcs...

ai vai o menu...

<div id="menu">
               <ul>
                   <li><a href="?pg=empresa">Empresa</a></li> //aqui preciso de 2 sub-menus, "Editorial" e "Resp.Social"
                   <li><a href="?pg=clientes">Clientes</a></li>
                   <li><a href="?pg=portifolio">Portifólio</a></li>
                   <li><a href="?pg=certificados">Certificados</a></li>
                   <li><a href="?pg=premios">Prêmios</a></li>
                   <li><a href="?pg=parceiros">Parceiros</a></li>
                 <li class="last"><a href="?pg=contato">Contato</a></li>
               </ul>
     	</div>

CSS

#menu ul{

   float: left;
      list-style:none;
      margin: 0;
      padding: 0;

}

#menu ul li{
      display: inline;
      float:left;
      border-right: 1px solid #FFF;
      padding:7px 0;
}

#menu ul li a{
     color:#FFF;
     text-decoration: none;
     padding:0px 36px;
  float: left;
  height: 
}


#menu ul li a:hover{
     color: #FF0;
}

#menu .last{

border-right: none;

}

ali na parte da empresa, faltam editorial e resp.social (responsabilidade social)

William Bruno · Março 4, 2011

<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
background: #000;
color: #f0f;
}
#menu {
float: left;
margin: 0;
padding: 0;
}
#menu li{
list-style: none;
float:left;
border-right: 1px solid #FFF;
padding: 7px 0;
position: relative;
}
#menu ul {
position: absolute;
top: 30px;
left: 0;
width: 250px;
display: none;
}
#menu li:hover ul {
display: block;
}
#menu ul li {
float: none;
border-right: none;
}
#menu a{
color:#FFF;
text-decoration: none;
padding: 0px 36px;
float: left;
}
#menu a:hover{
color: #FF0;
}
#menu .last{
border-right: none;
}
</style>
</head>
<body>
<ul id="menu">
	<li><a href="?pg=empresa">Empresa</a>
		<ul>
			<li><a href="?pg=editorial">Editorial</a></li>
			<li><a href="?pg=responsabilidade-social">Responsabilidade Social</a></li>		
		</ul>
	</li>
	<li><a href="?pg=clientes">Clientes</a></li>
	<li><a href="?pg=portifolio">Portifólio</a></li>
	<li><a href="?pg=certificados">Certificados</a></li>
	<li><a href="?pg=premios">Prêmios</a></li>
	<li><a href="?pg=parceiros">Parceiros</a></li>
	<li class="last"><a href="?pg=contato">Contato</a></li>
</ul><!-- /menu -->
</body>
</html>

rode num navegador 'bom', depois para corrigir no IE, você precisará de javascript. (pq o ie não aceita :hover, em nenhuma outra tag q não seja o <a>).

aqui tem exemplos de como fazer:

http://forum.imasters.com.br/topic/354140-repente-css-menus/

- KbeçãO - · Março 4, 2011

entao esse menu, ñ rodará corretamente no IE ?

da forma como você fez, ele se tornou uma extensão do menu, ou seja, foram adicionados à frente do <li> empresa...

aqui no meu pc tenho um problema...

so consigo testar arquivos php no IE...

no FF ñ consegue lê-los....

=/

William Bruno · Março 4, 2011

entao esse menu, ñ rodará corretamente no IE ?

para funcionar no ie6, você precisa entrar no topico que linkei, e usar um javascript de lá.

da forma como você fez, ele se tornou uma extensão do menu, ou seja, foram adicionados à frente do <li> empresa...

você pegou o meu css ??

aqui no meu pc tenho um problema...

so consigo testar arquivos php no IE...

hein?!! isso não faz sentido.

no FF ñ consegue lê-los....

como assim ? você está acessando através do servidor?

http://localhost/index.php ??

- KbeçãO - · Março 4, 2011

como assim ? você está acessando através do servidor?

http://localhost/Sim/index.php ??

sim...

acesso via localhost no Dream ( F 12 ) pq ñ tenho outro programa...

hein?!! isso não faz sentido.

eu tbm ñ entendi...

tenho php, apache, mrsql tudo instalado...

>.<

você pegou o meu css ??

sim, peguei ele inteiro, o menu simplismente desapareceu..

Oo

William Bruno · Março 4, 2011

Roda somente o meu arquivo, do inicio ao fim, sem mexer nada nele.

qndo você aperta F12 no DW, como fica a URL no browser ?

- KbeçãO - · Março 4, 2011

URL:

D:\trabalhos\web\homes_php\Sim\Untitled-2.html

fiz um arquivo novo para seu exemplo

realmente da certo..

so o sub menu ficou fora de prumo e sem fundo..

vou tentar acertar aqui..

qlqr posto aqui...

topico ainda n ta resolvido mas falta pouco

William Bruno · Março 4, 2011

D:\trabalhos\web\homes_php\Sim\Untitled-2.html

por isso, está rodando o arquivo diretamente, sem passar antes pelo servidor.

Cara, larga o DW, credo. [ notepad++ é leve e gratuito ]

para rodar o php, teria que estar assim na URL do browser:

localhost/homes_php/Sim/Untitled-2.html

ai sim, você estaria usando o apache para interpretar php.

- KbeçãO - · Março 4, 2011

eu tenho notpad++

sei q o DW e um lixo..

mas ele tem uma coisa ou otra q me agrada...

so q e tenso, pq n sei todos os codigo..

o DW tem opção de mostrar os codigos em qto digito...

sei la...

tentei usar o Aptana..

mas n consegui configura-lo para testar no FF,

ñ ando com tempo para ficar configurando...

>.<

como coloco fundo no sub-menu ??

William Bruno · Março 4, 2011

adicionando um background-color, -image.. para a UL do submenu.

você entendeu a questão da URL ?

e assim, se quer testar, não fique dependendo do editor.

vai lá, abre o browser, abre o servidor, digita a url até o arquivo, e testa. Nada mais natural.

- KbeçãO - · Março 4, 2011

entendi sim...

funcionou aqui..

=]

eu btf ( boto fé ) no q você falou sobre o editor...

acaba q vira um vicio..

mas e como falei..

ñ ando com tempo pra ficar procurando programas...

=/

qdo chegar o carnaval vo ter todo o tempo do mundo, ja q num vo faze nada msmo...

x/

bom..

agora so preciso q o sub-menu fique no centro ...

ai sim o topico estara resolvido...

No Rain · Março 4, 2011

eu tenho notpad++

sei q o DW e um lixo..

mas ele tem uma coisa ou otra q me agrada...

so q e tenso, pq n sei todos os codigo..

o DW tem opção de mostrar os codigos em qto digito...

sei la...

tentei usar o Aptana..

mas n consegui configura-lo para testar no FF,

ñ ando com tempo para ficar configurando...

>.<

como coloco fundo no sub-menu ??

Para criar páginas com as configurações do seevidor você deve ir no menu site > new site e criar o site especificando o servidor remoto e servidor de teste.

O Dreaweaver é um dos mais sofisticados programadas de edição de sites. suas ferramentas e funções de auxilio na escrita dos códigos são imensas. Não conheço um programa que bata o dreaweaver nisso.

O grande problema é que usam o dreamweaver no modo "template", criando o layout pelo visual e não pelo modo de código.

Henrique Barcelos · Março 7, 2011

O Dreaweaver é um dos mais sofisticados programadas de edição de sites. suas ferramentas e funções de auxilio na escrita dos códigos são imensas. Não conheço um programa que bata o dreaweaver nisso.

Conheço uns 3 só que dão de 10 a 0 no DW e ainda são gratuitos:

Eclipse + PDT
Zend Studio
Aptana Studio

Usando o DW você fica dependente dele, como nosso colega acima.

Não se prenda às ferramentas.

Um pedreiro trabalha com qualquer tipo de tijolo, pq não podemos fazer o mesmo?

____________________________________________________________________

@KbeçãO

Cara, baixa o WAMP Server 2.1, instala.

Depois você copia suas pastas para o diretório C:\wamp\www\minha_pasta

Com o WAMP executando, é só usar a seguinde URL para acessar: http://127.0.0.1/minha_pasta

E pronto, seus problemas acabaram.

Evandro Oliveira · Março 30, 2011

http://ftp.unicamp.br/pub/apache//httpd/binaries/

http://php.net/downloads.php

http://www.mysql.com/downloads/mysql/5.1.html

Next > Next > Next > Finish.

Usar um xAMP é tanta preguiça quanto usar DW em modo design.

Tenho usado para propósitos pessoais o PHPStorm. Recomendadíssimo, apesar de pago.

- KbeçãO - · Março 30, 2011

submenu tbm resolvido....

até ja tinha postado o resultado em outro topico meu..

ainda sim, vou postar o css...

//css

#menu {
       float: left;
       margin: 0;
       padding: 0;
	background: #006;
	width: 970px;

}
#menu li{
       list-style: none;
       float:left;
       border-right: 1px solid #FFF;
       padding: 7px 0;
       position: relative;
}
#menu ul {
       position: absolute;
       top: 30px;
       left: 0;
       width: 95px;
       display: none;
	background-color: #0066FF;
	text-decoration: none;
	font: 12pt;
	text-align: left;
}
#menu li:hover ul {
       display: block;

}

#menu a{
       color:#FFF;
       text-decoration: none;
       padding: 0px 36px;
       float: left;
}
#menu a:hover{
       color: #FF0;
}
#menu .last{
       border-right: none;
}

#menu .align{

margin-left: -35px;
border-right: none;
border-bottom: 1px solid #FFFFFF;

}
#menu .align2{

margin-left: -50px;
border-right: none;

//html

<ul id="menu">
               <li><a href="">Empresa</a>
                       <ul>
                           <li class="align"><a href="?pg=editorial">Editorial</a></li>
                           <li class="align2"><a href="?pg=resp_social">Resp.Social</a></li>    
                       </ul>
               </li>
               <li><a href="?pg=clientes">Clientes</a></li>
               <li><a href="?pg=portifolio">Portifólio</a></li>
               <li><a href="?pg=certificados">Certificados</a></li>
               <li><a href="?pg=premios">Prêmios</a></li>
               <li><a href="?pg=parceiros">Parceiros</a></li>
               <li class="last"><a href="?pg=contato">Contato</a></li>
       </ul>

@Evandro...

Vlw a disposição em "desinterrar" o tópico...

^^

só pra constar, Larguei de mão do DW, to usando NotPad++ msmo..

^^,

Arquivado

[Resolvido] Sub-menu

Recommended Posts

- KbeçãO - 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

- KbeçãO - 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

- KbeçãO - 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

- KbeçãO - 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

- KbeçãO - 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

- KbeçãO - 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

No Rain 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

- KbeçãO - 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tratar hora no php

Navbar no Nextjs

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita

Fóruns

Tempo Real

Informação importante