Ir para conteúdo

POWERED BY:

Arquivado

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

Henrique Barcelos

Menu com abas

Por , em Desenvolvimento frontend

Recommended Posts

Henrique Barcelos    290

Henrique Barcelos
Postado

Boas galera =D

 

Cá estou eu mais uma vez com um tutorial...

 

Como o outro menu que postei aqui, segue o link para download:

http://www.4shared.com/file/178975515/37ff89e2/Menu_Abas.html

 

Vejam o resultado final:

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

LCS    0

LCS
Postado

Sem nenhuma maldade cara... eu posso dizer que eu te amo...Era tudo o que eu precisa....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Galera, o arquivo está fora do ar.

Fiz umas adaptações aqui para não usar imagens, segue 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-8859-1"> 
	<title>Menu Abas</title> 
	<style type="text/css"> 
		* { 
			margin: 0; 
			padding: 0; 
		} 

		body { 
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
			font-size: .8em; 
			background: #CCC; 
		} 

		ul { 
			list-style: none; 
		} 

		#all { 
			width: 980px; 
			margin: 0 auto; 
			padding: 10px; 
			background: #FFF; 
		} 

		ul#main_menu { 
			overflow: hidden; 
			position: relative; 
			z-index: 10; 
		} 

		ul#main_menu li { 
			float: left; 
			width: 120px; 
			margin-right: 10px; 
			text-align: center; 
			border: 1px solid #CCC; 
			border-bottom: none; 
			margin-top: 4px; 
			position: relative;
			border-radius: 5px 5px 0 0;
			overflow: hidden; 
		} 

		ul#main_menu li:hover, 
		ul#main_menu li.selecionado { 
			border-bottom: 1px solid #FFF; 
			margin-top: 0; 
		} 

		ul#main_menu li span { 
			display: none; 
			position: absolute; 
			top: 0; 
			width: 6px; 
			height: 6px; 
		} 

		ul#main_menu li span.left { 
			left: -1px; 
		} 

		ul#main_menu li span.right { 
			right: -1px; 
		} 

		ul#main_menu li a { 
			color: #333; 
			display: block; 
			line-height: 24px; 
			text-decoration: none; 
			background: #F9F9F9; 
		} 

		ul#main_menu li:hover a, 
		ul#main_menu li.selecionado a { 
			line-height: 28px; 
			background: #FFF; 
		} 

		ul#main_menu li:hover span.left, 
		ul#main_menu li.selecionado span.left { 

		} 

		ul#main_menu li:hover span.right, 
		ul#main_menu li.selecionado span.right { 

		} 

		#content { 
			position: relative; 
			z-index: 1; 
			top: -1px; 
			border: 1px solid #CCC; 
			padding: 10px; 
		} 

	</style>
	<script type="text/javascript">
		window.onload = function(){
			var items = document.getElementById('main_menu').getElementsByTagName('li');
			for(var i = 0; i < items.length; i++){
				var link = items[i].getElementsByTagName('a')[0];
				link.onclick = function(){
					for(var i = 0; i < items.length; i++){
						items[i].className = '';
					}
					var li = this.parentNode;
					li.className = 'selecionado';
				}
			}
		}
	</script> 
