Foros del Web » Creando para Internet » HTML »

Sigo con mi problemita de Menu

Estas en el tema de Sigo con mi problemita de Menu en el foro de HTML en Foros del Web. Hola amigos, apreciaria enormemente que me dieran una idea de como seguir... este es mi codigo Código HTML: <body leftmargin= "0" topmargin= "0" marginwidth= "0" ...
  #1 (permalink)  
Antiguo 03/03/2011, 14:09
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Pregunta Sigo con mi problemita de Menu

Hola amigos, apreciaria enormemente que me dieran una idea de como seguir...

este es mi codigo

Código HTML:
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" id="page1">
<div class="tail-top">
  	<div class="tail-top1">
        <div class="tail-bottom">
            <div class="main">
                <div id="header">
               	  <div class="menu">
                   	<ul>
                            <li class="current"><a href="index.html"><em><b>Home</b></em></a></li>
                            <li><a href="index-1.html"><em><b>About us</b></em></a></li>
                            <li><a href="index-2.html"><em><b>Services</b></em></a></li>
                                <ul>
                                <li><a href="index-2.html"><em><b>Dog Boarding</b></em></a></li>
                                <li><a href="index-2.html"><em><b>Cat Boarding</b></em></a></li>
                                </ul>
                            
                            
                            <li><a href="index-3.html"><em><b>Customers</b></em></a></li>
                            <li><a href="index-4.html"><em><b>Events</b></em></a></li>
                            <li><a href="index-5.html"><em><b>Gallery</b></em></a></li>
                            <li><a href="index-5.html"><em><b>Media Coverage</b></em></a></li>
                            <li><a href="index-5.html"><em><b>Contact Us</b></em></a></li>
                      </ul> 

Yo deseo que Dog boarding y cat boarding aparezca en forma vertical debajo de SERVICES...

Es la parte que no se como hacer... muchisimas gracias desde ya...
__________________
[email protected]
  #2 (permalink)  
Antiguo 05/03/2011, 12:44
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 7 años
Puntos: 2
Respuesta: Sigo con mi problemita de Menu

eso se hace con javascript. Yo lo haría con Jquery
primero crea un div con lo que quieres que aparezca cuando haces clic.. Luego en css le pones display :none a ese div...
Y luego escribes en el head:
Código Javascript:
Ver original
  1. <script>
  2. $("#tu_div").click(function(event) {  
  3.     event.preventDefault();
  4.     $("#tu_div").slideDown(750);
  5. });
  6. </script>
  #3 (permalink)  
Antiguo 05/03/2011, 13:01
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Sigo con mi problemita de Menu

Hola:

Échale un vistazo al código de los ejemplos que aparecen en las FAQ's del foro de CSS.

Saludos.

  #4 (permalink)  
