[HTML-CSS] Criando Menu 28.07.14 1:41
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!
Deus lhes Abençoe!
É bem simples:
Crie um arquivo chamado (index.html) e cole este código dentro:
- Spoiler:
- <?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="">Início</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">C#</a></li>
<li><a href="">HTML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JS</a></li>
<li><a href="">PPF</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!
Deus lhes Abençoe!