Ejemplo de menú horizontal y vertical

271 views
Skip to first unread message

Analyzer

unread,
Feb 7, 2014, 11:20:24 AM2/7/14
to PHP Latinoamérica
Bueno, encontré un ejemplo bonito de menú horizontal que comparto con el grupo:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de un menú horizontal simple con CSS </title>
<style type="text/css">
#button {
padding: 0;
}
#button li {
display: inline;
}
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}
#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}
</style>
</head>
<body>
<h1>Ejemplo de un menú horizontal simple con CSS </h1>
<div >
  <ul id="button">

    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de...</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Clientes</a></li>
    <li><a href="#">Productos</a></li>
    <li><a href="#">F.A.Q</a></li>

    <li><a href="#">Ayuda</a></li>
    <li><a href="#">Contáctenos</a></li>
  </ul>
</div>
<br /><br />
<p> Ir a  | <a href="http://www.google.com" title="Fuente">Google</a></p>
</body>
</html>


Ejemplo de menú vertical



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de un menú vertical simple con CSS </title>
<style type="text/css">
#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 200px;
    font-family: Arial, sans-serif;
    font-size: 11pt;
}

#menu ul li {
    background-color: #666;
}

#menu ul li a {
    color: #ccc;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding: 10px 10px 10px 20px;
}

#menu ul li a:hover {
    background: #000;
    border-left: 10px solid #333;
    color: #fff;
}

border-left: 10px solid #666;

</style>
</head>
<body>
<h1>Ejemplo de un menú vertical simple con CSS </h1>
<div id="menu">
 <ul>
  <li><a href="..." title="...">Home</a></li>
  <li><a href="..." title="...">Archivos</a></li>
  <li><a href="..." title="...">Enlaces</a></li>
  <li><a href="..." title="...">Acerca de</a></li>
 </ul>
</div>

<br /><br />
<p> Ir a  | <a href="http://www.google.com" title="Fuente">Google</a></p>
</body>
</html>


Saludos!
Reply all
Reply to author
Forward
0 new messages