Antiguo 07/03/2011, 13:33
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Gracias amigos por la ayuda... El codigo que me pasaste 3RS.. no se donde exactamente insertarlo... y acerca de los otros ejemplos en FAQ.. ya los habia visto, pero no logro que funcione correctamente cuandlo los copio en mi compu :(
__________________
[email protected]
  #5 (permalink)  
Antiguo 07/03/2011, 19:42
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 7 años
Puntos: 2
Respuesta: Sigo con mi problemita de Menu

Cita:
Iniciado por vec Ver Mensaje
Gracias amigos por la ayuda... El codigo que me pasaste 3RS.. no se donde exactamente insertarlo... y acerca de los otros ejemplos en FAQ.. ya los habia visto, pero no logro que funcione correctamente cuandlo los copio en mi compu :(
tienes que instertarlo entre las etiquetas head
  #6 (permalink)  
Antiguo 07/03/2011, 23:36
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Gracias.. pero aun no funciona... no pasa nada :(
__________________
[email protected]
  #7 (permalink)  
Antiguo 08/03/2011, 07:02
 
Fecha de Ingreso: marzo-2011
Mensajes: 3
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Sigo con mi problemita de Menu

Si lo que quieres es que quede todo en la misma vertical, sólo tienes que quitar las 2 etiquetas <ul> </ul> con las que tienes anidado dicha parte del menú.
  #8 (permalink)  
Antiguo 08/03/2011, 07:05
 
Fecha de Ingreso: marzo-2011
Mensajes: 3
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Sigo con mi problemita de Menu

Prueba a quitar los <ul> </ul> con que tienes anidada esa parte del codigo, así te quedará todo en la misma vertical.
  #9 (permalink)  
Antiguo 08/03/2011, 23:36
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Gracias pero no funciona :(
__________________
[email protected]
  #10 (permalink)  
Antiguo 09/03/2011, 10:12
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Nunca pense que seria tan complicado hacer los submenu verticales :(
__________________
[email protected]
  #11 (permalink)  
Antiguo 09/03/2011, 10:42
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Si laguien queire ver el codigo CSS.. lo postee debjao del tema CSS :)
__________________
[email protected]
  #12 (permalink)  
Antiguo 09/03/2011, 13:08
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Sigo con mi problemita de Menu

Hola:

Date una vuelta por aquí: www.librosweb.es

Saludos.

  #13 (permalink)  
Antiguo 09/03/2011, 13:09
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Sigo con mi problemita de Menu

Hola:

Deberías darte una vuelta por aquí: www.librosweb.es

Saludos.

  #14 (permalink)  
Antiguo 13/03/2011, 16:35
 
Fecha de Ingreso: marzo-2011
Mensajes: 3
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Sigo con mi problemita de Menu

A ver si me aclaro con lo que quieres. Tú tienes algo como esto:



Si le quitamos los <ul></ul> que te dije, quedará en la misma vertical:



Si no es esto a lo que te refieres, puedes poner un ejemplo que aclare un poco mas lo que quieres.

Un saludo.
  #15 (permalink)  
Antiguo 14/03/2011, 13:00
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Lo que quiero que el menmu princila (Menu, About us...) sea horizontal.. y que los submenues aparezcan debajo de la opcion principal en forma vertical. Entoncevs, Cat y Dog Boarding aparecerian debajo de services...
__________________
[email protected]
  #16 (permalink)  
Antiguo 14/03/2011, 13:06
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: Sigo con mi problemita de Menu

Nesecitas algo como esto?

http://www.davidrojas.net/demos/menu_desplegable.html
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #17 (permalink)  
Antiguo 14/03/2011, 14:16
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

yess!!.. pero ya lo tengo.. cuando hago un archivo separado funciona... cuando lo coloco en mi archivo test.html y style.css.. no trabaja.. por eso deje esos archivo en el link.. y no veo el error...
__________________
[email protected]
  #18 (permalink)  
Antiguo 14/03/2011, 14:45
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: Sigo con mi problemita de Menu

mira yo te recomendaria hacer todo de 0, osea vos agarras tenes en tu html definido un div para tu menu, borras todo lo de adentro y solo dejas definido el div meun sin nada adentro, todo lo que esta hasta ahora, lo podes comentar, o borrar, da igual.

Ahora dentro de ese div que dejaste copia y pega esto:

Código HTML:
Ver original
  1. <ul id="nav">
  2.     <li><a href="#">Menu 1</a>
  3.         <ul class="submenu">
  4.             <li><a href="#">Submenu 1</a></li>
  5.             <li><a href="#">Submenu 2</a></li>
  6.             <li><a href="#">Submenu 3</a></li>
  7.         </ul>
  8.     </li>
  9.     <li><a href="#">Menu 2</a>
  10.         <ul class="submenu">
  11.             <li><a href="#">Submenu 1</a></li>
  12.             <li><a href="#">Submenu 2</a></li>
  13.             <li><a href="#">Submenu 3</a></li>
  14.         </ul>
  15.     </li>
  16.     <li><a href="#">Menu 3</a>
  17.         <ul class="submenu">
  18.             <li><a href="#">Submenu 1</a></li>
  19.             <li><a href="#">Submenu 2</a></li>
  20.             <li><a href="#">Submenu 3</a></li>
  21.         </ul>
  22.     </li>
  23.     <li><a href="#">Menu 4</a>
  24.         <ul class="submenu">
  25.             <li><a href="#">Submenu 1</a></li>
  26.             <li><a href="#">Submenu 2</a></li>
  27.             <li><a href="#">Submenu 3</a></li>
  28.         </ul>
  29.     </li>
  30. </ul>


al css le agregaste esto.

Código CSS:
Ver original
  1. a{
  2. display: block;
  3. text-decoration: none;
  4. color: #004a80;
  5. padding: 5px;
  6. }
  7.  
  8. ul{
  9. width: 500px;
  10. height: 28px;
  11. }
  12.  
  13. ul,li{
  14. list-style: none;
  15. margin:0;
  16. padding:0;
  17. }
  18.  
  19. #nav{
  20. font-family: 'Century Gothic', sans-serif;
  21. }
  22.  
  23. #nav li{
  24. float:left;
  25. position: relative;
  26. width: 125px;
  27. font-size: 14px;
  28. font-variant: small-caps;
  29. border-top:1px solid #004a80;
  30. border-bottom:1px solid #004A80;
  31. }
  32.  
  33. .submenu{
  34. display: none;
  35. position: absolute;
  36. left: -1px;
  37. border:none;
  38. height: auto;
  39. background: none;
  40. }
  41.  
  42. #nav .submenu li{
  43. float: none;
  44. position: static;
  45. margin: 0;
  46. font-size: 11px;
  47. font-variant: normal;
  48. border: 1px solid #004a80;
  49. border-top: none;
  50. width: 124px;
  51. }
  52.  
  53. #nav .submenu li a{
  54. color: #FFFFFF;
  55. background: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0;
  56. width: 114px;
  57. height: 16px;
  58. }


