Menús de Navegación para tu web -【GUIA DEFINITIVA】
Los menús de navegación son una forma sencilla de organizar un sitio web y proporcionar enlaces a diferentes páginas. Son muy fáciles de crear y se pueden hacer con unas pocas líneas de código.
pero es exactamente gracias a eso, que Eh visto que existen muchos tipos de menus de navegacion, por lo tanto hace que sea dificil saber cual escoger.
Es por ello Que en este post adguntare ejemplos de codigo de los Mapas de Navegacion mas Usados por los sitios web.
Preparado?, Vamos A ELLO..
El Dia De Hoy Veremos:
¿Qué es un menú de navegación y para qué se utiliza en una página web?
Los menús o barras de navegación son en pocas palabras, una colección de enlaces a diferentes páginas en un sitio web.
Un menú de navegación generalmente incluye las secciones principales del sitio, como una página de inicio, una de información y una de contacto. aunque también puedes incluir otras páginas que desees resaltar.
Los mapas de sitio generalmente se encuentran en la parte superior de las páginas web, ubicados debajo del logotipo o banner del sitio.
Se utilizan para ayudar a los visitantes a orientarse en su sitio y proporcionar navegación a los visitantes que desean regresar a las páginas que ya han visitado.
top 4 mejores Tipos de menú de navegación para tu página web
Acontinuacion tendras los 4 mejores menus mas usados por los sitios web que circulan en internet.
El Menu Hamburgueza del theme orbital
Este mapa de sitio se ha convertido en algo indispensable, Obiamente por la llegada de los dispositivos moviles, celulares o como los quieras llamar.
Este tipo de menu surjio al tratar de adaptar el clasico y convencional menu de escritorio y hacerlo accesible al movil, a este tipo de practica se le conoce como diseño responsive.
Para no ser muy tecnicos, dire que Los menus hamburguesa lo que hacen es simplificar todo el menu en un boton, por lo general dicho boton suele tener tres rayas horizontales... de alli que se haya ganado el apodo de "hamburguesa".
Como Hacer un Menu Hamburguesa al Estilo Orbital Theme con html y css
A continuacion te muestro el codigo del menu en HTML5 y css3 que lleva este mismo sitio web, a modo de ejemplo, puedes copiar y pegarlo en tu web o en un block de notas para usarlos en tus proyectos. ;)
<input id="check" type="checkbox" />
<label class="checkbtn" for="check">
<i
><svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
<path
d="M416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96zM416 352H32C14.33 352 0 337.7 0 320C0 302.3 14.33 288 32 288H416C433.7 288 448 302.3 448 320C448 337.7 433.7 352 416 352zM0 192C0 174.3 14.33 160 32 160H416C433.7 160 448 174.3 448 192C448 209.7 433.7 224 416 224H32C14.33 224 0 209.7 0 192zM416 480H32C14.33 480 0 465.7 0 448C0 430.3 14.33 416 32 416H416C433.7 416 448 430.3 448 448C448 465.7 433.7 480 416 480z"
/></svg
></i>
</label>
<nav>
<ul>
<li>
<a href="#" >Inicio</a></li>
<li><a href="#">Sobre Mi</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Portafolio</a></li>
<li><a href="#">Contacto</a></li>
<li>
<button class="button" data-target="search">
<form action="/search" id="search" method="get">
<input
autocomplete="off"
autofocus="autofocus"
class="buscador"
expr:value='data:view.isSearch ? data:view.search.query.escaped : ""'
name="q"
placeholder="Buscas Algo?"
required="required"
spellcheck="false"
type="text"
/>
</form>
</button>
</li>
</ul>
</nav>
<div class="fondo_menu activado" />
nav{position:fixed;display:-webkit-box;display:flex;bottom:9rem;right:1rem;width:200px;z-index:100000000;max-height:400px;overflow-y:scroll;border-radius:10px;transform:translateX(300px);transition:200ms;}
.checkbtn{z-index:1000000000;position:fixed;margin:0 auto;background:white;
font-size:19px;width:68px;height:74px;bottom:4rem;right:1.5rem;padding:1rem;border-radius:50%;box-shadow:2px 3px 28px 0px rgb(0 0 0 / 75%);}#check{display:none;}
nav>ul{width:100%;bottom:0;background:white;margin:0;padding:0;}
nav>ul>li{width:100%;border-bottom:1px solid #eee;padding:0.75rem;}
nav>ul>li>a{font-weight:bold;color:black;cursor:default;padding:0.75rem;}
#check:checked ~ nav{transform:translateX(0);transition:200ms;}#check:checked ~ .activado{opacity:0.75;position:fixed;height:100%;width:100%;top:0;background:#000000;display:block;z-index:10;}.fondo_menu{display:none;}
.button{padding:0;border:0;}.buscador{background:#0a0909bf;color:white;width:100%;border-radius:5px;padding:4px;}
Como ya sabras, Romuald Fons junto con su equipo de BigSeo Crearon el Theme Orbital, y fueron de los primeros en innovar con este tipo de menu, Haciendo que el menu hamburquesa que antes se situaba arriba de todo el contenido del post...
Baje A la altura del pulgar en los dispositivos moviles, haciendolo aun mas accesible.
ojo, para que no vengan a sermonearme luego, yo uso el sistema de navegación del menu orbital tanto para version movil como para la version de pc, se que diran que hay que pensar en la regla de los 3 clicks, pero mi idea es testear y sacar mis propias conclusiones.
Mapa de sitio Desplegable
Estos menús suelen aparecer cuando el usuario mueve el cursor sobre el enlace de navegación o el logotipo de un sitio web. El menú desplegable suele estar organizado en secciones y subsecciones, por lo que es más fácil para los usuarios encontrar lo que buscan.
Como Hacer un Menu de Navegacion Desplegable en HTML y CSS
Inicialmente, para hacer un enú desplegable tenias que depender de lenguajes de secuencias de comandos como Javascrit,
Pero hoy en dia la cosa a cambiado puesto que también se pueden crear con solo html y css.
acontinuacion te dejo los codigos de ejemplo para que los implementes en tu pagina
<div class="dropdown">
<button>HubSpot Resources</button>
<div class="dropdown-content">
<a href="https://www.davidlimonche.com/">david limonche</a>
<a href="https://www.youtube.com/">YouTube</a>
</div>
</div>
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
overflow: auto;
box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
display: block;
color: #000000;
padding: 5px;
text-decoration: none;
}
.dropdown-content a:hover {
color: #FFFFFF;
background-color: #00A4BD;
}
Barra de navegacion Horizontal
Las barras de navegación horizontales son una excelente manera de hacer que su sitio web sea más fácil de usar. Permiten que las personas encuentren lo que buscan sin tener que desplazarse hacia abajo en la página.
Si tiene mucho contenido en su sitio web, las barras de navegación horizontales pueden ayudar a las personas a encontrar lo que buscan más rápido.
En pocas palabras, viene siendo el clasico Menú estándar de escritorio de toda la vida..
Como Hacer una Barra de Menu Horizontal con HTML y CSS
aqui te dejo los codigos para que los copies
<ul class="horizontal">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>
ul.horizontal{margin:0;padding:0;}
ul.horizontal li{display:block;float:left;padding:0 10px;}
Navbar flotante en la parte superior
Algunos de los beneficios de tener una barra de navegación flotante o sticky navigation es que puede reducir la necesidad de desplazarse hacia arriba del contenido para usar el menu ya que este te estara siguiendo a medida que lees tus post favoritos
Cómo hacer un navbar fijo con HTML y css
Aqui estan los codigos para que puedas crear un menú fijo que este posicionado arriba y siga al usuario mientras navega
<header>
<section class="wrapper">
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Cursos</a></li>
<li><a href="#">Preguntame algo</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</section>
</header>
.wrapper {width: 80%;margin: auto;overflow:hidden;}
header {background: rgba(0,0,0,0.9);width: 100%;position: fixed;z-index: 10;}
nav {float: left; /* Desplazamos el nav hacia la izquierda */}
nav ul {list-style: none;overflow: hidden; /* Limpiamos errores de float */}
nav ul li {float: left;font-family: Arial, sans-serif;font-size: 16px;}
nav ul li a {display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
padding: 20px;color: #fff;text-decoration: none;}nav ul li:hover {background: #3ead47;}.contenido {padding-top: 80px;}
espero que los codigos te hayan sido de utilidad, si crees quedeberia añadir un nuevo menu a la lista.. mencionalo en los comentarios :)
Me Facina Crear webs y optimizarlas con seo para ver como aparecen en el top 1.