Menú simple con Botón

Realizaremos un menú simple con un botón de llamada.

Excelente tarde, noche o dia, Gracias por visitar mi blog.
Hoy revisaremos la forma de crear un Menú simple con 3 enlaces y un botón.

Menu Cal y Mayor
  • Comenzaremos colocando la etiqueta <header></header> y le agregaremos una clase, en este caso, la clase será (header-home).
  • Crear una etiqueta <nav></nav> y agregar la clase (main-menu).
  • Dentro de nav colocaremos un elemento <a></a> con la clase (logotipo) dentro de este elemento se colocará otro elemento <img> con la clase (logo-img) y dentro de este elemento en sus atributos (href) se colocará la URL del logo.

Vamos a crear el menú para escritorio:

Crear la etiqueta <ul></ul> con la clase (menu-link-desktop), y dentro de esta etiqueta se crearán 4 etiquetas <li></li> y dentro de cada <li> se colocará un elemento <a></a> agregar a cada <a> la clase (links-menu).

En cada etiqueta <a>Agregar el nombre de la sección, ejemplo Home.</a> y en los <a> restantes hacer lo mismo.

Para tener un botón se añadirá una clase más al último elemento del menú.

En la etiqueta <a> que está dentro de <li> colocar la clase cta-btn después de links-menu.

				
					 <header class="header-home">
        <!-- Open Menu -->
        <nav class="main-menu">
            <a class="logotipo" href="http://"><img decoding="async" class="logo-img" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Cal y Mayor Francisco, Desarrollado y Tecnologia Web" data-lazy-src="images/calymayor-logo-06.png" ><noscript><img decoding="async" class="logo-img" src="images/calymayor-logo-06.png" alt="Cal y Mayor Francisco, Desarrollado y Tecnologia Web" ></noscript></a>
            <!-- Menu Desktop -->
            <ul class="menu-link-desktop">
                <li>
                    <a class="links-menu" href="http://">Inicio</a>
                </li>
                <li>
                    <a class="links-menu" href="http://">Servicios</a>
                </li>
                <li>
                    <a class="links-menu" href="http://">Beneficios</a>
                </li>
                <li>
                    <a class="links-menu cta-btn" href="http://">Cotizar</a>
                </li>
            </ul>
            
        </nav>
        <!-- End Menu -->
    </header>
				
			

Vaya, has llegado hasta este punto, el código está arriba. Puedes copiar y pegar, así pruebas que funcione. Siéntete libre de mejorarlo.

Vamos a darle estilos. Sí, a ponerlo bonito.

				
					a {
    text-decoration: none;
    outline: none;
    transition: 0.4s all ease-in-out;
  }
  li {
    list-style: none;
  }
.header-home {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #1f1f1f;
}
.main-menu {
  background-color: #1f1f1f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0 1.5rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.logo-img {
  width: 250px;
}
.menu-link-desktop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.links-menu {
  padding: 0 16px;
  line-height: 70px;
  height: 70;
  display: block;
  color: white;
}
.links-menu:hover:not(.cta-btn) {
  -webkit-box-shadow: 0 -5px 0 0 white inset;
  box-shadow: 0 -5px 0 0 white inset;
}
.cta-btn {
  font-weight: bold;
  background-color: #7fc80e;
  line-height: 40px;
  height: 40px;
  border-radius: 5px;
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
}
.btns:hover,
.cta-btn:hover {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}
				
			

Vamos a explicar cada estilo en un video, espéralo…..

Francisco
Francisco

👀 Me interesa... Seguir aprendiendo y colaborando en nuevos proyectos
🌱 Actualmente estoy aprendiendo... Desarrollo de Plugin,GitHub, React y NodeJs.
💞️ Busco colaborar en ...programación web, Aplicaciones
📫 Como contactarme... francisco@calymayor.dev

Artículos: 50
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x