Ir para conteúdo

POWERED BY:

Arquivado

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

mystrader

Menu css e abas Ativas

Por , em Javascript

Recommended Posts

mystrader    0

mystrader
Postado

Olá pessoal!

 

Vocês sabem como posso capturar o ultimo clique em alguma aba e deixar ele ativa mesmo atualizando a página (como se fosse sessão).

 

outra coisa .. queria começar já com a primeira aba ativada com seu respectivos conteúdos....

 

desde já obrigadooooo !!!!

 

 

Abs pessoal

 

eis o código ; )

 

 

 

 

 

<!<!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=iso-88859-1" />

<title>Navegacao em abas com CSS - Sem javascript</title>


	<style type="text/css">
	
	   h1{
	  font: normal 25px Georgia, verdana;
	  color: #336699;
	 }
	 
	 h2{
	  font: normal 18px Georgia, verdana;
	  color: #d9d9d9;
	 }
	 
	 #tudo{
	  padding: 20px;
	 }
	 
		*{
			margin:0;
			padding:0;
		}
		body{
			font: 11px verdana;
		}
		a{
			text-decoration:none;
			outline:none;
		}
		ul{
			list-style:none;
		}
		ul#menu{
			position:relative;
			width:400px;
		}
		ul#menu li{
			float:left;
		}
		ul#menu li a{
			background-color:#E7EEF8;
			border:1px solid #8696AE;
		  color: #336699;
			display:block;
			float:left;
			padding:5px;
			width:88px;
			font-weight: bold;
		}
		ul#menu li a span{
		border-top:1px solid #8696AE;
			/*background-color:#cccccc;*/
			background-color:#ffc;
			border:1px solid #336699;
			border-top:none;
			color:#000;
			cursor:text;
			display:block;
			height:300px;
			left:0;
			padding:15px;
			position:absolute;
			top:25px;
			width:400px;
			z-index:1;			
			font: bold 15px "trebuchet ms", verdana, sans-serif;
			color: #000000;
			text-transform: uppercase;
		}
		
		
		/* aba clicada */
		ul#menu li a:focus, ul#menu li a:active{
			background-color:#ffc;
			border-bottom-color:#ffc;
		}
		
		
		/* Conteudo "clicado" */
		ul#menu li a:focus span, ul#menu li a:active span{
			background-color:#ffc;
			cursor:text;
			z-index:2;
		}
	
	ul#menu li a:focus span, ul#menu li a:active span{
			background-color:#ffc;
			cursor:text;
			z-index:2;
		}
	
	
/**/
				
	</style>
	<!--[if IE 6]>
		<style type="text/css">
			ul#menu li a span{
				z-index:-1;
			}
		</style>
	<![endif]-->
</head>

<body>
<div id="tudo">
		<h1>Teste com abas sem JavaScript - Somente com Css</h1><br />
		
		
		<div id="teste"></div>
		<a name="conteudo"></a>
		
		<div id="ativo">
			  <ul id="menu">
				  <li>			 
					  <a href="#1">Item 1 <span>Assunto referente a primeira aba</span></a>
				  </li>
				  <li>
					  <a href="#2">Item 2 <span>Assunto referente a segunda aba.</span></a>
				  </li>
				  <li>
					  <a href="#3">Item 3 <span>Assunto da terceira aba.</span></a>
		  
				  </li>
				  <li>
					  <a href="#4">Item 4 <span>Conseguimos! Mais uma vitória!</span></a>
				  </li>
			  </ul>
		 </div> 
			
			<br />
			<a href="#conteudo" class="invisivel">Quer voltar usuário?</a>
	</div>
	
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu fiz esse efeito de "atual" aqui:

http://www.cenasordidas.hbe.com.br/lay2/?p...amp;nick=Shadow

Foi a maneira mais simples que encontrei. Basta definir um ID para cada body de cada página, e chamar tudo isso no css depois:

/* id body */
#bodyindex #menu li a.menuindex,
#bodymapas #menu li a.menumapas,
#bodytutoriais #menu li a.menututoriais,
#bodycs_movies #menu li a.menucs_movies,
#bodyarsenal #menu li a.menuarsenal,
#bodyeditor #menu li a.menueditor,
#bodyscreenshot #menu li a.menuscreenshot,
#bodycontato #menu li a.menucontato {
	color: #FFF;
	display: block;
	background:  url("./img_bks/menu.png") 0 -97px; /* CSS Sprite, aqui é a imagem AZUL do meu menu*/
	padding: 8px 0 0 10px;
}
O menu ficam assim:

<ul id="menu">			  
			<li><a href="?pagina=mapas" class="menumapas" >Mapas</a></li>
			<li><a href="?pagina=tutoriais" class="menututoriais" >Tutoriais</a></li>
			<li><a href="?pagina=cs_movies" class="menucs_movies" >CS Movies</a></li>
			<li><a href="?pagina=arsenal" class="menuarsenal" >Arsenal</a></li>
			<li><a href="?pagina=editor" class="menueditor" >Editor</a></li>
			<li><a href="?pagina=ss" class="menuscreenshot" >Screen Shot</a></li>
			<li><a href="?pagina=contato" class="menucontato" >Contato</a></li>
		</ul><!-- fecha #menu -->
E o body

<body id="bodycs_movies">
Ou seja, o seletor CSS só vai atingir o item do menu atual, pois para ele valer, eu referenciei o body primeiro.

Compartilhar este post

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

Informação importante

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

  Aceito