Foros del Web » Creando para Internet » HTML »

como se crean menus

 Estas en el tema de como se crean menus en el foro de HTML en Foros del Web. ola, me gustaría acer un menu desplegable, o sea qpinchando en un boton o algo similar se me desplieguen x debajo dos opciones y que ...
  #1 (permalink)  
Antiguo 25/03/2008, 03:22
 
Fecha de Ingreso: marzo-2008
Mensajes: 27
Antigüedad: 16 años, 1 mes
Puntos: 0
como se crean menus
ola, me gustaría acer un menu desplegable, o sea qpinchando en un boton o algo similar se me desplieguen x debajo dos opciones y que cada una de ella tenga un <a href > para ir a un apágina
  #2 (permalink)  
Antiguo 25/03/2008, 04:34
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 1 mes
Puntos: 36
Re: como se crean menus
Este tutorial está en inglés y te enseña a hacer menús desplegables pasando el ratón por encima:
http://qrayg.com/learn/code/cssmenus
  #3 (permalink)  
Antiguo 25/03/2008, 05:01
 
Fecha de Ingreso: marzo-2008
Mensajes: 27
Antigüedad: 16 años, 1 mes
Puntos: 0
Re: como se crean menus
gracias
lo estuve mirando
pero la verdad es qno lo entendi
  #4 (permalink)  
Antiguo 25/03/2008, 11:56
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 1 mes
Puntos: 36
Re: como se crean menus
Mete esto entre <head> y </head>:
Código HTML:
<style>
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 500px; /*For KHTML*/
  list-style: none;
  height: 24px;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}

