[Resolvido] menu faltando algo em css

deckards2bibi · Abril 26, 2012

bom gente criei um css assim

/* CSS Document */
*{margin:0;
padding:0;
}

#menu{
width:100%;
height:50px;
background:url(menuteste.png) repeat-x;
}

#menu ul{
list-style:none;
}


#menu ul li a{
text-decoration:none;
float:left;
padding:10px 20px 0 20px;
color:#fff;
border-top:5px solid #CC0000;
margin-top:2px;
}



/*-------------------- efeito de menu --------------------*/
#menu ul li .um a{
border-top:5px solid #000;
color:#cc0000;
}



#menu ul li .um a:hover{
border-top:5px solid #000;
color:#fff;
-moz-transition: border-top 0.3s ease-in 0s;
-webkit-transition: border-top 0.3s ease-in 0s;
transition: border-top 0.3s ease-in 0s;
}




#menu ul li .dois a{
border-top:5px solid #cc0000;
color:#fff;
}


#menu ul li .dois a:hover{
border-top:5px solid #000;
color:#fff;
-moz-transition: border-top 0.3s ease-in 0s;
-webkit-transition: border-top 0.3s ease-in 0s;
transition: border-top 0.3s ease-in 0s;
}

#menu ul li .tres a{
border-top:5px solid #cc0000;
color:#fff;
}



#menu ul li .tres a:hover{
border-top:5px solid #000;
color:#fff;
-moz-transition: border-top 0.3s ease-in 0s;
-webkit-transition: border-top 0.3s ease-in 0s;
transition: border-top 0.3s ease-in 0s;
}

#menu ul li .quatro a{
border-top:5px solid #cc0000;
color:#fff;
}



#menu ul li .quatro a:hover{
border-top:5px solid #000;
color:#fff;
-moz-transition: border-top 0.3s ease-in 0s;
-webkit-transition: border-top 0.3s ease-in 0s;
transition: border-top 0.3s ease-in 0s;
}

e chamei o mesmo em cada pagina linkada

e as paginas todas tem o mesmo codigo que este

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link href="teste.css" type="text/css" rel="stylesheet" />
<title>Untitled Document</title>
</head>

<body>
<div id="menu">
<ul>
	<li><span class="um"><a href="teste.html">Home</a></span></li>
	<li><span class="dois"><a href="fotos.html">Fotos</a></span></li>
	<li><span class="tres"><a href="download.html">Download</a></span></li>
	<li><span class="quatro"><a href="contatos.html">Contato</a></span></li>
</ul>
</div>

</body>
</html>

bom minha duvida e a seguinte

o primeiro menu que é "HOME" ele e com a letra vermelha e borda-top preta

e o resto quando passa o mouse fica assim

letra branca com border-top preto

testem ai ver se isso mesmo OK

se tiver tudo OK

eu gostaria de fazer o seguinte.

quando clicasse em qualquer outro menu como fotos,download,contatos

eu queria que todos ficasse que nem o home.

e home ficasse que nem como os outros menus fiquem passando o mouse e dando o mesmo efeito

tem como se sim

alguem que conseguiu fazer pode me da uma solução

a detalhe o fundo é uma imagem que eu fiz

ta ai o link para imagem

a imagem que ta ai é .gif pq o forum não aceitou

se derem para muda para .png fica melhor

mas fica a criterio de vocês agradeço

http://imageshack.us/photo/my-images/217/menuteste.gif/

um exemplo de um site que eu queria era desse aqui

achei o menu bem legal

Clique aqui

Vetaw · Abril 26, 2012

Se quer igual ao seu exemplo, eu fiz esse aqui, Exemplo de menu

Basta você adicionar uma class ON na página que estiver ativa, com o background diferente, e no hover da mesma você coloca o mesmo background. :)

você usa 3 backgrounds

fundo do menu

fundo hover para todos - lista cinza

fundo hover pra o link ativo - azul

/* Aqui inicia o menu */
#menu  {
   width:1020px;
height:100px;
}
/* Aqui vai o fundo normal */
#menu ul{
   background-image: url(bg-fundo.jpg);
background-repeat:repeat-x;
height:100px;
line-height:35px;
}
#menu small  {
   color:#999;
}
#menu ul li {
display:inline;
width:170px;
}
#menu ul li a {
   width:170px;
height:75px;
padding:25px 0 0 0;
float:left;
color:#333;
text-decoration:none;
font-weight:bold;
text-align:center;
}
/* Aqui vai o hover com a linha cinza em cima*/
#menu ul li a:hover {
 background-image: url(bg-ativo-hover.jpg);
 background-repeat:repeat-x;
}
/* Aqui vai o hover com a linha azul em cima*/
#menu ul li a.on { 
   background-image:url(bg-hover-2.jpg);
background-repeat:repeat-x;
color:#11B1FF;
}
/* Aqui vai o hover com a linha azul em cima*/
#menu ul li a.on:hover{
   background-image:url(bg-hover-2.jpg);
background-repeat:repeat-x;
color:#333;
}

deckards2bibi · Abril 26, 2012

vou tentar aqui

da pra abrir este topico

Diéssica · Abril 26, 2012

Tu quer fazer o menu ativo nessa solução?

http://forum.imasters.com.br/topic/463301-menu-globoesporte/page__view__findpost__p__1835550