y por ultimo importamos los dos JS para que funcione el menu:

Código Javascript:
Ver original
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  2. <script type="text/javascript" src="jquery.backgroundPosition.js"></script>


Luego, deberiamos crear un .js nuevo con el nombre. "jquery.backgroundPosition.js" que corresponde a la llamada de arriba, y dentro de el, ponemos este codigo:


Código Javascript:
Ver original
  1. $(function(){
  2.     $('#nav>li').hover(
  3.         function(){
  4.         $('.submenu',this).stop(true,true).slideDown('fast');
  5.         },
  6.         function(){
  7.         $('.submenu',this).slideUp('fast');
  8.         }
  9.     );
  10.  
  11.     $('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover(
  12.         function(){
  13.         $(this).stop().animate({backgroundPosition: "(0px -99px)"}, 250);
  14.         },
  15.         function(){
  16.         $(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250);
  17.         }
  18.     );         
  19. });

NOTA: En el ejemplo esta todo trabajo en la raiz del proyecto.

Probamos en navegador, y deberia andar perfecto, solo falta la foto de fondo que es esta:

http://www.davidrojas.net/demos/fondo_menu_desplegable.png

Que corresponde al estilo CSS. "background: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0;"

Yo la implente en mi web de esta misma forma, y funciono a la perfeccion, depues tenes que darle el estilo que vos gustes, con tus fuentes etc. pero creo que ya sabes.

Espero que te ayude,
Saludos,
Gabriel.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #19 (permalink)  
Antiguo 14/03/2011, 16:06
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Fantastico.. funciono.. muchas gracias :)

Solo que no se como implementar este codigo al codigo que me pasaste...

En mi antiguo css.. tenia algo como

Cita:
#header {font-size:1.1875em; color:#FFFFFF }
#header .logo{ margin:16px 0 0 379px }
#header .slogan{ margin:132px 0 0 45px }
#header .menu{
margin:154px 0 0 49px;
position:absolute;
width:954px;
left: -48px;
top: -6px;
height: 129px;
}
#header .icon{margin:93px 0 0 859px; position:absolute;}

#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline; padding:0; vertical-align:top}
#header ul li a{color:#d5b781; text-decoration:none; font-size:1em; font-style:italic; text-transform:none; float:left; padding:0; margin:0; }
#header ul li a b { display:block; font-weight:normal; padding:0 23px 0 23px; line-height:40px}
#header ul li a em{ display:block; font-weight:normal; font-style:normal }

#header ul li a:hover { text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul li a:hover b{ background:url(images/menu_left.gif) left top no-repeat; }
#header ul li a:hover em{ background:url(images/menu_right.gif) right top no-repeat;}

#header ul .current a{ text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul .current a b{ background:url(images/menu_left.gif) left top no-repeat; }
#header ul .current a em{ background:url(images/menu_right.gif) right top no-repeat; }
Donde menu_left, menu_right y menu_bg.. forman el fondo del boton. Este aparece cuando el mouse esta encima de la opcion.. de lo contrario el boton no tiene bondo en si mismo...
__________________
[email protected]
  #20 (permalink)  
