•  
     

Menus para sites em HTML E CSS

Menu 1

Código: Selecionar todos

<!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><title>F.E.A.R.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="cont_menu">
        <div class="link">
                <div class="detalhe" id="d1"></div>
                <a href="#" onmouseover="aHover('l1', 'd1')" onmouseout="aLink('l1', 'd1')"><span class="texto" id="l1">Home</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d2"></div>
                <a href="#" onmouseover="aHover('l2', 'd2')" onmouseout="aLink('l2', 'd2')"><span class="texto" id="l2">Game</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d3"></div>
                <a href="#" onmouseover="aHover('l3', 'd3')" onmouseout="aLink('l3', 'd3')"><span class="texto" id="l3">Dicas</span></a>
        </div>
<div class="space"></div>
        <div class="link">
                <div class="detalhe" id="d4"></div>
                <a href="#" onmouseover="aHover('l4', 'd4')" onmouseout="aLink('l4', 'd4')"><span class="texto" id="l4">Voltar</span></a>
        </div>
</div>
</body>
</html>


Menu.css

Código: Selecionar todos

body {
        background: url(http://4.bp.blogspot.com/_6uelXRSeyRA/SXxcrvKPtiI/AAAAAAAAJwM/1-tODdGMMiU/s400/fear_2.jpg) no-repeat 0 0;
        margin: 0;
        }
#cont_menu {
        margin: 50px 0 0 50px;
        width: 120px;
        height: 195px;
        }
a:Link {
        color: #000;
        cursor: hand;
        }
a:Visited {
        color: #000;
        cursor: hand;
        }
a:Hover {
        color: #682800;
        cursor: hand;
        }
.texto:Hover {
        text-decoration: underline;
        }
.space {
        width: 10px;
        height: 5px;
        }
.link {
        background: url(bg.png) no-repeat center center;
        width: 120px;
        height: 45px;
        }
.texto {
        background-color: #FFF;
        float: right;
        margin: 10px 10px 0 0;
        padding-left: 5px;
        width: 95px;
        height: 22px;
        }
.detalhe {
        background-color: #FFF;
        float: left;
        width: 10px;
        height: 10px;
        }
 
menu.js

Código: Selecionar todos

function aHover(vl, vd){
        var vvl = document.getElementById(vl);
        var vvd = document.getElementById(vd);
        vvl.style.backgroundColor="#EFBA2C";
        vvd.style.backgroundColor="#EFBA2C";
        }
function aLink(vl, vd){
        var vvl = document.getElementById(vl);
        var vvd = document.getElementById(vd);
        vvl.style.backgroundColor="#FFF";
        vvd.style.backgroundColor="#FFF";
        }


primeiroMenu.html

Código: Selecionar todos

<!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>Desafio iMasters - Menu</title> 
<style type="text/css" media="screen,projection"> 
body {background:#000; margin:0; padding:0; font:14px Verdana;}
#menu {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/bg.jpg');
	width:400px;
	height:300px;
	position:absolute;
}
#menu ul {
	margin:50px 0 0 50px;
	padding:0;
	list-style:none;
}
#menu ul li {
	line-height:45px;
	text-indent:15px;
}
#menu ul li a {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/menu.png');
	width:120px;
	height:45px;
	margin:5px;
	text-decoration:none;
	color:#000;
	display:block;
}
#menu ul li a:hover {
	background:url('http://www.rafaelhonorio.com.br/menu/imgs/menuhover.png');
	text-decoration:underline;
	cursor:pointer;
}
</style> 
<script type="text/javascript" src="http://www.rafaelhonorio.com.br/menu/jquery.js"></script> 
<script type="text/javascript" src="http://www.rafaelhonorio.com.br/menu/png.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () {$(document).pngFix();});
</script> 
</head> 
 
<body> 
 
<div id="menu"> 
	<ul> 
		<li><a href="#">Home</a></li> 
		<li><a href="#">Game</a></li> 
		<li><a href="#">Dicas</a></li> 
		<li><a href="#">Voltar</a></li> 
	</ul> 
</div> 
 
</body> 
</html>