Sistema de navegación adaptable para todos los dispositivos-menú CodeHim

Vista prévia

Descripción

El menú de CodeHim es un sistema de navegación adaptable para todos los dispositivos. Escrito en HTML y CSS.

Convierte el menú desplegable horizontal original en una navegación de cajón en dispositivos móviles.

Más características

• 5 temas incorporados.
• Colores de fondo brillantes.
• Sombra de texto.
• Fijo en la parte superior.

Funcionamiento

Cargue los estilos CSS de núcleo, tema y efecto en la sección head del documento.

<!--Menu CSS-->
<link rel="stylesheet" href="css/menu/menu.css" />
<!--Menu Effects CSS-->
<link rel="stylesheet" href="css/menu/effects.css" />
<!--Menu Themes CSS-->
<link rel="stylesheet" href="css/menu/themes.css" />

Cargue el Font awesome para los iconos (opcional).

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

El código HTML para crear un sistema de navegación predeterminado.

<input type="checkbox" name="checkbox" id="menu-trigger" class="trigger">
<label for="menu-trigger">
<div class="codehim-menu-trigger"> </div>
</label>
<nav>

<ul class="codehim-menu tema lindo">


<li> <a href="#"> <i class="fa fa-home icon"></i> </a> </li>


<li class="dropdown has-four-item"> <a href="#Bros"> Browsers



<div class="arrow"> </div>



</a>



<ul>




<li><a href="#">Chrome</a></li>




<li><a href="#">Firefox</a></li>




<li><a href="#">Safari</a></li>




<li><a href="#">Opera</a></li>



</ul>


</li>


<li class="dropdown has-five-item"> <a href="#Web">Web Development



<div class="arrow"></div>



</a>



<ul class="large">




<li><a href="#">CSS3</a></li>




<li><a href="#">HTML5</a></li>




<li><a href="#">JavaScript</a></li>




<li><a href="#">Bootsrap</a></li>




<li><a href="#">Jquery </a></li>



</ul>


</li>


<li class="dropdown has-six-item"> <a href="#Pro">Products



<div class="arrow"></div>



</a>



<ul class="large">




<li><a href="#">Item Name 1</a></li>




<li><a href="#">Item Name 2</a></li>




<li><a href="#">Item Name 3</a></li>




<li><a href="#">Item Name 4</a></li>




<li><a href="#">Item Name 5 </a></li>




<li><a href="#">Item Name 6 </a></li>



</ul>


</li>


<li class="more-item">



<label for="menu-trigger">



<span></span>



<div class="touch"></div>



</label>


</li>


<span class="codehim-more">


<li> <a href="#"> About</a></li>


<li> <a href="#"> Contact</a></li>


<li> <a href="#"> Tour</a></li>


</span>

</ul>
</nav>

Cambie el tema predeterminado reemplazando la clase de tema:

• tema lindo
• naranja-tema
• azul-tema
• tema rosado
• tema verde

<ul class="codehim-menu tema lindo">

...
</ul>

Haz que la navegación se pegue en la parte superior del pergamino.

<ul class="codehim-menu azul-tema fixed-top">

...
</ul>