Barra de Menu Deslizadora

[cesarnorte9]

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

[uikekarallo]

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

Un saludo.

[ideasenlinea]

Esta bonita la interfaze esta en Css? saludos.

[cesarnorte9]

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

[uikekarallo]

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.

[GatoGordo]

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!

[cesarnorte9]

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...

[GatoGordo]

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!

[uikekarallo]

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.

[cesarnorte9]

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...

[cesarnorte9]

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

[uikekarallo]

Veo que no estás utilizando tablas, sino elementos de lista, que es lo correcto.

[GatoGordo]

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!

[Carlangueitor]

Desde la página de jQuery: http://code.jquery.com/jquery-1.5.2.min.js

[cesarnorte9]

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/