HTML5/CSS3

Menú de Navegación Adaptable con Rotación

Índice
  1. Menú de Navegación con Rotación
    1. El Html
    2. El CSS
    3. El JavaScript
    4. Conclusión

Sabemos de la importación del menú de navegación en el diseño de nuestra web. Por ello os traigo un tutorial donde aprenderás a crearlo para tu página.

Menú de Navegación con Rotación

El objetivo de este tutorial consiste en crear un menú de navegación para una vista de Escritorio y que ese mismo menú se adapte a los diferentes dispositivos móviles, ya sea tableta o teléfono.

Este tipo de menús son muy utilizados en la mayoría de los sitios responsivos, además haremos una ligera rotación para hacerlo más profesional y creativo.

El Html

Como siempre comenzaremos por nuestro archivo html, en el cual crearemos una lista con los elementos del menú que utilizaremos.

<body>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="brand-icon">Tu<span class="color-change">Logotipo</span></div>
        <div class="menu-icon">
            <span class="menu-icon__line menu-icon__line-left"></span>
            <span class="menu-icon__line"></span>
            <span class="menu-icon__line menu-icon__line-right"></span>
        </div>
    </div>
    <div class="nav">
        <div class="nav__content">
            <ul class="nav__list">
                <li class="nav__list-item">Inicio</li>
                <li class="nav__list-item">Servicios</li>
                <li class="nav__list-item">Proyectos</li>
                <li class="nav__list-item">Contacto</li>
            </ul>
        </div>
    </div>
<section class="intro">
  <div class="container">
    <div class="row">
       <div class="col-lg-12">
         <h3>Pulsa en el Icono de Menu</h3>
         <p>Aparecerá el menú con una rotación de 45 grados</p>
        </div>
      </div>
   </div>
</section>  
<footer>
  <div class="container">
      <p class="signature">Creado por: <a href="https://tuwebcreativa.com"> tuwebcreativa.com</a></p>
  </div>
  </footer>
</body>

Tutorial animación CSS3 | Caja de Suscripción

El CSS

A continuación vamos a darle los estilos a nuestro menú, así como los diferentes efectos.

@import url("https://fonts.googleapis.com/css?family=Josefin+Sans|Sintony");
html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: #353946;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.signature {
  position: fixed;
  font-weight: 100;
  bottom: 10px;
  color: rgba(124, 219, 177, 0.95);
  left: 0;
  letter-spacing: 2px;
  font-size: 13px;
  width: 100vw;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  z-index:2;
}

.color-change {
  color: rgba(105, 187, 151, 0.71);
}

h3 {
  color: #fff;
  font-family: "Sintony", sans-serif;
}
p {
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
  font-size:18px;
}