deckards2bibi · Abril 27, 2012

Tu quer fazer o menu ativo nessa solução?

http://forum.imasters.com.br/topic/463301-menu-globoesporte/page__view__findpost__p__1835550

assim eu fiz que nem este que eu postei aqui nesse topico so que ele nao faz o efeito mesmo eu jogando o efeito que o rapaz ensina no topico ai emcima

vo manda de novo o codigo que eu fiz segundo o amigo acima

com as msm imagens que ele fez só que comigo nao funciona

eu utilizo link cego e depois comecei a linka pra algumas .html que eu fiz so para efeito mas o meu é local host mas msm assim nao funciona segue o codigo

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link href="teste.css" type="text/css" rel="stylesheet" />
<title>Untitled Document</title>
</head>

<body>
<div id="menu">
<ul>
	<li><a href="teste.html" class="on">Home</a></span></li>
	<li><a href="fotos.html">Fotos</a></span></li>
	<li><a href="download.html">Download</a></span></li>
	<li><a href="contatos.html">Contato</a></span></li>
</ul>
</div>

</body>
</html>

css

/* CSS Document */
*{margin:0;
padding:0;
}

#menu{
width:100%;
height:50px;
}



#menu ul{
list-style:none;
background-image: url(bg-fundo.jpg);
background-repeat:repeat-x;
height:50px;
}

#menu ul li{
display:inline;
}

#menu ul li a{
text-decoration:none;
float:left;
padding:18px 20px 0 20px;
color:#fff;
}



#menu ul li a:hover{
 background-image: url(bg-ativo-hover.jpg);
        background-repeat:repeat-x;
}
/*-------------------- efeito de menu --------------------*/


#menu ul li a.on{
   background-image:url(bg-hover-2.jpg);
       background-repeat:repeat-x;
       color:#11B1FF;
}

#menu ul li a.on:hover{
   background-image:url(bg-hover-2.jpg);
       background-repeat:repeat-x;
       color:#333;
}

Vetaw · Abril 27, 2012

Está tudo dando ok aqui, você só tem que adicionar a (class on) na outra página,

você está na home? (class on) nela. na próxima página fotos você tira a (class on) da home e coloca apenas na página fotos.html, e assim em todas as páginas, isso serve para você destacar a página que você está.

Isso vai funcionar se você for usar outras páginas iguais na parte do menu, no caso de um include, que o menu fica sempre igual ja não vai mudar na página ativa. :ermm: ai acho que tem que arrumar outra solução :pinch:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link href="teste.css" type="text/css" rel="stylesheet" />
<title>Untitled Document</title>
</head>

<body>
<div id="menu">
       <ul>
               <li><a href="index.html">Home</a></span></li>
               <li><a href="fotos2.html" class="on" >Fotos</a></span></li>
               <li><a href="download.html">Download</a></span></li>
               <li><a href="contatos.html">Contato</a></span></li>
       </ul>
</div>

</body>
</html>

deckards2bibi · Abril 27, 2012

vlw amigão é isso mesmo que você falou obrigado

agora se eu fizer isso em php, faço a mesma coisa será que funfa ?

pois eu já deixo salvo toda a configuração do header ai eu terei que editar em cada página no php que nem você mando eu fazer

por exemplo

tenho os seguintes documentos.

home.php download.php contato.php

eu vou ter que ir em cada uma delas e por um class="on" em cada pagina ou será que tem outra forma

Diéssica · Abril 27, 2012

eu vou ter que ir em cada uma delas e por um class="on" em cada pagina ou será que tem outra forma

:seta: http://forum.imasters.com.br/topic/456750-aplicar-class-a-menu-ativo-com-querystring/

Ou então com JS:

$(document).ready(function () {
   $("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("on");
});

Vetaw · Abril 27, 2012

Sim, seguindo o mesmo modelo daria certo sim, mas geralmente se usa a parte do menu unica, e puxa as paginas com include, mantendo sempre o mesmo menu para todas as páginas, ja para evitar o trabalho de editar todas as páginas quando necessário.

Acho que deve ter sim algo parecido de forma mais simples.

Ai está a solução de nossa amiga.... Rs

deckards2bibi · Abril 27, 2012

Sim, seguindo o mesmo modelo daria certo sim, mas geralmente se usa a parte do menu unica, e puxa as paginas com include, mantendo sempre o mesmo menu para todas as páginas, ja para evitar o trabalho de editar todas as páginas quando necessário.

Acho que deve ter sim algo parecido de forma mais simples.

Ai está a solução de nossa amiga.... Rs

poderia da um exemplo

meu caro.

Diéssica · Abril 28, 2012

poderia da um exemplo

meu caro.

:seta: http://forum.imasters.com.br/topic/455812-resolvidoframes-modelos-de-pagina-ou-php/

Se quiser ver direto o código...

:seta: http://forum.imasters.com.br/topic/455812-resolvidoframes-modelos-de-pagina-ou-php/page__view__findpost__p__1803727

deckards2bibi · Maio 2, 2012

resolvido

Arquivado

[Resolvido] menu faltando algo em css

Recommended Posts

deckards2bibi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vetaw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

deckards2bibi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

deckards2bibi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vetaw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

deckards2bibi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vetaw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

deckards2bibi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

deckards2bibi 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante