Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Addiict

2 Problemas Com Meu Menu !

Por , em Desenvolvimento frontend

Recommended Posts

Addiict    0

Addiict
Postado

Boa noite, não sei se aqui é o lugar certo, mas eu achei apropriado.

 

Eu fiz este menu baseado em outro, mas eu editei ele todo, tamanho, cores, fonte e etc. Até achei que ficou bastante bonito ;D .

 

1° Mas não estou conseguindo colocar o menu na esquerda, já que ele vai ser incrementado em uma div e ele vai ter que ficar no topo e no canto esquerdo, vou mandar o código e o print e gostaria que solucionassem meu problema e postassem abaixo o que eu tenho que colocar e o que eu tenho que mudar.

 

2° Quando passa o mouse sobre o menu, no efeito hover o vermelho fica maior que o menu, também tentei e não consegui editar.

 

Desde já Grato Phillipi Paiva, Iniciante em WebDesign -

 

 

 

Código do Menu + CSS em style.

 

<!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=utf-8" />
<title>Teste de Menu</title>
</head>

<style type="text/css">

#solucoes-itens{
width: 5px;
}
#solucoes-itens ul{list-style-type:none;}
#solucoes-itens li{width:200px; height:43px;}
#solucoes-itens a{font: bold 12px  Arial, Helvetica, sans-serif ;
color:  #FFF;
text-decoration:none;
width:100%;
display:block;
padding:14px 0px 14px 14px;
}

#solucoes-itens a:hover{color: #FFF /*background:url(../images/bg_item_menu_over.jpg) no-repeat;*/}

