html y css: Menú acordeón desplegable con hover o con clic by oloblogger.com

fuente: oloblogger.com

Los menús del tipo “acordeón” son aquellos cuyos elementos se disponen -normalmente- en vertical y cuyas correspondientes opciones se despliegan y quedan visibles al seleccionar el elemento principal que los engloba …

Leer Artículo completo aquí: https://www.oloblogger.com/2016/11/menu-acordeon-css-desplegable-click-hover.html

Anuncios

#javascript #getElementById vs #select by librosweb.es

Fuente: http://librosweb.es/javascript/capitulo_7/utilidades_basicas_para_formularios.html

Las listas desplegables (<select>) son los elementos en los que es más difícil obtener su valor. Si se dispone de una lista desplegable como la siguiente:

<select id="opciones" name="opciones">
  <option value="1">Primer valor</option>
  <option value="2">Segundo valor</option>
  <option value="3">Tercer valor</option>
  <option value="4">Cuarto valor</option>
</select>

En general, lo que se requiere es obtener el valor del atributo value de la opción (<option>) seleccionada por el usuario. Obtener este valor no es sencillo, ya que se deben realizar una serie de pasos. Además, para obtener el valor seleccionado, deben utilizarse las siguientes propiedades:

  • options, es un array creado automáticamente por el navegador para cada lista desplegable y que contiene la referencia a todas las opciones de esa lista. De esta forma, la primera opción de una lista se puede obtener mediante document.getElementById("id_de_la_lista").options[0].
  • selectedIndex, cuando el usuario selecciona una opción, el navegador actualiza automáticamente el valor de esta propiedad, que guarda el índice de la opción seleccionada. El índice hace referencia al arrayoptions creado automáticamente por el navegador para cada lista.
// Obtener la referencia a la lista
var lista = document.getElementById("opciones");
 
// Obtener el índice de la opción que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el índice y el array "options", obtener la opción seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado];
 
// Obtener el valor y el texto de la opción seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
 
alert("Opción seleccionada: " + textoSeleccionado + "\n Valor de la opción: " + valorSeleccionado);

Como se ha visto, para obtener el valor del atributo value correspondiente a la opción seleccionada por el usuario, es necesario realizar varios pasos. No obstante, normalmente se abrevian todos los pasos necesarios en una única instrucción:

var lista = document.getElementById("opciones");
 
// Obtener el valor de la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].value;
 
// Obtener el texto que muestra la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].text;

Lo más importante es no confundir el valor de la propiedad selectedIndex con el valor correspondiente a la propiedad value de la opción seleccionada. En el ejemplo anterior, la primera opción tiene un value igual a 1. Sin embargo, si se selecciona esta opción, el valor de selectedIndex será 0, ya que es la primera opción del array options (y los arrays empiezan a contar los elementos en el número 0).

#prestashop 1.5 modificar posicionamiento vertical del #menu principal

buenas

inserte una imagen de fondo en la cabecera de la web y me surgio el siguiente problema, la imagen es mas alta que el espacio del header de la web

para insertar una imagen tenemos que modificar el global.css (themes/tutheme/css)

/* ************************************************************************************************

struture
************************************************************************************************ */
#page {}
#header {z-index:10;background-image:url(../img/lamala/header.jpg);height:280px;}
#columns {z-index:1}
#left_column {display:none;}
#center_column {width:100%;}
#right_column {display:none;}
#footer {}

pero como no nada en prestashop es facil … la barra del menu principal seguia en la misma posicion que antes

con el inspector de elementos de chrome (f12) seleccione el objeto menu y para mi desagradable sorpresa descubri que el css donde se hace referencia a este objeto esta en el raiz de prestashop y no como hasta ahora todo lo demas dentro del themes

el nombre del archivo css del menu es superfish-modified.css y se encuentra en modules\blocktopmenu\css

