Aprenda a crear un menú de navegación lateral fijo con CSS. https://codepen.io/frontend-club/pen/jOgWazJ Crea un sidebar Paso 1) Marcado HTML <!-- Barra lateral (sidebar) --> <div class="sidenav"> <a href="#nosotros">Nosotros</a> <a href="...
Aprende cómo añadir un cuadro de búsqueda dentro de un menú de navegación responsive. https://codepen.io/frontend-club/pen/vYoNZVj Crea una barra de búsqueda Paso 1) Marcado HTML <div class="topnav"> <a class="active" href="#home">Home</a> <...
Crearemos un menú con cuadro de búsqueda para filtrar enlaces con JavaScript. Crear menú de búsqueda <input type="text" id="buscar" onkeyup="funcionBuscar()" placeholder="Buscar..."/> <ul id="menu"> <li><a href="#">HTML</a></li> <li><a href=...
Crea una barra de navegación responsive con íconos, usando CSS. Ejemplo: https://codepen.io/frontend-club/pen/rNgKmze Referencias El contenido de este artículo es inspiración y traducción de: How TO - Navbar with Icons "La mejor manera de apren...
Aprende a crear una barra de "navegación dividida" usando CSS. Ejemplo: https://codepen.io/frontend-club/pen/bGyaymq Referencias El contenido de este artículo es inspiración y traducción de: How TO - Split Navigation "La mejor manera de aprende...
Aprende a crear un menú de navegación superior responsive, usando CSS y JavaScript. Ejemplo: https://codepen.io/frontend-club/pen/MWdrdBQ Referencias El contenido de este artículo es inspiración y traducción de: How TO - Responsive Top Navigation ...
Crea pestañas mostrando contenido, con el selector ::hover, usando HTML, CSS y JavaScript. Ejemplo: https://codepen.io/frontend-club/pen/mdYqeJM Referencias El contenido de este artículo es inspiración y traducción de: How TO - Hover Tabs "La me...
Crea pestañas de contenido completo, usando HTML, CSS y JavaScript. Descarga el código fuente y personaliza según tus necesidades. Ejemplo: https://codepen.io/frontend-club/pen/BaemNJZ Referencias El contenido de este artículo es inspiración y trad...
Crea pestañas con encabezados, usando HTML, CSS y JavaScript. Ejemplo: https://codepen.io/frontend-club/pen/BaewoVE Marcado HTML <div id="Lima" class="tabcontent"> <h1>Lima</h1> <p>Lima es la ciudad capital de Perú.</p> </div> <div id="Car...
Crea una pestaña vertical paso a paso, usando HTML, CSS y JavaScript. Ejemplo: https://codepen.io/frontend-club/pen/mdYBeRL Marcado HTML <h2>Pestañas verticales</h2> <p>Haz clic en los botones dentro de la pestaña del menú:</p> <div class="tab"> ...
