Códigos jQuery, CSS, HTML para páginas web

Entradas

Mostrando las entradas etiquetadas como desplegar

Desplegar y ocultar el contenido de un div con jQuery.

Con un código, en jQuery , tan sencillo como el siguiente:  <script type="text/javascript"> $(document).ready(function () { $('nav').on('click','li',function () { var $submenu=$(this).next('div.submenu'); if ($submenu.is(':hidden')) { $submenu.slideDown('100'); } else { $submenu.slideUp('100'); } }); }); </script> desplegamos y ocultamos el contenido de un div . Siguiendo como ejemplo la página Las Edades de la Tierra , en la cual, en su parte izquierda, podéis desplegar y ocultar el contenido de las diferentes Eras, voy a tratar de explicar como poner en práctica este ejemplo. Una parte del código HTML 5 podría ser como lo que sigue: <section> <nav> <article class="menu menuuno"> <hgroup> <h2 class="titulo">CENOZOICO</h2> <ul class="menu1...

Desplegar y ocultar ventana lateral con jQuery

Este post es una especie de continuación del anterior sobre como girar un div y posicionarlo en vertical . Siguiendo con la página Las Edades de la Tierra , en la zona derecha de la pantalla tenemos una ventana oculta , simpre fija, la cual se muestra, se despliega , al pinchar sobre la pestaña vertical llamada "notas". En este post voy a intentar explicar cómo realizamos este efecto con la ayuda de jQuery . Lo primero el HTML: <!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8" /> <title>Las de la tierra</title> <link rel="stylesheet" href="estilos.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"></script>')</script> <!-- Aquí podemos colocar el script en jQuery (descrito más abajo). Aunqu...