Antiguo 14/03/2011, 17:24
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Te paso a contar... me gusta el menu horizontal que tengo en...

http://www.campcanineflorida.com/tes...orizontal.html

pero me gusta el submenu con los colores y todo lo que combine en..

http://www.campcanineflorida.com/testmenu/submenu.html

pero no logro ponerlos juntos... o se me compone uno oi se desompone el otro...

ayudaaa porfisss!!!
__________________
[email protected]
  #21 (permalink)  
Antiguo 14/03/2011, 18:18
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: Sigo con mi problemita de Menu

Como te dije, tendrias que rehacer toda esa parte de tu codigo de 0, porque de tanto toquetear te van a quedar errores, no me parece algo dificil de implementar.

Podrias pasar el html completo y tu css, asi revisamos en que punto esta generando problemas, y como implementar el menu horizontal nuevo correctamente.

Disculpa la demora en la respuesta.

Saludos,
Gabriel.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #22 (permalink)  
Antiguo 14/03/2011, 22:24
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Muchas gracias por la ayuda desde ya....

HTML code es...

Código:
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_300.font.js" type="text/javascript"></script>

</head>
<body id="page1">
 <div class="right_bgd"></div>
  <div class="tail-top">
  	<div class="tail-top1">
        <div class="tail-bottom">
            <div class="main">
                <div id="header">
                	<div class="menu">
                    	<ul>
                            <li><a href="#"><em><b>Home</b></em></a></li>
                            <li><a href="#"><em><b>About us</b></em></a></li>
                            <li><a href="#"><em><b>Services</b></em></a></li>
                                <ul>
					            <li><a href="#">Dog Boarding</a></li>
								<li><a href="#">Cat Boarding</a></li>
								<li><a href="#">tres</a></li>
								<li><a href="#">cuatro</a></li>
			   					</ul> 
                            <li><a href="#"><em><b>Customer</b></em></a></li>
                            <li><a href="#"><em><b>Events</b></em></a></li>
                            <li><a href="#"><em><b>Media Coverage</b></em></a></li>
                            <li><a href="#"><em><b>Contact us</b></em></a></li>
                         </ul>
                    </div>
           	    </div>
              </div>
         </div>
     </div>
  </div>
</body>
</html>

