Ir para conteúdo

Arquivado

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

Adair Junior

Menu dinâmico só com CSS

Por , em Desenvolvimento frontend

Recommended Posts

Adair Junior    0

Adair Junior
Postado

Tem como fazzer isso, sem o uso de JavaScript?

Segue o HTML e a folha de estilos que tentei fazer isso e não consegui.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" ><head>	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />	<style type="text/css" media="all">		@import "style.css";	</style>	<title>		Instituto Sollo - Gestão Pública e Privada e Consultoria Ambiental	</title></head><body>	<div id="container">		<div id="header1">		<h1><span>Instituto sollo</span></h1>		</div>				<div id="header2">		<h1><span>Gestão pública e Privada e Consultoria Ambiental</span></h1>		</div>				<div id="linkList">		<ul>			<li><a href="institucional.html" class="institucional">Institucional</a></li>			<li><a href="equipe.html">Equipe</a></li>			<li><a href="artigos.html">Artigos</a></li>			<li><a href="galeria.html">Galeria</a></li>			<li><a href="eventos.html">Eventos</a></li>			<li><a href="noticias.html">Notícias</a></li>			<li><a href="municipios.html">Municípios</a></li>			<li><a href="links.html">Links</a></li>			<li><a href="fale.html">Fale conosco</a></li>		</ul>		</div>				<div id="headerFlash">		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="120" />		<param name="movie" value="cabecalho.swf" />		<param name="quality" value="high" />		<embed src="cabecalho.swf" type="application/x-shockwave-flash" plugins="http://www.macromedia.com/go/geflashplayer" width="550" height="120"></embed>		</object>		</div>	</div></body></html>
* {   margin: 0;   padding: 0;   text-decoration: none;   list-style-type: none;   }body {   text-align: center;   }#container {   width: 760px;   text-align: left;   margin: auto;   }#header1 h1 {   width: 204px;   height: 21px;   background: transparent url(images/header1.jpg) no-repeat;   }#header1 h1 span {   display: none;   }#header2 h1 {   width: 204px;   height: 120px;   background: transparent url(images/header2.jpg) no-repeat;   }#header2 h1 span {   display: none;   }#linkList {   position: absolute;   top: 0;   width: 555px;   height: 21px;   margin-left: 205px;   }#linkList li {   display: inline;   }#linkList li a {   width: 61px;   height: 21px;   }   #headerFlash {   position: absolute;   top: 21px;   width: 550px;   margin-left: 204px;   }
Está assim: http://paginas.terra.com.br/informatica/testes/

 

Tem que ficar como no cabeçalho deste site: http://www.institutosollo.org.br/

 

 

Desde já agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Meu caro Adair... Eu não examinei seu código devido ao meu tempo curto, mas eu escrevi no notepad aki, rapidinho, um código que faz troca de imagem com CSS.. Não sei se seria o caso, mas segue aki (copie e cole no próprio notepad e salve para testar... Depois, crie 2 imagens, com 100px de comprimento e 28 de altura, com cores diferentes para cada caso [image1 e image2])...

<html><head><title>teste</title><style type="text/css"><!--ul {	list-style-type: none;	margin: 0;	padding: 0;}ul li {	display: inline;}ul li a {	display: block;	float: left;	width: 100px;	height: 28px;	text-indent: -1000px;	background: url(image1.gif) no-repeat;}ul li a:hover {	background: url(image2.gif) no-repeat;}--></style></head><body><ul>	<li><a href="#">Institucional</a></li>	<li><a href="#">Equipe</a></li>	<li><a href="#">Artigos</a></li>	<li><a href="#">Galeria</a></li>	<li><a href="#">Eventos</a></li>	<li><a href="#">Notícias</a></li>	<li><a href="#">Municípios</a></li>	<li><a href="#">Links</a></li>	<li><a href="#">Fale conosco</a></li></ul></body></html>
Vale destacar: se você quiser q o efeito no texto apareça na própria imagem (como o segundo exemplo q você mandou), então você terá que ter um código especificando cada imagem para cada link separadamente (por exemplo, ul li a.institucional, ul li a.equipe, e assim por diante...

 

Mas caso você queira, poder colocar o texto "em cima" da imagem e aplicar uma mudança de cor no mesmo, qdo estiver no estado ":hover"... Para isso, basta remover a propriedade "text-indent" e formatar o texto nos dois estados (link e over)...

 

Bom, espero q seja isso e q tenha ajudado... Qq coisa, é só postar... Abraço!!!

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