Interfaz para publicar Screencast

Captura de pantalla 2013-09-10 a la(s) 19.10.57

Hace algún tiempo tome un curso sobre Linux y como proyecto final me toco instalar un servidor web en esta plataforma e instalar WordPress y Prestashop., para ello se me ocurrió crear un screencast y diseñe esta interfaz., espero que te sirva.

Ingredientes:

Ver demoDescargar código

XML


<?xml version="1.0" encoding="UTF-8" ?>
<videos>
	<video url="videos/instalar-xampp.mp4" titulo="Instalacion de Xampp en CentOS 4.5" imagen="imgs/instalar-xampp.jpg" />
	<video url="videos/instalar-blog.mp4" titulo="Instalar un Blog (WordPress)" imagen="imgs/instalar-blog.jpg" />
	<video url="videos/instalar-shop.mp4" titulo="Instalar un Carro de compras (PrestaShop)" imagen="imgs/instalar-shop.jpg" />
</videos>

Creamos un XML videos.xml, especificando para cada uno los atributos: URL donde se localiza el video, el titulo y una imagen representativa (para esta interfaz de 290×100 pixeles).

Código del HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Mi Screencast</title>
		<script type='text/javascript' src='js/jwplayer.js'></script>
		<script src="js/jquery-latest.min.js"></script>
		<script type="text/javascript">
			var urlvideo = new Array(); 
	
			$(function(){ // Funcion inicial de jQuery
				$.ajax({ // Parametros necesarios para leer el XML
					type: "GET",
					url: "videos.xml",
					dataType: "xml",
					success: function(xml){
						cont = 0;
						$(xml).find("videos").each(function(){ //localizamos la etiqueta videos
							$(xml).find("video").each(function(){ // y hacemos para cada etiqueta video
								// Agregamos la URL y el titulo al arreglo
								urlvideo[cont] = [$(this).attr("url"), $(this).attr("titulo")];
								// Dentro de la lista#losvideos agregamos un elemento con un enlace
								// y la imagen que le corresponde., extraidos de los atributos
								// de la etiqueta video del XML
								$("#losvideos").append("<li><a href='#'><img src='" + $(this).attr("imagen") + "' alt='" + $(this).attr("titulo") + "' width='290' height='100'><p>" + $(this).attr("titulo") + "</p></a></li>");
								cont++	
							});	
						});
					}
				});

				// Detectamos los clicks de cada unos de los elementos de la lista #losvideos
				// Como creamos los elementos al vuelo / onFly hay que utilizar la funcion 'live'
				$("#losvideos li").live('click', function(){
					selec = $(this).index(); //cual elemento es seleccionado 0,1,2>>X
					// Mediante la API de JW Player, cambiamos el video y lo reproducimos
					jwplayer().load({file: urlvideo[selec][0]}).play();
					// Cambiamos el texto titulo, los cuales previamente fueron almacenados en el arreglo 'urlvideo' 
					$('#titulo').text(urlvideo[selec][1]);
				});
			});
		</script>

		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				font-family: sans-serif, Arial, Helvetica;
			}
			#contenedor{
				width: 960px;
				margin: 0 auto;
				display: table;
			}
			#elvideo{
				width: 942px;
				height: 714px;
				margin-left: 6px;
				clear: both;
				display: table;
			}
			ul#losvideos{
				padding: 0;
				width: 100%;
				clear: both;
				margin: 40px 0 0 0;
				list-style-type: none;
			}
			ul#losvideos li{
				width: 298px;
				float: left;
				margin: 0 10px;
			}
			ul#losvideos li img, #elvideo{
				border: 4px solid #ccc;
			}
			ul#losvideos p{
				font-size: 14px;
				margin-top: 4px;
				padding: 0;
			}
			ul#losvideos a{
				color: #ccc;
				text-decoration: none;
			}
			ul#losvideos a:hover{
				color: #3079ed;
			}
			ul#losvideos li a:hover img{
				border: 4px solid #3079ed;
			}			
		</style>
	</head>
	<body>
		<div id="contenedor">
			<h1 id="titulo">Instalacion de Xampp en CentOS 4.5</h1>
			<div id="elvideo"></div>
			<ul id="losvideos"></ul>
		</div>
		<!-- Configuramos JW Player  -->
		<script type='text/javascript'>
		  jwplayer('elvideo').setup({ //Agregamos el contenido dentro del div#elvideo
		    'flashplayer': 'player.swf',
		    'file': 'videos/instalar-xampp.mp4', //URl del video a reproducir
		    'controlbar': 'over',
		    'width': '942', // Tamaño
		    'height': '714'
		  });
		</script>
	</body>
