Foros del Web » Creando para Internet » Diseño web »

Barra de Menu Deslizadora

Estas en el tema de Barra de Menu Deslizadora en el foro de Diseño web en Foros del Web. Buenos días estoy realizando una página web y quiero realizar una barra de menú que cuando pongas el raton encima nos salga una serie de ...
  #1 (permalink)  
Antiguo 04/04/2011, 02:11
 
Fecha de Ingreso: diciembre-2010
Ubicación: Alicante
Mensajes: 74
Antigüedad: 7 años
Puntos: 3
Información Barra de Menu Deslizadora

Buenos días estoy realizando una página web y quiero realizar una barra de menú que cuando pongas el raton encima nos salga una serie de opciones.

El problema viene en que quiero que las distintas opciones salgan deslizandose poco a poco bajo el menu que tenemos el raton. Similar a está página.
http://www.dolby.com/index.html

Alguien me puede ayudar he buscado libreria en internet pero no encuentra ninguna que realice ese efecto...
Ah... no quiero hacerlo con flash...Estoy intentando que sea una combinación de CSS y JS.... Pero no FLASH
  #2 (permalink)  
Antiguo 04/04/2011, 09:17
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: Barra de Menu Deslizadora

Hola, puedes lograr ese efecto fácilmente con CSS y jQuery, utilizando las funciónes hover() y slideDown().

Un saludo.
  #3 (permalink)  
Antiguo 04/04/2011, 09:32
 
Fecha de Ingreso: abril-2011
Mensajes: 4
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: Barra de Menu Deslizadora

Esta bonita la interfaze esta en Css? saludos.
  #4 (permalink)  
Antiguo 04/04/2011, 10:11
 
Fecha de Ingreso: diciembre-2010
Ubicación: Alicante
Mensajes: 74
Antigüedad: 7 años
Puntos: 3
Respuesta: Barra de Menu Deslizadora

La verdad no soy muy dado a Javascript...Si pudieras explicarte un pelin más me ayudarias... Creo entender la función SlideDown pero el Hover no lo enteindo. Ademas donde especifico lo que quiero que aprezca, me refiero a la capa o bloque
  #5 (permalink)  
Antiguo 04/04/2011, 12:27
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: Barra de Menu Deslizadora

La función hover es muy simple, sólo hay que decirle qué hacer al poner el ratón encima y qué hacer al quitarlo, de esta manera:

Código HTML:
$('#navbar a').hover(function()
{
  // cuando el ratón esté sobre el enlace
},function()
{
  // cuando el ratón salga de encima
});

Puedes ver un tutorial muy sencillo aquí y 38 scripts ya hechos aquí.

Creo que con el primer link es más que suficiente, ya que lo explica de manera muy sencilla y para todo el mundo. En el segundo link podrás ver más ejemplos para darte ideas.


Si necesitas más ayuda aquí estamos. Un saludo.
  #6 (permalink)  
Antiguo 04/04/2011, 14:35
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: Barra de Menu Deslizadora

Dudo mucho que el efecto del menú quede tan bonito como en la web del ejemplo, aunque si puede quedar funcional y, lo más importante, optimizado para que lo pueda leer el buscador. ¿Por qué no quieres hacerlo en flash?

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #7 (permalink)  
Antiguo 05/04/2011, 11:29
 
Fecha de Ingreso: diciembre-2010
Ubicación: Alicante
Mensajes: 74
Antigüedad: 7 años
Puntos: 3
Respuesta: Barra de Menu Deslizadora

Soy un estudiante de FP2 estoy en periodo de practicas y mi instructor(el encargado de una empresa), quiere que le haga ese efecto en javascript. Me parece un poco inutil pero bueno.

Lo mejor es que la empresa hace las páginas con tablas y que pasa una vez he logrado el efecto que la página se redimensiona totalmente xD.

De ahí que Dolby haya trabajado con capas...Como hago yo normalmente...

He conseguido un ejemplo sencillo y curioso si lo quereis aqui lo teneis..

http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
Con rebote incluido...

Lo mejor de todo es que se lo he enseñado al instructor y dice que si redimensiona la tabla que busque otro ejemplo...."El otro tambien se va a redimensionar".

He probado lo de una capa con posicionamiento absoluto...Pero claro según el navegador se ve en un sitio u otro....


Conclusion estoy puteado xk mi jefe es cabezon...
  #8 (permalink)  
Antiguo 05/04/2011, 14:21
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: Barra de Menu Deslizadora

jajaja me encantó la conclusión! No has intentado poner el menú tal cual está en el ejemplo en una celda y de esa manera nada más dar la ilusión de que son tablas. Va a estar difícil encontrar ese efecto y además con tablas.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #9 (permalink)  
Antiguo 05/04/2011, 17:10
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: Barra de Menu Deslizadora

Personalmente, creo que a día de hoy crear webs con tablas es ir hacia atrás. Con las nuevas tecnologías web el uso de una tabla debe ser para lo que su propio nombre indica.