</style>
<script>
navHover = function() {
	var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
	for (var i=0; i<lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
</script>
Y este es el código del menú:
Código HTML:
<ul id="navmenu-h">
    <li><a href="#">Blog</a></li>
    <li><a href="#">Work +</a>
      <ul>
        <li><a href="#">Websites +</a>
          <ul>
            <li><a href="#">qrayg</a></li>

            <li><a href="#">qArcade</a></li>
            <li><a href="#">qLoM</a></li>
            <li><a href="#">qDT</a></li>
          </ul>
        </li>
        <li><a href="#">Pen and Ink</a></li>
        <li><a href="#">Free Interfaces</a></li>

      </ul>
    </li>
    <li><a href="#">Learn +</a>
      <ul>
        <li><a href="#">Fireworks +</a>
          <ul>
            <li><a href="#">aquaButton</a></li>

            <li><a href="#">aquaButton2</a></li>
            <li><a href="#">waterDrop</a></li>
            <li><a href="#">lightFX</a></li>
            <li><a href="#">lightFX2</a></li>
          </ul>
        </li>
        <li><a href="#">CSS +</a>

          <ul>
            <li><a href="#">footerStick</a></li>
            <li><a href="#">spriteNav</a></li>
            <li><a href="#">@import</a></li>
          </ul>
        </li>
      </ul>

    </li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
Última edición por Raulmmmm; 11/07/2008 a las 01:48
  #5 (permalink)  
Antiguo 26/03/2008, 17:06
Avatar de John_Flyheight  
Fecha de Ingreso: marzo-2008
Ubicación: Managua, Nicaragua
Mensajes: 14
Antigüedad: 16 años
Puntos: 0
Re: Menu con tablas, stilos y javascript
No estoy seguro si es lo que estas buscando pero ahí te va un ejemplo, modifica lo que desees en el aspecto:

<!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>selector de idiomas</title>
<style type="text/css">
table.language_selector
{
font-family: Verdana, Arial, Helvetica, sans-serif;
/*background-color:#5596B9;*/
}

table.language_selector tr
{
background:#5596B9;
border-right:solid 2px;
border-right-color:#CCCCCC;
}

table.language_selector tr:hover {background:#006498;}

table.language_selector tr.language:hover {background:#006498;}

table.language_selector tr.language {background: #006498;}

table.language_selector tr.actual {background: #B1B6B8;}

table.language_selector tr td
{
border-bottom:solid 1px;
border-bottom-color:#CCCCCC;
border-top:solid 1px;
border-top-color:#FFFFFF;

}

table.language_selector a:link, table.language_selector a, table.language_selector a:visited {
padding-left:2px;
padding-right:2px;
padding-bottom:0px;
padding-top:0px;
padding-bottom:0px;
margin-top:1px;
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:left;
}

table.language_selector a:hover {
padding-left:2px;
padding-right:2px;
padding-bottom:0px;
padding-top:0px;
padding-bottom:0px;
margin-top:1px;
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:left;
}
table.language_selector a img
{ border:0;}
</style>
<script src="../js/languages.js" type="text/javascript">
function languageSelector(swich){

if(swich=='on' ) {
document.getElementById('language_selector').style .visibility='visible';

}
if(swich=='off' ) {
document.getElementById('language_selector').style .visibility='hidden';

}
return false;
}
</script>
</head>

<body>


<div style="position: absolute; top: 38px; left: 240px; width: 111px; height: 30px;" onclick="languageSelector('on')">

<table cellpadding="0" cellspacing="0" border="0" onclick="languageSelector('on')">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="110" class="language_selector" >
<tr class="language">
<td align="center" valign="middle"><a>Idioma</a> </td>
<td align="center" valign="middle"><img src="../imagenes/language-selector-menu/down.png" height="12" width="12" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="0px" ><div id="language_selector" style="position: relative; top: 0px; left: 0px; z-index: 1000; visibility: hidden; height:0" onmouseout="languageSelector('off')" onmouseover="languageSelector('on')">
<table border="0" cellpadding="0" cellspacing="0" width="110" class="language_selector">
<tr id="row_lg_de">
<td><a href="#">Alem&aacute;n</a> </td>
</tr>
<tr id="row_lg_bg">
<td align="center" valign="middle"><a href="#">B&uacute;lgaro</a> </td>
</tr>
<tr id="row_lg_cz">
<td align="center" valign="middle"><a href="#">Checo</a> </td>
</tr>
<tr id="row_lg_dk">
<td align="center" valign="middle"><a href="#">Dan&eacute;s</a> </td>
</tr>
<tr id="row_lg_sk">
<td align="center" valign="middle"><a href="#">Eslovaco</a> </td>
</tr>
<tr id="row_lg_es" class="actual">
<td align="center" valign="middle"><a href="#">Espa&ntilde;ol</a> </td>
</tr>
<tr id="row_lg_fi">
<td align="center" valign="middle"><a href="#">Fin&eacute;s</a> </td>
</tr>
<tr id="row_lg_fr">
<td align="center" valign="middle"><a href="#">Franc&eacute;s</a> </td>
</tr>
<tr id="row_lg_gr">
<td align="center" valign="middle"><a href="#">Griego</a> </td>
</tr>
<tr id="row_lg_en">
<td align="center" valign="middle"><a href="#">Ingl&eacute;s</a> </td>
</tr>
<tr id="row_lg_it">
<td align="center" valign="middle"><a href="#">Italiano</a> </td>
</tr>
<tr id="row_lg_nl">
<td align="center" valign="middle"><a href="#">Neerland&eacute;s</a> </td>
</tr>
<tr id="row_lg_pl">
<td align="center" valign="middle"><a href="#">Polaco</a> </td>
</tr>
<tr id="row_lg_pt">
<td align="center" valign="middle"><a href="#">Portugu&eacute;s</a> </td>
</tr>
<tr id="row_lg_ro">
<td align="center" valign="middle"><a href="#">Rumano</a> </td>
</tr>
<tr id="row_lg_ru">
<td align="center" valign="middle"><a href="#">Ruso</a> </td>
</tr>
<tr id="row_lg_se">
<td align="center" valign="middle"><a href="#">Sueco</a> </td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>


</body>
</html>
  #6 (permalink)  
Antiguo 31/03/2008, 12:04
 
Fecha de Ingreso: marzo-2008
Mensajes: 27
Antigüedad: 16 años, 1 mes
Puntos: 0
Re: como se crean menus
muxas gracias
aora pruebo todo eso
ya diré si me funciona jeje

perdon por la tardanza pero tenia esto estropea
  #7 (permalink)  
Antiguo 31/03/2008, 13:13
 
Fecha de Ingreso: marzo-2008
Mensajes: 27
Antigüedad: 16 años, 1 mes
Puntos: 0
Re: como se crean menus
raulmmm muxas gracias
cambie las cosas
colores
y todo
y va estupendo
es justo lo que necesitaba
muchisimas gracias :D
  #8 (permalink)  
Antiguo 10/07/2008, 19:23
 
Fecha de Ingreso: abril-2008
Mensajes: 13
Antigüedad: 16 años
Puntos: 0
Respuesta: como se crean menus
raulmmmm:
el menu que pusiste funciona perfecto, pero creo que no funciona en firefox buuuuu, porque sera?
grax
  #9 (permalink)  
Antiguo 11/07/2008, 01:50
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años, 1 mes
Puntos: 36
Respuesta: como se crean menus
Sí que funciona en Firefox si has puesto todo el código. Compruébalo.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:38.