SummArg | Cursos y recursos para webmasters

15/02/2011

Cómo hacer un Menú desplegable y Slider sólo con CSS3

CSSPlay no deja de sorprender y en esta oportunidad nos muestra cómo confeccionar un slider animado con un menú desplegable, muy bonito y animado, sólo utilizando CSS3. Por limitaciones de los navegadores, por el momento las transiciones animadas sólo pueden apreciarse desde Safari, Chrome, Opera y Firefox v4 beta. En el resto de los navegadores la funcionalidad se conserva intacta exceptuando por las animaciones.

El código HTML para nuestro menú debe construirse como listas desordenadas:

<ul class="menu">
	<li class="topLi"><a href="#url"></a>
	<img class="leftPic1" src="cssplay3/pic4a.jpg" alt="" />
	<img class="midPic1" src="cssplay3/pic4b.jpg" alt="" />
	<img class="rightPic1" src="cssplay3/pic4c.jpg" alt="" />
		<ul class="menuInner">
			<li class="p1"><a href="#url">Restaurants</a>
				<img class="leftPic set1a" src="cssplay3/pic1a.jpg" alt="" />
				<img class="midPic set1b" src="cssplay3/pic1b.jpg" alt="" />
				<img class="rightPic set1c" src="cssplay3/pic1c.jpg" alt="" />
				<ul>
					<li><a href="#url">The Flagship</a></li>
					<li><a href="#url">The Blue Room</a></li>
					<li><a href="#url">Bar &amp; Pub</a></li>
					<li><a href="#url">Special Occasions</a></li>
				</ul>
			</li>
			<li class="p2"><a href="#url">Rooms &amp; Suites</a>
				<img class="leftPic set2a" src="cssplay3/pic2a.jpg" alt="" />
				<img class="midPic set2b" src="cssplay3/pic2b.jpg" alt="" />
				<img class="rightPic set2c" src="cssplay3/pic2c.jpg" alt="" />
				<ul>
					<li><a href="#url">Categories</a></li>
					<li><a href="#url">Availability</a></li>
					<li><a href="#url">Special Breaks</a></li>
					<li><a href="#url">Booking</a></li>
					<li><a href="#url">Reservations</a></li>
			</ul>
			</li>
			<li class="p3"><a href="#url">Wine List</a>
				<img class="leftPic set3a" src="cssplay3/pic3a.jpg" alt="" />
				<img class="midPic set3b" src="cssplay3/pic3b.jpg" alt="" />
				<img class="rightPic set3c" src="cssplay3/pic3c.jpg" alt="" />
				<ul>
					<li><a href="#url">Sauvignon Blanc</a></li>
					<li><a href="#url">Pinot Noir</a></li>
					<li><a href="#url">Chardonnay</a></li>
					<li><a href="#url">Merlot</a></li>
					<li><a href="#url">Shiraz</a></li>
					<li><a href="#url">Puglia</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Y el CSS con su copyright pueden encontrarlo en este link.

Demo | Descarga

Dejar un comentario