Foros del Web » Creando para Internet » HTML »

Menu Desplegable

Estas en el tema de Menu Desplegable en el foro de HTML en Foros del Web. Bueno primero decir que este es mi primer post, y que me acabo de iniciar en esto de las webs, por lo tanto perdonar mi ...
  #1 (permalink)  
Antiguo 22/07/2010, 01:49
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 8 meses
Puntos: 0
Menu Desplegable

Bueno primero decir que este es mi primer post, y que me acabo de iniciar en esto de las webs, por lo tanto perdonar mi ignorancia si pregunto alguna barbaridad q sea imposible o algo asi... xD

Pues bien el tema es que estoy haciendo una pagina web en Dreamweaver en html, y he visto en esta pagina http://www.dekazeta.net/blog/ este menu movil con imagenes y me pregunto si hay alguna forma de insertar ese menu en mi pag y si fuera posible como?.

Gracias de antemano.
  #2 (permalink)  
Antiguo 22/07/2010, 06:12
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Menu Desplegable

Bueno, de esos hay varios dando vueltas por la red. se lo suele llamar "Acordion slider", usa Jquery, aqui te dejo un link a uno de ellos
http://www.marghoobsuleman.com/jQuery-common-accordion

Saludos
  #3 (permalink)  
Antiguo 22/07/2010, 10:26
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Menu Desplegable

Cita:
Iniciado por emprear Ver Mensaje
Bueno, de esos hay varios dando vueltas por la red. se lo suele llamar "Acordion slider", usa Jquery, aqui te dejo un link a uno de ellos
[url]http://www.marghoobsuleman.com/jQuery-common-accordion[/url]

Saludos
Muchas gracias, perdona que siga preguntandote pero soy muy novato, yo solo se manejar y poco el dreamweaver usando html y Css, al decirme lo de jquery e buscado y parace ser que hay una extension pero no consigo instalarla, a lo que iba necesito esta extension para trabajar en dreamweaver o hay alguna otra forma de implantar esto en html o css...

Gracias y otra vez y perdona mi torpeza
  #4 (permalink)  
Antiguo 22/07/2010, 10:37
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Menu Desplegable

Jquery es una librería de Javascript que tiene usos muy amplios, entre ellos los efectos como el menu que quieres implementar.
No tiene ninguna relación directa con DreamWeaver. Si te bajas cualquiera de las aplicaciones prehechas, la mayoría ya incluyen la script de JQuery necesaria, después tendrás que ver como adaptarla y configurarla para que funcione en la página. Sigue las instrtucciones y la documentación que incluyan.

Por ejemplo, la que te di, (y es tan solo uno entre tantos)
http://www.marghoobsuleman.com/jQuery-common-accordion. fijate que hay un zip para descargar los archivos necesarios, creo que incluso incluye las demos, tambien en la misma página hay un paso a paso de como armar el menu.

Saludos
  #5 (permalink)  
Antiguo 22/07/2010, 11:06
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Menu Desplegable

Cita:
Iniciado por emprear Ver Mensaje
Jquery es una librería de Javascript que tiene usos muy amplios, entre ellos los efectos como el menu que quieres implementar.
No tiene ninguna relación directa con DreamWeaver. Si te bajas cualquiera de las aplicaciones prehechas, la mayoría ya incluyen la script de JQuery necesaria, después tendrás que ver como adaptarla y configurarla para que funcione en la página. Sigue las instrtucciones y la documentación que incluyan.

Por ejemplo, la que te di, (y es tan solo uno entre tantos)
[url]http://www.marghoobsuleman.com/jQuery-common-accordion[/url]. fijate que hay un zip para descargar los archivos necesarios, creo que incluso incluye las demos, tambien en la misma página hay un paso a paso de como armar el menu.

Saludos
Te vuelvo a dar las gracias, me he bajado el zip y por lo que veo creo q podre esamblarlo y todo.. Si no pues ya te pedire ayuda jeje xD
  #6 (permalink)  
Antiguo 22/07/2010, 12:06
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Menu Desplegable

Como era de esperar ya me a surgido un problema, no consigo centrarlo me sale a la izquierda, he intentado editar el css y nada y escribiendo en <head> BODY {text-align: center}
tampoco asi q no se porque es...
  #7 (permalink)  
Antiguo 22/07/2010, 12:18
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Menu Desplegable

Centrarlo donde y a la izquierda de donde, es dificil evaluarlo sin ver el conjunto. Yo bajé y probe la demo, por lo que veo el menu entero se carga en un <div> que hace de contenedor, normalmente, para centrar un div basta con darle una posicion relativa y margin: 0 auto; pero, todo está sujeto al conjunto de tu html.

Pasa tu html completo

Saludos
  #8 (permalink)  
Antiguo 22/07/2010, 12:29
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Menu Desplegable

fijate en el archivo de ejemplo accordion-horizontal.html y hazle estas modificaciones


