Publicado em 4 de mar.

[Resolvido] Sub-menu

#desenvolvimento-frontend

Bom dia iMastes..

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

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)

Discussão (14)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 4 de mar.

<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 -· 4 de mar.

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· 4 de mar.

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 -· 4 de mar.

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

William Bruno· 4 de mar.

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 -· 4 de mar.

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· 4 de mar.

>
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 -· 4 de mar.

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· 4 de mar.

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 -· 4 de mar.

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

bom..

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

ai sim o topico estara resolvido...

No Rain· 4 de mar.

>
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· 7 de mar.

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· 30 de mar.

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 -· 30 de mar.

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

^^,