dentro de .sf-menu { añadimos margin-top:89px; y ya podemos desplazar asi el menu verticalmente

seguro que hay una manera mas facil e intuitiva de hacerlo … pero por desgracia no la he encontrado …

espero que a alguien mas que a mi le sirva de ayuda

un saludo

How to Create a CSS3 Mega Drop-Down Menu by @designmodo

How to Create a CSS3 Mega Drop-Down Menu

Topic: CSS3 Difficulty: Intermediate Estimated Completion Time: 1 hour Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. The design of this mega menu can be found on the The Bricks UI ….

Ir al tutorial | Demo

Cómo crear un menu desplegable para Web con css y javascript by comolohago.cl

Fuente: comolohago.cl

Para el desarrollo de este tutorial, nos basaremos en un framework de Javascript, de lado cliente, llamado Ext, el cual presenta una serie de interesantes funcionalidades que esperamos cubrir a fondo en próximos tutoriales.

Así que como siempre, lo primero:

Implementos necesarios:

  1. Las librerías correspondientes al framework, que pueden descargar desde nuestro sitio Web.
  2. Un editor Web. CLH utiliza y recomienda Adobe Dreamweaver.

Procedimiento:

1.- Luego de descargar las librerías, procedemos a descomprimirlo en algún lugar de nuestro computador.

2.- Al descomprimir deberíamos tener menu.css, menu.js, examples.css, ext-core.js y ext-core-debug.jsademás de un directorio con imágenes que utilizaremos.

3.- Con todo eso listo, ahora crearemos un archivo HTML en donde formaremos nuestro menú. Vamos a nuestro editor Web favorito e insertamos el siguiente código:


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CLH</title>

<link href=”examples.css” rel=”stylesheet” />
<link href=”menu.css” rel=”stylesheet” />

<script src=”ext-core-debug.js”></script>
<script src=”menu.js”></script>

<script>
Ext.onReady(function() {
new Ext.ux.Menu(‘simple-horizontal-menu’, {
transitionType: ‘slide’,
direction: ‘horizontal’, // default
delay: 0.2, // default
autoWidth: true, // default
transitionDuration: 0.3, // default
animate: true, // default
currentClass: ‘current’ // default
});

});
</script>
<style>
.ux-menu a.current {
background-image: url(‘imagenes/menu-item-bg-current.png’);
border-color: #cbc0b7;
}
</style>
</head>

<body>

<h3>Cómo Lo Hago</h3>
<ul id=”simple-horizontal-menu”>
<li>
<a href=”#”>Nosotros</a>
<ul>
<li><a href=”#”>Quienes Somos</a></li>
<li>
<a href=”#”>Historia</a>
<ul>
<li><a href=”#”>Principio</a></li>
<li><a href=”#”>Medio</a></li>
<li><a href=”#”>Final</a></li>
</ul>
</li>
<li><a href=”#”>Créditos</a></li>
</ul>
</li>
<li><a href=”#”>Tutoriales</a></li>
<li>
<a href=”#”>Categorías</a>
<ul>
<li><a href=”#”>Computación</a></li>
<li><a href=”#”>Diseño</a></li>
<li><a href=”#”>Manualidades</a></li>
</ul>
</li>
<li><a href=”#”>Contacto</a></li>
</ul>

</body>
</html>

4.- Ejecutamos en nuestro navegador favorito y podemos disfrutar de nuestro menú desplegable horizontal.

Algunas notas adicionales:

a) Este menú está basado en un framework llamado ext3, el cual ofrece una serie de funcionalidades, así como modificaciones a este ejemplo. Como todos los ejemplos de diseño Web, partimos enseñando lo más básico pero los incentivamos a indagar más a fondo. En futuros tutoriales iremos viendo otros ejemplos y como hacer desarrollos más personalizados.

b) El estilo del menú es por defecto. Si quieren realizar cambios a los colores o imagenes utilizadas, les recomendamos revisar las hojas de estilo (de extensión CSS) y el directorio imágenes.

Fácil y bonito ¿no?. Como ven, ya no es necesario desgastarse y revisar líneas y líneas de código para disfrutar de un recurso Web útil e impresionante para nuestros visitantes.