Saltar al contenido

Cómo Crear un Menú Desplegable en CSS3

28 mayo, 2018
Menú Desplegable CSS3

En este tutorial vamos a aprender a crear un menú desplegable en Css3 sin necesesidad de utilizar JavaScript

¿Porque crear un menú sin usar JavaScript

Generalmente a la hora de crear un menú para nuestra web solemos utilizar JavaScript para realizar el efecto de desplazamiento. Sin embargo CSS3 nos provee de las funciones necesarias para conseguirlo.

Además CSS3 cuenta con otras ventajas en términos generales frente a Javascript, y aquí os dejo algunas de ellas:

  • Creación de páginas web modernas de gran calidad
  • Mejora la velocidad de carga de nuestra página, y esto se traduce en una mejor optimización para SEO.
  • Javascript y los plugins pueden provocar problemas de compatibilidad, rendimiento y seguridad.

Para ello tanto siempre que sea posible prescindir de Javascript os recomiendo que uséis CSS3. Vuestra página y Google os lo agradecerá.

El Html de nuestro menú

<div class="container">
  <h1 class="title">Menú Desplegable CSS3</h1>
  <ul>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Primer Menú</a>
      <ul class="dropdown-menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Sobre Nosotros</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Segundo Menú</a>
      <ul class="dropdown-menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Sobre Nosotros</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <input type="checkbox" />
      <a href="#" data-toggle="dropdown">Tercer Menú</a>
      <ul class="dropdown-menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Sobre Nosotros</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </li>
  </ul>
</div>

Nuestro archivo SCSS para el menú

@import "compass/css3";

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(https://fonts.googleapis.com/css?family=Pacifico);

body {
	font-family: "Lato", Helvetica, Arial;
	font-size: 16px;
}

*, *:before, *:after {
	-webkit-border-sizing: border-box;
	-moz-border-sizing: border-box;
	border-sizing: border-box;
}

.container {
	width: 350px;
	margin: 50px auto;
  
  & > ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
  }
}

// =============================================================================
//	Mixins y Variables
// =============================================================================

$orange: #C0392B;
$blue: #2980B9;
$gray: #EEE;

@mixin ul-nostyle {
	list-style: none;
	padding: 0;
	margin: 0;
}

@mixin double-shadow($color) {
	@include box-shadow(0 1px 0 lighten($color, 10%) inset, 0 -1px 0 darken($color, 10%) inset);
}

@mixin hover-style($color) {
	&:hover {
		background: lighten($color, 3%);
	}
}

@mixin animation($content) {
  animation: $content;
  -moz-animation: $content;
  -webkit-animation: $content;
}

@mixin keyframes($name) {
  @keyframes #{$name} { @content; }
  @-moz-keyframes #{$name} { @content; }
  @-webkit-keyframes #{$name} { @content; }
}

// =============================================================================
//	Clases
// =============================================================================

.title {
  font-family: 'Pacifico';
  font-weight: norma;
  font-size: 40px;
  text-align: center;
  line-height: 1.4;
  color: $orange;
}

.dropdown {
  position: relative;
  
	a { text-decoration: none; }

	[data-toggle="dropdown"] {
		display: block;
		color: white;
		background: $orange;
		@include double-shadow($orange);
		@include hover-style($orange);
		@include text-shadow(0 -1px 0 rgba(0,0,0,0.3));
		padding: 10px;
    
    &:before {
			position: absolute;
			display: block;
      content: '\25BC';
			font-size: 0.7em;
			color: #fff;
			top: 13px;
			right: 10px;
			@include transform(rotate(0deg));
			@include transition(transform .6s);
		}
	}

	& > .dropdown-menu {
		max-height: 0;
		overflow: hidden;
		@include ul-nostyle;
		@include transform(scaleY(0));
		@include transform-origin(50%, 0%);
		@include transition(max-height .6s ease-out);
		@include animation(hideAnimation .4s ease-out);

		li {
			padding: 0;

			a {
				display: block;
				color: darken($gray, 50%);
				background: $gray;
				@include double-shadow($gray);
				@include hover-style($gray);
				@include text-shadow(0 -1px 0 rgba(255,255,255,0.3));
				padding: 10px 10px;
			}
		}
	}
  
  & > input[type="checkbox"] {
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    
    &:checked ~ .dropdown-menu {
      max-height: 9999px;
			display: block;
			@include transform(scaleY(1));
			@include animation(showAnimation .5s ease-in-out);
			@include transition(max-height 2s ease-in-out);
    }
    
    &:checked + a[data-toggle="dropdown"] {
      &:before {
        @include transform(rotate(-180deg));
        @include transition(transform .6s);
      }
    }
  }
}

@include keyframes(showAnimation) {
	0% {
		@include transform(scaleY(0.1));
	}
	40% {
		@include transform(scaleY(1.04));
	}
	60% {
		@include transform(scaleY(0.98));
	}
	80% {
		@include transform(scaleY(1.04));
	}
	100% {
		@include transform(scaleY(0.98));
	}				
	80% {
		@include transform(scaleY(1.02));
	}
	100% {
		@include transform(scaleY(1));
	}
}

@include keyframes(hideAnimation) {
  0% {
  	@include transform(scaleY(1));
  }
  60% {
  	@include transform(scaleY(0.98));
  }
  80% {
  	@include transform(scaleY(1.02));
  }
  100% {
  	@include transform(scaleY(0));
  }
}