el codigo CSS... trate de combinarlos.. y el submenu no se despliega :(

Código:
/* CSS Document */
* { margin:0; padding:0;}
html, body { height:100%; }
body {font-size:100%; line-height:1em; min-width:960px; background:#1e0c00}
html, input, textarea	{	font-family: comics sans ms; 
		color:#e6d9c6;	}	

.alignMiddle{ vertical-align:middle}
.alignCenter{ text-align: center}
.container1{ width:100%}
object { vertical-align:top; outline:none}
.clear { clear:both;}
.fleft{ float:left}
.fright{ float:right}
div.container {	overflow:hidden; width: 100%;}
a img{ border:0}
img{ vertical-align:top;  }

a{color:#ffe491; text-decoration:underline; outline:none} 
a:hover{text-decoration:none}

.link{color:#ede6c4;}


#content ul{margin:0; padding:0; list-style:none;}
#content ul li{background:url(images/marker.gif) top left no-repeat; background-position:0 9px; margin:0; padding-left:12px; }
#content ul li a{color:#ede6c4; text-decoration: none; line-height:1.69em; font-weight:bold} 
#content ul li a:hover { text-decoration:underline; }

.link-1 { display:block; float:left; background:url(images/link_bg.gif) repeat-x left top; color:#fffef6; text-decoration:none; }
.link-1 em { display:block; background:url(images/link_left.gif) no-repeat left top; font-size:1.38em}
.link-1  b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:4px 16px 8px 15px; font-weight:normal; font-style:normal;}
.link-1:hover{ text-decoration:none; color:#000000}


/*header*/
#header {font-size:1.1875em; color:#FFFFFF }
#header .logo{ margin:16px 0 0 379px }
#header .slogan{ margin:132px 0 0 45px }
#header .menu{
	margin:154px 0 0 49px;
	position:absolute;
	width:954px;
	left: -48px;
	top: -6px;
	height: 129px;
}
#header .icon{margin:93px 0 0 859px; position:absolute;}

#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline; padding:0; vertical-align:top}
#header ul li a{color:#d5b781; text-decoration:none; font-size:1em; font-style:italic; text-transform:none;  float:left; padding:0; margin:0; } 
#header ul li a  b { display:block; font-weight:normal; padding:0 23px 0 23px; line-height:40px}
#header ul li a em{ display:block; font-weight:normal; font-style:normal }

#header ul li a:hover { text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul li a:hover b{ background:url(images/menu_left.gif) left top no-repeat;  }
#header ul li a:hover em{ background:url(images/menu_right.gif) right top no-repeat;}

#header ul .current a{ text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul .current a b{ background:url(images/menu_left.gif) left top no-repeat;  }
#header ul .current a em{ background:url(images/menu_right.gif) right top no-repeat; }


/*Submenu*/
.menu{
	border:none;
	border:0px;
	margin:50px;
	padding:0px;
	font: 100% "comic sans MS";
	font-size:18px;
	font-weight:bold;
	}
	
.menu ul{
	background:none bottom left no-repeat;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}

	.menu li a{
		background:none bottom right no-repeat;
		color:#000000;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: none bottom center no-repeat;
			color:#000000;
			text-decoration:none;
			}
	.menu li ul{
		background: #5dc4b8;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:150px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:none bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:150px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background: #c9f1ec center left no-repeat;
			border:0px;
			color:#010000;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}
__________________
[email protected]
  #23 (permalink)  
Antiguo 15/03/2011, 14:17
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: Sigo con mi problemita de Menu

Te dejo el codigo, esta sin estilo, se lo tendrias que aplicar vos:

Código HTML:
Ver original
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <meta http-equiv="Content-Style-Type" content="text/css" />
  3. <link href="style.css" rel="stylesheet" type="text/css" />
  4. <link href="layout.css" rel="stylesheet" type="text/css" />
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  6. <script src="js/cufon-yui.js" type="text/javascript"></script>
  7. <script src="js/cufon-replace.js" type="text/javascript"></script>
  8. <script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
  9. <script src="js/Myriad_Pro_300.font.js" type="text/javascript"></script>
  10.  
  11. </head>
  12. <body id="page1">
  13.  <div class="right_bgd"></div>
  14.   <div class="tail-top">
  15.     <div class="tail-top1">
  16.         <div class="tail-bottom">
  17.             <div class="main">
  18.                 <div id="header">
  19.                     <div class="menu">
  20.                     <div id="menu">
  21. <ul>
  22.   <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
  23. <!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
  24.  
  25.     <ul>
  26.         <li><a href="#">Opción 1.1</a></li>
  27.         <li><a href="#">Opción 1.2</a></li>
  28.     </ul>
  29. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  30.   </li>
  31.   <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
  32. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
  33.  
  34.     <ul>
  35.         <li><a href="#">Opción 2.1</a></li>
  36.         <li><a href="http://www.google.es">Opción 2.2</a></li>
  37.         <li><a href="#">Opción 2.3</a></li>
  38.         <li><a href="#">Opción 2.4</a></li>
  39.         <li><a href="#">Opción 2.5</a></li>
  40.  
  41.     </ul>
  42. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  43. </li>
  44.   <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
  45. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
  46.     <ul>
  47.         <li><a href="#">Opción 3.1</a></li>
  48.         <li><a href="#">Opción 3.2</a></li>
  49.         <li><a href="#">Opción 3.3</a></li>
  50.  
  51.     </ul>
  52. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  53. </li>
  54.   <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
  55. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
  56.     <ul>
  57.         <li><a href="#">Opción 4.1</a></li>
  58.         <li><a href="#">Opción 4.2</a></li>
  59.         <li><a href="#">Opción 4.3</a></li>
  60.  
  61.         <li><a href="#">Opción 4.4</a></li>
  62.     </ul>
  63. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  64. </li>
  65.   <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
  66. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
  67.     <ul>
  68.         <li><a href="#">Opción 5.1</a></li>
  69.         <li><a href="#">Opción 5.2</a></li>
  70.  
  71.         <li><a href="#">Opción 5.3</a></li>
  72.     </ul>
  73. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  74. </li>
  75. </ul>
  76. </div>
  77.  
  78.                 </div>
  79.               </div>
  80.          </div>
  81.      </div>
  82.   </div>
  83. </body>
  84. </html>



y el CSS

Código CSS:
Ver original
  1. * { margin:0; padding:0;}
  2. html, body { height:100&#37;; }
  3. body {font-size:100%; line-height:1em; min-width:960px; background:#1e0c00}
  4. html, input, textarea   {   font-family: comics sans ms;
  5.         color:#e6d9c6;  }  
  6.  
  7. .alignMiddle{ vertical-align:middle}
  8. .alignCenter{ text-align: center}
  9. .container1{ width:100%}
  10. object { vertical-align:top; outline:none}
  11. .clear { clear:both;}
  12. .fleft{ float:left}
  13. .fright{ float:right}
  14. div.container { overflow:hidden; width: 100%;}
  15. a img{ border:0}
  16. img{ vertical-align:top;  }
  17.  
  18. a{color:#ffe491; text-decoration:underline; outline:none}
  19. a:hover{text-decoration:none}
  20.  
  21. .link{color:#ede6c4;}
  22.  
  23.  
  24. #content ul{margin:0; padding:0; list-style:none;}
  25. #content ul li{background:url(images/marker.gif) top left no-repeat; background-position:0 9px; margin:0; padding-left:12px; }
  26. #content ul li a{color:#ede6c4; text-decoration: none; line-height:1.69em; font-weight:bold}
  27. #content ul li a:hover { text-decoration:underline; }
  28.  
  29. .link-1 { display:block; float:left; background:url(images/link_bg.gif) repeat-x left top; color:#fffef6; text-decoration:none; }
  30. .link-1 em { display:block; background:url(images/link_left.gif) no-repeat left top; font-size:1.38em}
  31. .link-1  b { display:block; background:url(images/link_right.gif) no-repeat right top; padding:4px 16px 8px 15px; font-weight:normal; font-style:normal;}
  32. .link-1:hover{ text-decoration:none; color:#000000}
  33.  
  34.  
  35. /*header*/
  36. #header {font-size:1.1875em; color:#FFFFFF }
  37. #header .logo{ margin:16px 0 0 379px }
  38. #header .slogan{ margin:132px 0 0 45px }
  39. #header .menu{
  40.     margin:154px 0 0 49px;
  41.     position:absolute;
  42.     width:954px;
  43.     left: -48px;
  44.     top: -6px;
  45.     height: 129px;
  46. }
  47. #header .icon{margin:93px 0 0 859px; position:absolute;}
  48.  
  49.  
  50. #header ul li a:hover { text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
  51. #header ul li a:hover b{ background:url(images/menu_left.gif) left top no-repeat;  }
  52. #header ul li a:hover em{ background:url(images/menu_right.gif) right top no-repeat;}
  53.  
  54. #header ul .current a{ text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
  55. #header ul .current a b{ background:url(images/menu_left.gif) left top no-repeat;  }
  56. #header ul .current a em{ background:url(images/menu_right.gif) right top no-repeat; }
  57.  
  58.  
  59. /* Submenu Gabriel*/
  60.  
  61. #menu {  text-align: center;
  62. font-size: 0.7em;
  63. width: 820px;
  64. margin: 20px auto;
  65. }
  66. #menu ul { list-style-type: none;}
  67. #menu ul li.nivel1 { float: left;
  68. width: 162px;
  69. margin-right: 2px;
  70. }
  71. #menu ul li a {display: block;
  72. text-decoration: none;
  73. color: #fff;
  74. background-color: #399;
  75. border: solid 1px #fff;
  76. padding: 8px;
  77. position: relative;
  78. }
  79. #menu ul li:hover {position: relative;
  80. }
  81. #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
  82. color: #000;
  83. position: relative;
  84. }
  85. #menu ul li a.nivel1 {display: block!important;display: none;
  86. position: relative;
  87. }
  88. #menu ul li ul {display: none;
  89. }
  90. #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
  91. position: absolute;left: 0px;
  92. }
  93. #menu ul li ul li a {width: 160px;
  94. padding: 6px 0px 8px 0px;
  95. border-top-color: #000;
  96. }
  97. #menu ul li ul li a:hover {border-top-color: #000;
  98. position: relative;
  99. }
  100.  
  101.  
  102. /*Submenu*/
  103.  
  104. /* .menu{
  105.     border:none;
  106.     border:0px;
  107.     margin:50px;
  108.     padding:0px;
  109.     font: 100% "comic sans MS";
  110.     font-size:18px;
  111.     font-weight:bold;
  112.     }
  113.    
  114. .menu ul{
  115.     background:none bottom left no-repeat;
  116.     height:35px;
  117.     list-style:none;
  118.     margin:0;
  119.     padding:0;
  120.     }
  121.     .menu li{
  122.         float:left;
  123.         padding:0px;
  124.         }
  125.  
  126.     .menu li a{
  127.         background:none bottom right no-repeat;
  128.         color:#000000;
  129.         display:block;
  130.         font-weight:normal;
  131.         line-height:35px;
  132.         margin:0px;
  133.         padding:0px 25px;
  134.         text-align:center;
  135.         text-decoration:none;
  136.         }
  137.         .menu li a:hover, .menu ul li:hover a{
  138.             background: none bottom center no-repeat;
  139.             color:#000000;
  140.             text-decoration:none;
  141.             }
  142.     .menu li ul{
  143.         background: #5dc4b8;
  144.         display:none;
  145.         height:auto;
  146.         padding:0px;
  147.         margin:0px;
  148.         border:0px;
  149.         position:absolute;
  150.         width:150px;
  151.         z-index:200;
  152.         /*top:1em;
  153.         /*left:0;*/
  154. /*      }
  155.        
  156.     .menu li:hover ul{
  157.         display:block;
  158.        
  159.         }
  160.     .menu li li {
  161.         background:none bottom left no-repeat;
  162.         display:block;
  163.         float:none;
  164.         margin:0px;
  165.         padding:0px;
  166.         width:150px;
  167.         }
  168.     .menu li:hover li a{
  169.         background:none;
  170.        
  171.         }
  172.     .menu li ul a{
  173.         display:block;
  174.         height:35px;
  175.         font-size:12px;
  176.         font-style:normal;
  177.         margin:0px;
  178.         padding:0px 10px 0px 15px;
  179.         text-align:left;
  180.         }
  181.         .menu li ul a:hover, .menu li ul li:hover a{
  182.             background: #c9f1ec center left no-repeat;
  183.             border:0px;
  184.             color:#010000;
  185.             text-decoration:none;
  186.             }
  187.     .menu p{
  188.         clear:left;
  189.         }
  190. */


Espero que esto te sirva,

Saludos,
Gabriel.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #24 (permalink)  
Antiguo 16/03/2011, 12:14
Avatar de vec
vec
 
Fecha de Ingreso: junio-2001
Mensajes: 291
Antigüedad: 16 años, 5 meses
Puntos: 8
Respuesta: Sigo con mi problemita de Menu

Muchisimas gracias por tu gran ayuda... eres un genio!!!!

Ayer estube en cama practicamente todo el dia, por eso no respondi al mensaje... pero funciono perfectamente.

Tengo dos consultitas mas... si no te molesta :)

1) Cuando el mouse esta encima de cualquier opcion... se mueve el bloque hacia la derecha como unos pixels, me gustaria que se quedara en el mismo lugar .

El link de como queda es...

http://www.campcanineflorida.com/test1.html



2) Como combino este code... con el tuyo.. porque me gustaria que me quedara algo asi el menu principal...

http://www.campcanineflorida.com/index1.html

el codigo es...
Código:
#header ul li a:hover { text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul li a:hover b{ background:url(images/menu_left.gif) left top no-repeat;  }
#header ul li a:hover em{ background:url(images/menu_right.gif) right top no-repeat;}

#header ul .current a{ text-decoration:none; background:url(images/menu_bg.gif) top left repeat-x;}
#header ul .current a b{ background:url(images/menu_left.gif) left top no-repeat;  }
#header ul .current a em{ background:url(images/menu_right.gif) right top no-repeat; }
__________________
[email protected]

Etiquetas: Ninguno
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 06:07.