a{color:#000; font-weight:400;}

.intro {
  min-height: 100%;
  padding-top: 50px;
  text-align: center;
}

/* Bootstrap Navbar to make "transparent" background */.navbar-default {
  background-color: #353946;
  border: 0;
  width: 100%;
}

.navbar {
  position: fixed;
}

.brand-icon {
  left: 50px;
  height: 30px;
  width: 30px;
  position: fixed;
  z-index: 2;
  top: 20px;
  color: #d4cfcf;
  font-family: "Sintony", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.3px;
}

.menu-icon {
  height: 30px;
  width: 30px;
  position: fixed;
  z-index: 2;
  right: 50px;
  top: 25px;
  cursor: pointer;
}
.menu-icon__line {
  height: 2px;
  width: 30px;
  display: block;
  background-color: #ffffff;
  margin-bottom: 4px;
  -webkit-transition: background-color 0.5s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.5s ease, -webkit-transform 0.2s ease;
  transition: transform 0.2s ease, background-color 0.5s ease;
  transition: transform 0.2s ease, background-color 0.5s ease,
    -webkit-transform 0.2s ease;
}
.menu-icon__line-left {
  width: 15px;
}
.menu-icon__line-right {
  width: 15px;
  float: right;
}

.nav {
  position: fixed;
  z-index: 1;
}
.nav:before,
.nav:after {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(234, 234, 234, 0.2);
  z-index: -1;
  -webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s,
    -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  -webkit-transform: translateX(0%) translateY(-100%);
  transform: translateX(0%) translateY(-100%);
}
.nav:after {
  background: white;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.nav:before {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.nav__content {
  position: fixed;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 100%;
  text-align: center;
  font-size: calc(1.3vw + 10px);
  font-weight: 200;
  cursor: pointer;
}
.nav__list-item {
  position: relative;
  display: inline-block;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
  opacity: 0;
  -webkit-transform: translate(0%, 100%);
  transform: translate(0%, 100%);
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.2s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.2s ease, transform 0.3s ease;
  transition: opacity 0.2s ease, transform 0.3s ease,
    -webkit-transform 0.3s ease;
  margin-right: 25px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 25px;
}
.nav__list-item:before {
  content: "";
  position: absolute;
  background: #000000;
  width: 20px;
  height: 1px;
  top: 100%;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: -1;
}
.nav__list-item:hover:before {
  width: 100%;
}

body.nav-active .menu-icon__line {
  background-color: #fff;
  -webkit-transform: translateX(0px) rotate(-45deg);
  transform: translateX(0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
  -webkit-transform: translateX(1px) rotate(45deg);
  transform: translateX(1px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
  -webkit-transform: translateX(-2px) rotate(45deg);
  transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav {
  visibility: visible;
}
body.nav-active .nav:before,
body.nav-active .nav:after {
  -webkit-transform: translateX(-2px) rotate(45deg);
  transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav:after {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
body.nav-active .nav:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
body.nav-active .nav__list-item {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: opacity 0.3s ease, color 0.3s ease,
    -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, color 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease,
    -webkit-transform 0.3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(1) {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(2) {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(3) {
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(4) {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
 h3 {
  text-align: center;
  font-size: 15px;
 }
 p{
  font-size:12px;
 }
}

El JavaScript

Por último vamos a trabajar con JavaScript para activar los efectos al hacer clic en el botón de nuestro menú.

var app = function () {
    var body = void 0;
    var menu = void 0;
    var menuItems = void 0;

    var init = function init() {
        body = document.querySelector('body');
        menu = document.querySelector('.menu-icon');
        menuItems = document.querySelectorAll('.nav-list-item');

        applyListeners();
    };

    var applyListeners = function applyListeners() {
        menu.addEventListener('click', function () {
            return toggleClass(body, 'nav-active');
        });
    };

    var toggleClass = function toggleClass(element, stringClass) {
        if (element.classList.contains(stringClass)) element.classList.remove(stringClass); else element.classList.add(stringClass);
    };

    init();
}();

Conclusión

Como veis no ha sido muy complicado, solo un poco de paciencia para generar los diferentes efectos en nuestro menú.

Si quieres más tutoriales de este tipo déjame tu like y comparte con tus amigos en las redes sociales. ¡Gracias!

AJ Morales

Consultor de Marketing Digital, especializado en Marketing de Contenidos y Posicionamiento SEO 🚀. Me considero un apasionado de la tecnología y de la edición profesional de fotografías con Adobe Photoshop. Málaga ciudad con alma.

Ver comentarios

Dejar comentario
Compartir
Publicado por
AJ Morales
Tags: menu adaptable cssmenu cssmenú de navegaciónmenu htmlmenu javascriptmenu responsivoresponsive menu
8 años Hace

Publicaciones Recientes

Gemini Deep Research en Google Drive: Analiza Múltiples Documentos en Segundos y Ahorra Horas de Trabajo

Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…

2 días Hace

Quitar la Marca de Agua en las Imágenes de Google Nano Banana

Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…

3 semanas Hace

Límites de Gemini Gratis ¿Qué te ofrece la IA de Google sin pagar?

¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……

3 meses Hace

Convierte una foto en una figura coleccionable con Nano Banana Gratis

¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…

3 meses Hace

Cómo Hacer un Video de Ciudad Emblemática con Veo 3

Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…

3 meses Hace

Google Opal: Automatiza Tareas Diarias y Revoluciona Tu Productividad

¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…

3 meses Hace

Más información

📕 Política de Cookies
📗 Política de Privacidad
📘 Aviso Legal

Esta página utiliza cookies para mejorar su rendimiento