el menu superior (onclick)

encierralo en un div con la id="centrar"

<div id="centrar">

menu

</div>

luego agrega al CSS

div#centrar{
margin: 0 auto;
width: 700px;
height: auto;
border: solid 1px #000;
}

le puse un borde para que resalte el ejemplo, y los 700px se tendrian que ajustar al ancho de tu menu.

Saludos
  #9 (permalink)  
Antiguo 22/07/2010, 13:17
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Menu Desplegable

Ok Gracias tio, he conseguido centrarlo con lo que tu me has dixo ha ido al sitio el problema es que en el navegador se ve asi... :

http://img205.imageshack.us/f/acordeone.jpg/

Aqui te dejo como lo tengo hecho
Cita:
<div id="centrar">
<div class="set">
<div class="title"><img src="images/DEVIL_EYES_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="http://www.giftlelo.com/29-embroidered-devil-eyes-4819.html"><img src="images/devilEyes.jpg" alt="Embroidered Devil Eyes" width="486" height="198" border="0" /></a></div>
</div>
<div class="set">
<div class="title"><img src="images/SPRING_EMBROIDERY_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="http://www.giftlelo.com/28-spring-embroidery-4797.html"><img src="images/spring-emroidery.jpg" alt="Spring Embroidery" width="486" height="198" border="0" /></a></div>
</div>
<div class="set">
<div class="title"><img src="images/CHARMING_FAIRY_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="http://www.giftlelo.com/26-charming-fairy-4737.html"><img src="images/charmingFairy.jpg" alt="" width="486" height="198" border="0" /></a> </div>
</div>
<div class="set">
<div class="title"><img src="images/GEOMETRICAL_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="http://www.giftlelo.com/25-geometrical-embroidery.html"><img src="images/geomatical_embrodery.jpg" alt="Geometrical Embroidery" width="486" height="198" border="0" /></a><br />
</div>
</div>
<div class="set">
<div class="title"><img src="images/ELEPHANT_LUCK_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="http://www.giftlelo.com/20-elephant-with-luck.html"><img src="images/elephant-luck.jpg" alt="Elephant with Luck" width="486" height="198" border="0" /></a></div>
</div>
<div class="set">
<div class="title"><img src="images/LADY_RED_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="http://www.giftlelo.com/19-lady-in-red.html"><img src="images/lady-in-red.jpg" alt="Lady in Red" width="486" height="198" border="0" /></a></div>
</div>
<div class="set">
<div class="title"><img src="images/FIREWORKS_ART_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="http://www.giftlelo.com/17-fireworks-embroidery-art.html"><a href="http://www.giftlelo.com/17-fireworks-embroidery-art.html"><a href="http://www.giftlelo.com/17-fireworks-embroidery-art.html"></a><a href="http://www.giftlelo.com/17-fireworks-embroidery-art.html"><img src="images/fireworks-embroidery.jpg" alt="Fireworks Embroidery Art" width="486" height="198" border="0" /></a></div>
</div>
</div>
y en el css
Cita:
<style type="text/css">
div#centrar{
margin: 0 auto;
width: 700px;
height: auto;
border: solid 1px #000;
}
.set{border-bottom:1px solid #000}
.set1{background-color:#C77B3F;}
.set2{background-color:#FFC732;}
.set3{background-color:#007C90;}
.set4{background-color:#AD6F08;}
.set5{background-color:#387855;}
.set6{background-color:#8C4B2D;}
.set7{background-color:#82A668;}
</style>
  #10 (permalink)  
Antiguo 22/07/2010, 13:42
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Menu Desplegable

Es que lo has hecho mal, te pongo solo el principio



<div id="centrar"> <---- este es mi agregado (y debajo de todo el menu cierra con otro </div>

<div id="accordionGiftLelo"> <-- esta es el >div> que inicia el menu

y en lo que tu pusiste comienzas con...

<div class="set"> <-- que es el div que contiene la primera imagen, te has saltado el
<div id="accordionGiftLelo">

Comprendes?

Saludos
  #11 (permalink)  
Antiguo 22/07/2010, 14:21
 
Fecha de Ingreso: julio-2010
Mensajes: 41
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Menu Desplegable

Cita:
Iniciado por emprear Ver Mensaje
Es que lo has hecho mal, te pongo solo el principio



<div id="centrar"> <---- este es mi agregado (y debajo de todo el menu cierra con otro </div>

<div id="accordionGiftLelo"> <-- esta es el >div> que inicia el menu

y en lo que tu pusiste comienzas con...

<div class="set"> <-- que es el div que contiene la primera imagen, te has saltado el
<div id="accordionGiftLelo">

Comprendes?

Saludos
Parace que lo entendi me ha costado pero lo entendi jeje, muchas gracias, espero no haber sido muy pesado, pero es q estoy verdisimo xD

Etiquetas: desplegable
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 05:56.