Es una pena que pudiendo hacer las cosas mejor, no se hagan. Me recuerda al típico comentario de "Pues yo sigo utilizando IE 6 porque a mi me va bien". Seguro que si utilizara el 8 le iría un poco mejor.

Lo preocupante es que las prácticas que estás llevando a cabo no te aportarán la experiencia que deberían, ya que llevan unos años de retraso.

Sea como fuere, prueba limitando el ancho del body y dándole posición relativa, para luego poder poner la tabla con el menú en posición absoluta. La siguiente tabla debe tener un margen superior del tamaño de la primera.


A ver qué sale... Un saludo.
  #10 (permalink)  
Antiguo 06/04/2011, 03:04
 
Fecha de Ingreso: diciembre-2010
Ubicación: Alicante
Mensajes: 74
Antigüedad: 7 años
Puntos: 3
Respuesta: Barra de Menu Deslizadora

Exacto....Pero tambien quiere que el efecto se superponga a otro script.

Osea que la utilizacion de capas es muy recomendada...
Estoy de acuerdo totalmente contigo...Pero como cuando terminare me daran la patada. El jefe quiere tener algo que cuando yo me valla entienda...

No soy diseñador... Soy programador Web....
Pero aun así se que para realizar un diseño las capas es lo mejor. Las tablas es por si no tienes experiencias... Pero una empresa que realiza páginas web.... Tiene que tener un buen diseñador... y por lo que se ve.... aqui no hay...
  #11 (permalink)  
Antiguo 06/04/2011, 03:17
 
Fecha de Ingreso: diciembre-2010
Ubicación: Alicante
Mensajes: 74
Antigüedad: 7 años
Puntos: 3
Respuesta: Barra de Menu Deslizadora

Bueno señores no me pregunteis como pero he encontrado un ejemplo que me parece impresionante realiza el efecto de manera eficaz y lo he podido insertar en la web con tablas incluidas...Miren
Html:
Código HTML:
<html>
<head>
<link href="jqueryslidemenu.css" rel='stylesheet' type='text/css'/>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src="jquery.min.js" type="text/javascript" >
</script>
<script type="text/javascript" src="jqueryslidemenu.js">
</script>
 </head>
 
 <body>
 <div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="hola.jp">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a>
<ul>
<li><a href="#">Sub 3.2.1</a></li>
<li><a href="#">Sub 3.2.2</a></li>
<li><a href="#">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Pestaña 4</a></li>
<li><a href="#">Pestaña 5</a>
<ul>
<li><a href="#">Sub 5.1</a></li>
<li><a href="#">Sub 5.2</a></li>
<li><a href="#">Sub 5.3</a></li>
<li><a href="#">Sub 5.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 6</a></li>
</ul>


<br style="clear: left"/>
</div>
</body>
</html> 
CSS:
Código:
.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*color de las pestañas*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*color de las pestañas al pasar el mouse*/
color: white;
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*Color del sub menu al pasar el mouse*/
background: #eff9ff;
color: black;
}

/* ######### Flechas  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
JavaScript
Código:
/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'http://ciudadblogger.hostzi.com/Icons/menu-arrow-down.gif', 23], right:['rightarrowclass', 'http://ciudadblogger.hostzi.com/Icons/menu-arrow-right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
				+ '" style="border:0;" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(jqueryslidemenu.animateduration.out)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)


Y la libreria jquery.min.js


Si alguien lo quiere
  #12 (permalink)  
Antiguo 06/04/2011, 05:55
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: Barra de Menu Deslizadora

Veo que no estás utilizando tablas, sino elementos de lista, que es lo correcto.
  #13 (permalink)  
Antiguo 06/04/2011, 15:17
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: Barra de Menu Deslizadora

Hola, donde descargas la librería jquery.min.js? Me sale un error. Dice que no encuentra un elemento y por lo tanto no puede ver el llamativo efecto que dices.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #14 (permalink)  
Antiguo 06/04/2011, 15:24
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Barra de Menu Deslizadora

Desde la página de jQuery: http://code.jquery.com/jquery-1.5.2.min.js
__________________
Grupo Telegram Docker en Español
  #15 (permalink)  
Antiguo 07/04/2011, 04:33
 
Fecha de Ingreso: diciembre-2010
Ubicación: Alicante
Mensajes: 74
Antigüedad: 7 años
Puntos: 3
Respuesta: Barra de Menu Deslizadora

tienes razon... en lo de las listas pero eso despues me ha tocado meterlo en una tabla. Y ha funcionado como queria mi jefe.
No ajusta e tamaño de la tabla si no que ignora del tamaño de la tabla en la que está
y lo muestra XD. Lo que he conseguido lo podeis ver aqui.
http://www.luqentia.es/pruebascesar/Web%20Luqentia1/

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




La zona horaria es GMT -6. Ahora son las 09:30.