Ir para conteúdo

Arquivado

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

Rafael Moura

Formatação de um menu

Por , em Desenvolvimento frontend

Recommended Posts

estevao_lucas    0

estevao_lucas
Postado

cara!! você pode fazer isso em css mesmo!!vejo q naum tem a necessidade de javascript nem de flash! pelo menos pelo q eu to vendo!dah uma olhada no sitewww.maujor.com.brja tem varios tutoriais desse tipo de menu??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Moura    0

Rafael Moura
Postado

bota ceu codigo aki!css e html

Html
<div id="menu2">				<ul>					<li>SERVIÇOS</li>					<li id="sublista">						<ul>							<li><a href=\"javascript:void(0)\" title=\"serviço 1\">Serviço um</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 2\">Serviço dois</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 3\">Serviço três</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 4\">Serviço quatro</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 5\">Serviço cinco</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 6\">Serviço seis</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 7\">Serviço sete</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 8\">Serviço oito</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 9\">Serviço nove</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 10\">Serviço dez</a></li>							<li><a href=\"javascript:void(0)\" title=\"serviço 11\">Serviço onze</a></li>						</ul>					</li>				</ul>			</div>
e o css ta mais ou menos assim:
#menu2{	position:relative;	float:left;	width:211px;}#menu2 ul{	background-color:#045699;	width:191px;	margin-left:8px;	padding-left:8px;;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:9pt;	color:#FFF;}#menu2 ul #sublista{	list-style-type:none;}#menu2 ul li{	background-color:#045699;}
Kra to com essa dificuldade pq ainda sei muito pouco de css.. valew pela atenção

Compartilhar este post

Link para o post
Compartilhar em outros sites

estevao_lucas    0

estevao_lucas
Postado

e awe cara! beleza?

na paz....!

pra você começar a fazer as parada com css...tableless e talz primeiramente você tem q estudar.....estudar muito!

e mudando suas praticas aos poucos!!

 

tipo...você usou ai o position:relative e float:left pra q?? isso ai vai puxar o li pro lado esquerdo!!

o q você precisaria era apenas definir cor, font e espaçamento!!

 

eu fiz o cod ai pra tu curti!

ai tu dah uma estudada nele! bele?

 

tah aki! espero q seja +ou- isso aki!:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Exemplo!</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>* {	margin:0;	padding:0;}#menu {	width:211px;	font:11px Verdana, Arial, Tahoma;	background-color:#EEE;}#menu ul li {	background-color:#045699;	color:#FFF;	padding:5px 10px;	list-style-position:inside;}#menu ul ul {	padding:10px 0 10px;	list-style-position:inside;	list-style-type:disc;}#menu ul ul li {	height:18px;	background-color:transparent;	margin:0 20px;	padding:2px 0;	border-bottom:1px dotted #000;	color:#000;}#menu ul ul li a{	text-decoration:none;	color:#000;}</style></head><body><div id="menu">	<ul>		<li>Serviços</li>		<ul>			<li><a href="#" title="">Serviço um</a></li>			<li><a href="#" title="">Serviço dois</a></li>			<li><a href="#" title="">Serviço tres</a></li>			<li><a href="#" title="">Serviço quatro</a></li>		</ul>	</ul></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

pra você começar a fazer as parada com css...tableless e talz primeiramente você tem q estudar.....estudar muito!e mudando suas praticas aos poucos!!

Só pra complementar o q o estevao disse...leia bastante! Tem muito site q pode ajudar!!www.maujor.com ; www.tableless.com.br ; www.revolucao.etc.br ; www.w3schools.orgE fora o q tem na net!!! Estude bastante!!!Abraços!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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