</html>

¿Cómo funciona?

En el XML almacenamos la ruta de los videos y las imágenes representativas, y el titulo de cada uno., mediante jQuery-AJAX extraemos esa información creando un listado de todos los videos contenidos también almacenando esta en un arreglo., detectamos que elemento se le da clic (del 0… al X) utilizamos ese dato y extraemos la información que anteriormente almacenamos en el arreglo (el titulo y la ruta del video), cambiamos el titulo mediante jQuery y le pasamos la ruta del video a la API del JW Player para que lo reproduzca.

Para agregar o quitar elementos solo debemos editar el XML y la interfaz se actualizara automáticamente.

Ver demo – Descargar código

Imagen de fondo dinámica

imagenfullnav

Has tenido la idea en la cual la imagen de fondo se ajuste al tamaño del navegador y cuando este cambie se ajuste automáticamente, para ello existe un excelente plugin desarrollado por Scott Robbin.

Ingredientes:

Descargar ejemplos

Hay tres formas básicas de utilizarlo.

Con una imagen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="js/jquery.backstretch.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//invocamos la función y le asignamos una imagen
			$.backstretch("imgs/liliesagua.jpg");
		});
	</script>
	<title>Imagen de fondo dinamica</title>
</head>
<body>
</body>
</html>

Ver ejemplo

¿Como funciona?

$.backstretch(“RUTA/IMAGEN.EXTENSIÓN”);

Mediante Clicks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="js/jquery.backstretch.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// Efecto de trasparencia y animación
			$("#galeria").css({ opacity: 0.5 });
			
			$("#galeria").hover(function() {
				$("#galeria").animate({opacity: 1}, 300);
			}, function() {
				$("#galeria").animate({opacity: 0.5}, 300);
			});

			// Asignamos una imagen inicial
			$.backstretch("imgs/liliesagua.jpg");

			// Detectamos cada que se le de click a cada enlace
			// y se realiza el cambio de la imagen
			$("#piedras").click(function(e) {
 				e.preventDefault();
 				$.backstretch("imgs/piedras.jpg");
 			});
			
			$("#orquideas").click(function(e) {
 				e.preventDefault();
 				$.backstretch("imgs/orquideas.jpg");
 			});

 			$("#liliesagua").click(function(e) {
 				e.preventDefault();
 				$.backstretch("imgs/liliesagua.jpg");
 			});

 			$("#zen").click(function(e) {
 				e.preventDefault();
 				$.backstretch("imgs/zen.jpg");
 			});
		});
	</script>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			color: #FFF;
			font-family: Arial, Helvetica, sans-serif;
		}
		/*el Div que contiene las imagenes*/
		#galeria{
			width: 500px;
			height: 120px;
			margin: 0 auto;
			padding: 0;
			background-color: #000;
		}
		#galeria ul{
			width: 400px;
			list-style-type: none;
			margin: 0 auto;
			padding: 20px 0 0 0;
		}
		#galeria li{
			float: left;
			display: inline;
		}
		img{
			border: 0;
		}
		p{
			clear: both;
			text-align: center
		}
	</style>
	<title>Imagen de fondo dinamica</title>
</head>
<body>
	<div id="galeria">
		<ul id="minis">
			<li><a href="#" id="piedras"><img src="imgs/piedras_min.jpg" alt="" /></a></li>
			<li><a href="#" id="orquideas"><img src="imgs/orquideas_min.jpg" alt="" /></a></li>
			<li><a href="#" id="liliesagua"><img src="imgs/liliesagua_min.jpg" alt="" /></a></li>
			<li><a href="#" id="zen"><img src="imgs/zen_min.jpg" alt="" /></a></li>
		</ul>
		<p>Click en la imagen</p>
	</div>
</body>
</html>

Ver ejemplo

Presentación (slideshow):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="js/jquery.backstretch.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var imagenes = [
    			"imgs/liliesagua.jpg"
    			, "imgs/piedras.jpg"
    			, "imgs/orquideas.jpg"
    			, "imgs/zen.jpg"
  			];

  			// Precarga de todas la imagenes
			$(imagenes).each(function(){
    			$("<img/>")[0].src = this; 
  			});

			// Almacena cual imagen esta activa
  			var index = 0;

			// Aplicamos la primera imagen del arreglo 
			// y lo configuramos para que realice un efecto de transición (fadeIn) 
			// de 500 milisegundos entre cada cambio imagen
			$.backstretch(imagenes[index], {speed: 500});

			// setInterval es una funcion que se repite determinado tiempo
			// en este caso cada 5000 milisegundos incrementando el index
			// y aplicando una nueva imagen
			setInterval(function() {
    			index = (index >= imagenes.length - 1) ? 0 : index + 1;
    			$.backstretch(imagenes[index]);
    		}, 5000);
		});
	</script>
	<title>Imagen de fondo dinamica</title>
</head>
<body>
</body>
</html>

Ver ejemplo Descargar ejemplos

Agregar mas tipografías a nuestro sitio web con Google Fonts API

googlefonstapi

Google Web Fonts API nos ofrece a los desarrolladores la facilidad de incrementar el catalogo tipográfico que podemos utilizar en nuestros sitios web (como sabemos las fuentes predeterminas y estándares para la web son Andale mono, Arial, Arial Black, Brush Script MT, Comic Sans MS, Georgian, Impact, Times New Roman, Trebuchet MS, Verdana y Webdings).

Ingredientes:

Ver ejemplo Descargar

El método por medio de hojas de estilo CSS


<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>

Formato para solicitar varias la Tipografías


<link href='http://fonts.googleapis.com/css?family=Nombre1| Nombre2 | NombreN' rel='stylesheet' type='text/css'>

Cada Font hay que dividida con un pipe | hasta N requiramos

Ejemplo


<link href='http://fonts.googleapis.com/css?family=Handlee|Droid Sans' rel='stylesheet' type='text/css'>

Con  JavaScript


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">

<script type="text/javascript">

WebFont.load({

   google: {

      families: ["Droid Sans","Droid Serif"]

   }

});

</script>

Ya sea el método que mas nos acomode, agregamos la fuente a utilizar dentro de nuestra hoja de estilo:


<style type="text/css" media="screen">

.handlee{

   font-family: 'Handlee', cursive

}

.droidsans{

   font-family: 'Droid Sans', sans-serif;

}

</style>

Y por ultimo aplicarla a los elementos:


<h1>Tipograf&iacute;a Handlee</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2 class="droidsans">Tipograf&iacute;a Droid Sans </h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Efecto de imagen de escala de grises a color con jQuery

floresgris

Ingredientes

Código

<html>
<head>
	<title>Efecto imagen de escala de grises a color</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
		$(function(){
			$(".cambiaimg").hover(
				function() {
					$("img.a", this).stop().animate({"opacity": "0"}, 400);
				},
				function() {
					$("img.a", this).stop().animate({"opacity": "1"}, 300);
			});
		});
</script>
<style type="text/css">
	body{
		background-color: #222;
		margin: 0;
		padding: 0;
		color:#fff;
	}
	#contenedorimgs {
		margin:5px 0 120px 12px;
		width:990px;
		height:auto;
	}
	.cambiaimg {
		position:relative;
		overflow:hidden;
		float:left;
		margin:10px;
		width:472px;
		height:550px;
	}
	img, img a{
		border:0;
	}
	img.a {
		position: absolute;
		left: 0;
		top: 0;
	    z-index: 77;
	}
	img.b {
		position: relative;
		left: 0;
		top: 0;
	}

</style>
</head>
<body>
	Imagenes: <a href="http://sxc.hu/">sxc.hu</a>

<div id="contenedorimgs">
	<div class="cambiaimg">
		<a href="#"><img src="imgs/texturagris.jpg" width="472" height="550" class="a" /><img src="imgs/texturacolor.jpg" width="472" height="550" class="b" /></a>
	</div>
	<div class="cambiaimg">
		<a href="#"><img src="imgs/floresgris.jpg" width="472" height="550" class="a" /><img src="imgs/florescolor.jpg" width="472" height="550" class="b" /></a>
	</div>
	<div class="cambiaimg">
		<a href="#"><img src="imgs/piesgris.jpg" width="472" height="550" class="a" /><img src="imgs/piescolor.jpg" width="472" height="550" class="b" /></a>
	</div>
</div>
</body>
</html>

¿Cómo funciona?

Comencemos por el CSS

body{
		background-color: #222;
		margin: 0;
		padding: 0;
		color:#fff;
	}
	#contenedorimgs {
		margin:5px 0 120px 12px;
		width:990px;
		height:auto;
	}
	.cambiaimg {
		position:relative;
		overflow:hidden;
		float:left;
		margin:10px;
		width:472px;
		height:550px;
	}
	img, img a{
		border:0;
	}
	img.a {
		position: absolute;
		left: 0;
		top: 0;
	    z-index: 77;
	}
	img.b {
		position: relative;
		left: 0;
		top: 0;
	}

Los div´s

<div id="contenedorimgs">
	<div class="cambiaimg">
		<a href="#"><img src="imgs/texturagris.jpg" width="472" height="550" class="a" /><img src="imgs/texturacolor.jpg" width="472" height="550" class="b" /></a>
	</div>
	<div class="cambiaimg">
		<a href="#"><img src="imgs/floresgris.jpg" width="472" height="550" class="a" /><img src="imgs/florescolor.jpg" width="472" height="550" class="b" /></a>
	</div>
	<div class="cambiaimg">
		<a href="#"><img src="imgs/piesgris.jpg" width="472" height="550" class="a" /><img src="imgs/piescolor.jpg" width="472" height="550" class="b" /></a>
	</div>
</div>

#contenedorimgs: será el div único que contendrá todas nuestras imágenes.
.cambiaimg: son los div’s que contendrán la imagen a y b.
img.a: La imagen a escala de grises que se encontrara encima (position: absolute;) de la imagen b.
img.b: Imagen a color que se encontrara detrás (position: relative;) de a.

El toque mágico

$(function(){
	$(".cambiaimg").hover(
		function() {
			$("img.a", this).stop().animate({"opacity": "0"}, 400);
		},
		function() {
			$("img.a", this).stop().animate({"opacity": "1"}, 300);
	});
});

En cada div .cambiaimg detectamos el evento del ratón con la función .hover(), cuando se encuentre encima, la img.a se desvanecerá (la imagen a escala de grises) mediante la función .animate(propiedades [,duración]) y la propiedad “opacity”: ”0” y con una velocidad de 400 milisegundos, mostrando con ello la imagen a color que se encuentra detrás de esta., al momento de que el puntero del ratón se encuentre fuera del div .cambiaimg la img.a se restaurara a su estado original “opacity”: ”1” (donde 1= 100%, si requerimos que sea 70% el valor será igual a 0.7)con una velocidad de 300 milisegundos, creando una genial animación de desvanecimiento y aparición.

Cambiar dinámicamente el color de fondo con jQuery

Captura de pantalla 2012-02-26 a la(s) 14.34.53

Ingredientes:

Modificado – 10 Abril 2013

El plugin de color solo funciona con versiones inferiores de jQuery 1.7

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Cambio de color de fondo con jQuery Dinamico</title>
		<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script language="JavaScript" src="js/jquery.color.js" type="text/javascript"></script>
		<script language="JavaScript">
			function random_color()
			{
				 return "#"+("000"+(Math.random()*(1<<24)|0).toString(16)).substr(-6)

			}

			$(function(){
				$('html').css('background-color','black');
				$('#boton').click(function() {
					$('html').animate({
						'background-color': random_color()
					}, 900);
				});

		    });

		</script>
		<meta name="author" content="Raymundo Pizano González" />
		<!-- Date: 2011-10-17 -->

	</head>
	<body>
		<form>
			<input type="button" value="Cambia de Color =)" id="boton" />
		</form>
	</body>
</html>

¿Como funciona?

Esta función genera al azar los colores a cambiar
			function random_color()
			{
				 return "#"+("000"+(Math.random()*(1<
			}

Al momento de darle clic al botón

<form><input id="boton" type="button" value="Cambia de Color =)" /></form>

Se genera el cambio

				$('#boton').click(function() {
					$('html').animate({
						'background-color': random_color()
					}, 900);
				});

jQuery menú con animación de color

menuna

Con jQuery es increíblemente fácil crear animaciones, por lo que seguramente te enamoraras de este Framework. En este articulo manipularemos los elementos del menú para que al momento de interactuar con uno de ellos se cambie de color dándole un efecto genial.

Ver demo Descargar código

Veamos el código completo

<html>
<head>
<title>Men&uacute; con animaci&oacute;n de color</title>
	<style type="text/css">
		body{
			text-align: center;
		}
		#nav {
			font-family: Georgia;
			margin: 0 auto;
		}
		#nav li{
			list-style-type: none;
			float: left;
		}
		#nav li a {
			margin-right:23px;
			color:#ccc;
			font-size:25px;
			font-weight: normal;
			font-variant: inherit;
			text-decoration:none;
			padding: 0 0 4px 0;
			text-shadow:4px 4px 1.5px #fff;
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.color.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
			$(function(){
				$('#nav a').hover(function(){
					$(this).animate({
						'color': '#2C2C2C'
					}, 900);
				}, function(){
					$(this).animate({
						'color': '#ccc'
					}, 400);
				});
			});
	</script>
</head>
<body>
	<div id="nav">
		<ul>
			<li><a href="#">Trabajo</a></li>
			<li><a href="#">Acerca de</a></li>
			<li><a href="#">Servicios</a></li>
			<li><a href="#">Contacto</a></li>
			<li><a href="#">Blog</a></li>
		</ul>
	</div>
</body>
</html>

Como funciona
1: Creamos una lista con los valores que necesitamos para nuestro menú, en este ejemplo he utilizado cinco elementos contenidos en un div al cual nombraremos “nav”.

<html>
<body>
	<div id="nav">
		<ul>
			<li><a href="#">Trabajo</a></li>
			<li><a href="#">Acerca de</a></li>
			<li><a href="#">Servicios</a></li>
			<li><a href="#">Contacto</a></li>
			<li><a href="#">Blog</a></li>
		</ul>
	</div>
</body>
</html>

2: Mediante CSS alinearemos nuestros elementos de la lista.

<style type="text/css">
		body{
			text-align: center;
		}
		#nav {
			font-family: Georgia;
			margin: 0 auto;
		}
		#nav li{
			list-style-type: none;
			float: left;
		}
		#nav li a {
			margin-right:23px;
			color:#ccc;
			font-size:25px;
			font-weight: normal;
			font-variant: inherit;
			text-decoration:none;
			padding: 0 0 4px 0;
			text-shadow:4px 4px 1.5px #fff;
		}
	</style>

3: Agregamos la librería de jQuery y el plug de color dentro de las etiquetas . Será necesario descargar el plugin de color escrito por John Resig: http://plugins.jquery.com/files/jquery.color.js.txt (guárdalo como jquery.color.js eliminando la extensión .txt).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>

4: Animemos los elementos de nuestro menú.

<script language="javascript" type="text/javascript">
			$(function(){
				$('#nav a').hover(function(){
					$(this).animate({
						'color': '#2C2C2C'
					}, 900);
				}, function(){
					$(this).animate({
						'color': '#ccc'
					}, 400);
				});
			});
	</script>

Inicializamos la librería

$(function(){

Detectamos el evento cuando el cursor se encuentra dentro y fuera de nuestro elemento del menú, el cual lo contiene el div “nav”.

$('#nav a').hover(function(){

Cuando se encuentre el cursor encima de nuestro elemento, detectamos cual es mediante “this”, le agregamos la animación de color y cuanto tiempo durará su transición.

$(this).animate({
		color': '#2C2C2C'
}, 900);

Si el cursor está fuera de nuestro elemento, lo regresamos a su color inicial mediante una animación.

}, function(){
		$(this).animate({
			'color': '#ccc'
		}, 400);
});

Sintaxis para la animación de color:

$(ELEMENTO).animate({ATRIBUTO: VALOR}, TIEMPO-EN-MILISEGUNDOS);

Menú con lista desplegables con jQuery

lisanim

jQuery nos permite manipular fácilmente los nodos y/o elementos de nuestra pagina (el árbol DOOM), en esta ocasión crearemos un menú con listas y utilizaremos jQuery para animar estas.

Ver demo Descargar

Primero comenzaremos con el código básico de la pagina:

<html>
<head>
</head>
<body>
	<div id="menu">
		<ul>
			<li>
				<a href="#">Opcion 1</a>
				<ul>
					<li>Opcion 1.1</li>
					<li>
						<a href="#">Opcion 1.2</a>
						<ul>
							<li>Opcion 1.2.1</li>
							<li>Opcion 1.2.2</li>
						</ul>
					</li>
					<li>Opcion 1.3</li>
				</ul>
			</li>
			<li>
				<a href="#">Opcion 2</a>
				<ul>
					<li>
						<a href="#">Opcion 2.1</a>
						<ul>
							<li>Opcion 2.1.1</li>
							<li>Opcion 2.1.2</li>
							<li>
								<a href="#">Opcion 2.1.3</a>
								<ul>
									<li>Opcion 2.1.3.1</li>
									<li>
										<a href="#">Opcion 2.1.3.2</a>
										<ul>
											<li>Opcion 2.1.3.2.1</li>
											<li>Opcion 2.1.3.2.2</li>
											<li>
												<a href="#">Opcion 2.1.3.2.3</a>
												<ul>
													<li>Opcion 2.1.3.2.3.1</li>
													<li>Opcion 2.1.3.2.3.2</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>Opcion 2.1.3.3</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>Opcion 2.2</a></li>
					<li>Opcion 2.3</li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

Luego, creamos el estilo del menú y de las listas:

<style	type="text/css">
		#menu{
			width:245px;
			float:left;
		}
		#menu ul{
			margin:10px 0 0 15px;
			padding:0;
			font-family:Arial, Helvetica, sans-serif;
		}
		#menu ul li{
			list-style-type:none;
			font-size:25px;
			margin: 0 0 10px 0;
		}
		#menu ul li a{
			color:#0073B8;
			text-decoration:none;
		}
		#menu ul li a:hover{
			color:#0073B8;
			text-decoration:none;
		}
		#menu ul li ul li{
			margin:5px 0 10px 5px;
			padding:0;
			float: left;
			width: 175px;
			font-size:15px;
		}
		#menu ul li ul li a{
			display: block;
			color: #FF5288;
			text-decoration: none;
			/*padding: 0 5px;*/
			line-height: 2.0;
			border: none;
		}
		#menu ul li ul li a:hover{
			background: #FFF0F5;
			color: #FF5288;
			border:none;
		}
	</style>

Agregamos la liberaría de jQuery entre las etiquetas de , alojada en la pagina de Google (o se puede descargar de jQuery.com):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Aquí viene la magia
Esconder y desplegar las listas:

<script language="javascript" type="text/javascript">
			$(function(){
				$('#menu ul ul').hide();
				$('#menu a').click(function(){
					$(this).next().slideToggle('fast');
					return false;
				});

			});
</script>

¿Cómo funciona?
1. Escondemos todas las listas hijas
$(‘#menu ul ul’).hide();

2. Detectamos el evento clic de los enlaces de las listas
$(‘#menu a’).click(function(){ }

Cuando presionamos un enlace detectamos cual es (this) y ubicamos etiqueta siguiente (next()) la cual es una lista (

    ), desplegándola y/o ocultándola con slideToggle().

$(this).next().slideToggle(‘fast’);

Y por ultimo el código completo:

<html>
<head>
	<style	type="text/css">
		#menu{
			width:245px;
			float:left;
		}
		#menu ul{
			margin:10px 0 0 15px;
			padding:0;
			font-family:Arial, Helvetica, sans-serif;
		}
		#menu ul li{
			list-style-type:none;
			font-size:25px;
			margin: 0 0 10px 0;
		}
		#menu ul li a{
			color:#0073B8;
			text-decoration:none;
		}
		#menu ul li a:hover{
			color:#0073B8;
			text-decoration:none;
		}
		#menu ul li ul li{
			margin:5px 0 10px 5px;
			padding:0;
			float: left;
			width: 175px;
			font-size:15px;
		}
		#menu ul li ul li a{
			display: block;
			color: #FF5288;
			text-decoration: none;
			/*padding: 0 5px;*/
			line-height: 2.0;
			border: none;
		}
		#menu ul li ul li a:hover{
			background: #FFF0F5;
			color: #FF5288;
			border:none;
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
			$(function(){
				$('#menu ul ul').hide();
				$('#menu a').click(function(){
					$(this).next().slideToggle('fast');
					return false;
				});

			});
		</script>
</head>
<body>
	<div id="menu">
		<ul>
			<li>
				<a href="#">Opcion 1</a>
				<ul>
					<li>Opcion 1.1</li>
					<li>
						<a href="#">Opcion 1.2</a>
						<ul>
							<li>Opcion 1.2.1</li>
							<li>Opcion 1.2.2</li>
						</ul>
					</li>
					<li>Opcion 1.3</li>
				</ul>
			</li>
			<li>
				<a href="#">Opcion 2</a>
				<ul>
					<li>
						<a href="#">Opcion 2.1</a>
						<ul>
							<li>Opcion 2.1.1</li>
							<li>Opcion 2.1.2</li>
							<li>
								<a href="#">Opcion 2.1.3</a>
								<ul>
									<li>Opcion 2.1.3.1</li>
									<li>
										<a href="#">Opcion 2.1.3.2</a>
										<ul>
											<li>Opcion 2.1.3.2.1</li>
											<li>Opcion 2.1.3.2.2</li>
											<li>
												<a href="#">Opcion 2.1.3.2.3</a>
												<ul>
													<li>Opcion 2.1.3.2.3.1</li>
													<li>Opcion 2.1.3.2.3.2</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>Opcion 2.1.3.3</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>Opcion 2.2</a></li>
					<li>Opcion 2.3</li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>