Início
Loja
Olá, pessoal hoje vou ensinar vocês a criar um menu sem jquery, apenas usando CSS e HTML!
É bem simples:
Crie um arquivo chamado (index.html) e cole este código dentro:
Feito isso está pronto, edite conforme quiser e seja feliz! Simples e fácil!
Lembrando que as tags <li> e <ul> são usadas em todo tipo de menu, sendo com jquery ou sem!
Até,
Como irá ficar : [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
É bem simples:
Crie um arquivo chamado (index.html) e cole este código dentro:
- Código:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="pt" lang="pt">
<head>
<title>Menu - HTML - CSS</title>
<style type="text/css">
<!--
body {
padding:0px;
margin:0px;
}
#menu ul {
padding:0px;
margin:0px;
float: left;
width: 100%;
background-color:#EDEDED;
list-style:none;
font:80% Tahoma;
}
#menu ul li { display: inline; }
#menu ul li a {
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
padding: 2px 10px;
float:left;
}
#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #00BBFF;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Je4n</a></li>
<li><a href="#">WASD</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">iLucas</a></li>
<li><a href="#">Fr3d</a></li>
</ul>
</div>
</body>
</html>
Feito isso está pronto, edite conforme quiser e seja feliz! Simples e fácil!
Lembrando que as tags <li> e <ul> são usadas em todo tipo de menu, sendo com jquery ou sem!
Até,
- Créditos:
- Bet4.
Como irá ficar : [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
muito bom.
