ejemploDeMenusCon_CSS
Anuncio
Menús
CSS
Ejemplo base
<html>
<head>
</head>
<body id="body_hom">
<ul id="nav">
<li id="navH"><a href="#">Home </a></li>
<li id="navP"><a href="#">Prod </a></li>
<li id="navC"><a href="#">Cont </a></li>
<li id="navPr"><a href="#">Prec </a></li>
<li id="navCo"><a href="#">Coment
</a></li>
<li id="navO"><a href="#">Otro </a></li>
</ul>
</body>
</html>
Ejemplo menu 1
html{ font:small/1.4 "Lucida Grande", Tahoma, sans-serif; }
body {
font-size:92%; }
#nav { margin: 0; padding: 0;
background: #6F6146;
list-style-type: none;
width: 180px;
float: left;}
#nav li { margin: 0; padding: 0;
float: left;
width: 100%;
}
#nav a { display: block; /* incrementa el area de seleccion */
color: #FFF; text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF; }
#nav #nav_con a { /*es el ultimo del menu*/
border : none;
}
#nav a:hover { background: #4F4532; }
#body_hom #nav_hom a,
#body_map #nav_map a,#body_jou #nav_jou a,
#body_his #nav_his a,#body_ref #nav_ref a,
#body_con #nav_con a {
background: #BEB06F;
color: #1A1303; font-weight: bold; }
Menú horizontal
html {
font: small/1.4 "Lucida Grande", Tahoma, sans-serif;
body {
font-size: 92%;
}
}
#nav { margin: 0; padding: 0;
background: #6F6146; list-style-type: none; width: 767px; float: left; }
#nav li { margin: 0; padding: 0; float: left; }
#nav a { float: left; width: 127px; color: #FFF;
text-decoration: none;
#FFF; }
line-height: 2.5; text-align: center; border-right: 1px solid
#nav #navO a { border: none; }
#nav a:hover { background: #4F4532;
}
#body_hom #navH a, #body_map #navP a, /* los bodys son los id's supuestos de la
otras pags*/
#body_jou #navC a,#body_his #navPr a,
#body_ref #navCo a,
#body_con #navO a { background: #BEB06F; color: #1A1303; font-weight: bold; }
Menú horizontal con imágenes
html {
font: small/1.4 "Lucida Grande", Tahoma, sans-serif; }
body {
font-size: 92%; }
nav {
margin: 0; padding: 0; background: #fff; list-style-type: none; width: 767px; float: left; }
nav li { margin: 0; padding: 0; float: left; }
nav a { float: left; width: 100px; color: #FFF;
text-decoration: none; line-height: 2.5;
text-align: center; border-right: 1px solid #FFF; background: url(imagenes/pestanias.png) norepeat; }
nav #navO a { border: none; }
nav a:hover { background-color: #fff; background-position: -100px 0; }
body_hom #navH a,#body_map #navP a,
body_jou #navC a,#body_his #navPr a,
body_ref #navCo a,#body_con #navO a {
background-color: #fff;
background-position: -200px 0; color: #fff; font-weight: bold; }
Menu desplegable 1- Código html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
<ul id="menu">
<li class="menuitem" id="mi01"><a href="/">Item 1</a>
<ul class="submenu">
<li><a href="/">Subitem 1.1</a></li>
<li><a href="/">Subitem 1.2</a>
<ul class="subsubmenu">
<li><a href="/">Subitem 1.2.1</a></li>
<li><a href="/">Subitem 1.2.2</a>
<ul class="subsubmenu">
<li><a href="/">Subitem 1.2.2.1</a></li>
<li><a href="/">Subitem 1.2.2.2</a>
<ul class="subsubmenu">
<li><a href="/">Subitem 1.2.2.2.1</a></li>
<li><a href="/">Subitem 1.2.2.2.2</a></li>
<li><a href="/">Subitem 1.2.2.2.3</a></li>
<li><a href="/">Subitem 1.2.2.2.4</a></li>
</ul></li>
Importante: No
omitir
-strict.dtd">
Menu desplegable 1- Código html
<li><a href="/">Subitem 1.2.2.3</a></li>
<li><a href="/">Subitem 1.2.2.4</a></li>
</ul></li>
<li><a href="/">Subitem 1.2.3</a></li>
<li><a href="/">Subitem 1.2.4</a></li>
</ul></li>
<li><a href="/">Subitem 1.3</a></li>
<li><a href="/">Subitem 1.4</a></li>
</ul></li>
<li class="menuitem" id="mi02"><a href="/">Item 2</a>
<ul class="submenu">
<li><a href="/">Subitem 2.1</a></li>
<li><a href="/">Subitem 2.2</a></li>
<li><a href="/">Subitem 2.3</a></li>
</ul></li>
<li class="menuitem" id="mi03"><a href="/">Item 3</a>
<ul class="submenu">
<li><a href="/">Subitem 3.1</a></li>
<li><a href="/">Subitem 3.2</a></li>
<li><a href="/">Subitem 3.3</a></li>
<li><a href="/">Subitem 3.4</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
Menu desplegable 1-código CSS
#menu {
position:relative;
list-style-type:none;
margin:1em 0 2em 0; padding:0;
width:100%; height:1.4em;
font:100%/1 sans-serif; }
.menuitem {
position:absolute; top:10px;
margin:0; padding:0;
width:10em; height:1.4em;
overflow:hidden; }
#mi01 { left:0 }
#mi02 { left:10em }
#mi03 { left:20em }
.menuitem ul {
display:block;
margin: 0; padding:0;
list-style-type:none; }
.menuitem li { margin:0; padding:0 }
.submenu li { position:relative }
.submenu .subsubmenu {
position:absolute; top:0; left:10em;
width:10em;
display:none; }
.menuitem:hover {
height:10em;
overflow:visible; }
.submenu li:hover > .subsubmenu {
display:block; }
#menu a {
display:block;
margin:0; padding: 0.2em 0.5em;
text-align:center;
text-decoration:none;
color:white;
border-top:1px solid white;
border-left:1px solid white;}
#menu a:hover { background:black }
.menuitem a { background:pink }
.menuitem ul a { background:navy }
.menuitem ul ul a { background:blue }
.menuitem ul ul ul a { background:violet }
.menuitem ul ul ul ul a { background:orange }
Menú desplegable 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
-transitional.dtd">
<html>
<head> <link rel="stylesheet" type="text/css" href="menu2.css" />
<body>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a>
<ul>
<li><a href="gallery1.html">Gallery 1</a></li>
<li><a href="gallery2.html">Gallery 2</a></li>
<li><a href="gallery3.html">Gallery 3</a></li>
<li><a href="gallery4.html">Gallery 4</a></li>
</ul>
</li>
<li><a href="products.html">Products</a>
<ul>
<li><a href="category1.html">Category 1</a>
</head>
Menú desplegable2 - html
<ul>
<li><a href="product1.html">Product 1</a></li>
<li><a href="product2.html">Product 2</a></li>
</ul> </li>
<li><a href="category2.html">Category 2</a>
<ul>
<li><a href="product3.html">Product 3</a></li>
</ul>
</li>
<li><a href="category3.html">Category 3</a>
<ul>
<li><a href="product4.html">Product 4</a></li>
<li><a href="product5.html">Product 5</a></li>
<li><a href="product6.html">Product 6</a></li>
<li><a href="product7.html">Product 7</a></li>
</ul> </li>
<li><a href="category4.html">Category 4</a>
<ul>
<li><a href="product8.html">Product 8</a></li>
<li><a href="product9.html">Product 9</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Menú desplegable 2 - CSS
ul a:hover {
color: #8B4513;
text-decoration: none;
background: #DEB887;}
*{
padding: 0;
margin: 0;
font-family: Arial, sans-serif;}
ul li {
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
float: left;
position: relative;}
body {
margin: 50px;
font-size: 10px;
}
body {
behavior: url(csshover.htc);}
ul {
list-style: none;
align:center;
}
ul a {
color:#8B4513;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
width: 60px;
background: #FFEBCD;}
ul li ul {
list-style: none;
position: absolute;
left: 0;
top: 100%;
display: none;
width: 60px;
border-top: 1px solid #FFF;}
ul li:hover ul { display: block; }
ul li:hover ul li ul { display: none; }
ul li ul li:hover ul {
display: block;
position: absolute;
left: 75px;
top: -1px;
border-left: 1px solid #FFF;}