.barra1{background:      #4F4F4F no-repeat;}
.barra1 a:hover{background:   #F00 no-repeat;}

.barra2{background:     #6E6E6E no-repeat;}
.barra2 a:hover{background:  #F00 no-repeat;}


</style>

<body>


<div id="solucoes-itens">
<ul>
					    <li class="barra1"><a href="http://www.netrevenda.com/revenda-dominios/">► Revenda de Domínios</CENTER></a></li>
						<li class="barra2"><a href="http://www.netrevenda.com/email-marketing/">► E-Mail Marketing</a></li>
						<li class="barra1"><a href="http://www.netrevenda.com/gerenciadores/">► Gerenciadores</a></li>
						<li class="barra2"><a href="http://www.netrevenda.com/servidores-dedicados/">► Servidores Dedicados</CENTER></a></li>
						<li class="barra1"><a href="http://www.netrevenda.com/co-location/">► Co-location</a></li>
						<li class="barra2"><a href="http://www.netrevenda.com/streaming/">►  Streaming</a></li>
						<li class="barra1"><a href="#">► Microsoft SQL Server 2008</a></li>
</ul>
				</div>
			</div>
</body>
</html>

 

 

Imagem do Menu

menugg.png

 

 

Quem quiser utilizar o menu, pode utilizar não guardo direitos autorais. só gostaria que se fosse postar em algum lugar, colocasse meus créditos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

denisx    0

denisx
Postado

Ola amigo, o eu resolvi o problema aqui do menu, o a unica coisa que fiz foi reatribuir os style para cada item do menu segue:

 

<!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=utf-8" />
<title>Teste de Menu</title>
</head>

<style type="text/css">

#solucoes-itens{
       width: 5px;
       }
#solucoes-itens ul{list-style-type:none;}
#solucoes-itens li{width:200px; height:43px;}
#solucoes-itens a{font: bold 12px  Arial, Helvetica, sans-serif ;
color:  #FFF;
text-decoration:none;
width:100%;
display:block;
padding:14px 0px 14px 14px;
}

#solucoes-itens a:hover{color: #FFF /*background:url(../images/bg_item_menu_over.jpg) no-repeat;*/}

.barra1{background:      #4F4F4F no-repeat;}
.barra1 a:hover{background:   #F00 no-repeat;}

.barra2{background:     #6E6E6E no-repeat;}
.barra2 a:hover{background:  #F00 no-repeat;}


</style>

<body>


<div id="solucoes-itens">
<ul>
                                                   <li class="barra1"><a href="http://www.netrevenda.com/revenda-dominios/" class="barra1">► Revenda de Domínios</CENTER></a></li>
                                                       <li class="barra2"><a href="http://www.netrevenda.com/email-marketing/" class="barra2">► E-Mail Marketing</a></li>
                                                       <li class="barra1"><a href="http://www.netrevenda.com/gerenciadores/" class="barra1">► Gerenciadores</a></li>
                                                       <li class="barra2"><a href="http://www.netrevenda.com/servidores-dedicados/" class="barra2">► Servidores Dedicados</CENTER></a></li>
                                                       <li class="barra1"><a href="http://www.netrevenda.com/co-location/" class="barra1">► Co-location</a></li>
                                                       <li class="barra2"><a href="http://www.netrevenda.com/streaming/" class="barra2">►  Streaming</a></li>
                                                       <li class="barra1"><a href="#" class="barra1">► Microsoft SQL Server 2008</a></li>
</ul>
                                       </div>
                               </div>
</body>
</html>

 

Sobre o posicionamento no canto esquerdo você tera que desenvolve a estrutura, adicionar o menu, ou se não usar o comando se não me engano o float ou o margin-right, por ai, desuclpa mas eu esqueci!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

4 Pontos:

 

1 - Inserir o menu em uma div é desnecessário

		<ul id="solucoes-itens">
		<li class="barra1"><a href="http://www.netrevenda.com/revenda-dominios/" class="barra1">► Revenda de Domínios</a></li>
		<li class="barra2"><a href="http://www.netrevenda.com/email-marketing/" class="barra2">► E-Mail Marketing</a></li>
		<li class="barra1"><a href="http://www.netrevenda.com/gerenciadores/" class="barra1">► Gerenciadores</a></li>
		<li class="barra2"><a href="http://www.netrevenda.com/servidores-dedicados/" class="barra2">► Servidores Dedicados</a></li>
		<li class="barra1"><a href="http://www.netrevenda.com/co-location/" class="barra1">► Co-location</a></li>
		<li class="barra2"><a href="http://www.netrevenda.com/streaming/" class="barra2">►  Streaming</a></li>
		<li class="barra1"><a href="#" class="barra1">► Microsoft SQL Server 2008</a></li>
	</ul>

 

2 - Pelo resultado proposto, não se faz necessário estilizar o LI, aplicando regras corretas para os outros elementos

#solucoes-itens { list-style: none; width: 200px; }
#solucoes-itens a { color: #fff; display: block; font: bold 12px Arial, Helvetica, sans-serif; height: 43px; line-height: 43px;  text-decoration: none; text-indent: 14px; }
#solucoes-itens a:hover { background: #f00; }

 

3 - As regras referente às classes 'barra' estão inutilizadas por questões de especificidade. Podem ser dispensadas sem afetar o estilo do menu.

 

4 - Utilizando-se de seletores (CSS3) inteligentes (ou javascript) é possível abolir as classes definidas nos LI e A. Como os fundos são cores 'chapadas', também faz-se desnecessário o uso de imagens, diminuindo o número de requisições e economizando em acessos e recursos do servidor.

#solucoes-itens { background: #333; list-style: none; width: 200px; padding: 0; }
#solucoes-itens li:nth-child(odd) { background: #777; }

 

var items = document.getElementById('solucoes-itens').childNodes;
for(var i = 0, ln = items.length; i < ln; i = i + 2) items.item(i).style.background = '#777';

 

Brinde:

Biblioteca para uso de seletores CSS em javascript: YASS

 

var items = _('#solucoes-itens li:nth-child(odd)');
for(var i in items) items[i].style.background = '#777';

 

Ou, também, obviamente, com jQuery

$('#solucoes-itens li:nth-child(odd)').css('background','#777');

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito