Menu Arcordion

by Mike Sto

HTML

<div id="menu">
    <h3 id="fotografia" class="boton">Fotografia</h3>
    <div class="options">
        <ul>
            <li><a href="">Opcion1</a></li>
            <li><a href="">Opcion2</a></li>
        </ul>
    </div>
    <h3 id="servicios" class="boton">Servicios</h3>
    <div class="options">
        <ul>
            <li><a href="">Opcion1</a></li>
            <li><a href="">Opcion2</a></li>
        </ul>
    </div>
    <h3 id="artistas" class="boton">Artistas</h3>
    <div class="options">
        <ul>
            <li><a href="">Opcion1</a></li>
            <li><a href="">Opcion2</a></li>
        </ul>
    </div>
</div>

CSS

#menu > .boton{
	cursor: pointer;
	margin: 0;
	padding: 0;
	font-size: 16px;
	margin: 0 0 10px 0;
}
#menu > .boton:hover{
	color: orange;
}
#menu > .options{
	display: none;
}
#menu > .options > ul{
	list-style: none;
	margin: 0 0 15px 0;
	font-size: 14px;
}
#menu > .options > ul > li{
	padding: 3px;
}

JavaScript

//Muestra / Oculata menu
	$('.boton').click(function(){
		if ( $(this).next().is( ":hidden" ) ) {
			$('.options').slideUp('normal');
			$(this).next().slideDown('normal');
		} else {
			$(this).next().slideUp('normal');
		};
	});