</head> 
<body> 
	<div id="all"> 
		<ul id="main_menu"> 
			<li class="selecionado"><span class="left"></span><a href="#">Home</a><span class="right"></span></li> 
			<li><span class="left"></span><a href="#">A Empresa</a><span class="right"></span></li> 
			<li><span class="left"></span><a href="#">Portifólio</a><span class="right"></span></li> 
			<li><span class="left"></span><a href="#">Serviços</a><span class="right"></span></li> 
			<li><span class="left"></span><a href="#">Contato</a><span class="right"></span></li> 
		</ul> 
		<div id="content"> 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque erat nec lorem facilisis dignissim. Vestibulum enim dui, accumsan et condimentum in, tempor tincidunt massa. Praesent malesuada metus quis augue placerat dictum. Maecenas gravida hendrerit ullamcorper. Vestibulum feugiat ipsum in erat pellentesque malesuada. Nulla facilisi. Donec at velit id erat accumsan dictum nec sed augue. Morbi sollicitudin tellus eu eros imperdiet porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed semper tincidunt sapien, rutrum iaculis massa sodales rutrum. Vivamus feugiat dictum facilisis. Fusce convallis sapien sed est ultrices posuere. Aliquam consectetur lacinia velit, adipiscing tempus mauris placerat eget.</p> 
			<p>Nulla in dui mauris. Duis id orci elit, sed lacinia velit. Pellentesque est diam, tristique id egestas ut, fermentum sodales ante. Sed vitae sem sit amet urna vehicula varius. Praesent a sapien vitae quam tincidunt mollis. Proin et erat mauris, eu convallis elit. Proin tincidunt ligula enim, sed ullamcorper sem. Aliquam consectetur malesuada orci, semper accumsan tellus malesuada vitae. Sed leo lectus, feugiat a dignissim vel, molestie vitae elit. Donec rhoncus odio vitae lectus elementum fermentum. Integer adipiscing velit at urna feugiat in consectetur nulla hendrerit. Praesent lobortis semper massa ac pellentesque. Donec volutpat ante vitae diam lacinia ac tincidunt tellus elementum. Pellentesque ut tempor felis. Integer metus enim, molestie eget egestas ut, dictum eget leo. Vivamus aliquet luctus odio et porta. Phasellus semper ultrices leo.</p> 
			<p>Aenean libero erat, imperdiet at auctor fringilla, malesuada at dui. Fusce venenatis metus sit amet felis varius lobortis. Aliquam quis leo enim. Integer porta mollis leo, quis ultrices dui ullamcorper et. Vestibulum feugiat fringilla tincidunt. Morbi nibh augue, volutpat vitae blandit sed, porta sed eros. Curabitur id leo ut quam feugiat convallis. Donec at augue nibh, cursus interdum mi. Morbi justo turpis, posuere at condimentum vitae, eleifend sed felis. Quisque egestas dolor in justo dapibus facilisis. Cras blandit libero magna. Aliquam ut nulla at massa pharetra condimentum. Aenean porttitor odio erat, dignissim scelerisque sem. Quisque interdum dui commodo lectus dignissim sodales. In sed enim et elit consequat imperdiet sed sed dolor.</p> 
			<p>Aliquam ut tellus elit. Aliquam erat volutpat. Etiam eget iaculis elit. Ut eget leo at nisl interdum posuere. Mauris vehicula mi in ligula venenatis adipiscing. Sed hendrerit nibh sed libero iaculis pharetra. Morbi rutrum pretium mauris, eget ornare sapien bibendum sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac odio in mi cursus ultrices lobortis non enim. Ut blandit faucibus dui, feugiat sagittis massa fermentum a. Maecenas bibendum, mi a adipiscing eleifend, sapien nulla varius velit, eu viverra neque sapien in lorem. Suspendisse potenti. Nam vitae ante ut dolor porta euismod. Duis feugiat, est ut rhoncus rhoncus, purus metus mattis diam, quis iaculis turpis urna et sapien. Mauris viverra tempus purus, vel luctus lacus placerat non. Donec ullamcorper mollis pharetra. Suspendisse erat lacus, auctor nec ultrices eu, lobortis non nisl.</p> 
			<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ligula lacus, pretium in condimentum et, bibendum in urna. Mauris luctus diam a sapien luctus quis commodo lacus tincidunt. Sed et dui sem. Phasellus commodo purus lectus. Nullam a dui et nisi tristique vestibulum. Vivamus accumsan nunc in augue auctor fringilla. Donec ut ante metus. Nunc id urna neque, in cursus mauris. Maecenas scelerisque, nisl in vulputate placerat, dolor sem commodo diam, sed porta mauris diam malesuada mauris.</p> 
		</div> 
	</div> 
</body> 
</html>

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