martes, 11 de julio de 2017







































Amigos les comparto este pequeño aporte, espero y sea de su agrado.


CODIGO :

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css\MenuHorizontalResponsive\Style.css">
<link rel="stylesheet" href="style.css">
    <title>Menu Responsive</title>
  </head>
  <body>
    <header>
      <input type="checkbox" id="btn-menu">
      <label for="btn-menu"> <i class="icon icon-list"></i></label>
      <nav class="menu">
        <ul>
          <li><a href="#"><span class="icon icon-enter"></span> INICIO</a></li>
          <li><a href="#"><span class="icon icon-sphere"></span> SERVICIO</a></li>
          <li><a href="#"><span class="icon icon-users"></span> CLIENTES</a></li>
          <li><a href="#"><span class="icon icon-paste"></span> PEDIDOS</a></li>
          <li><a href="#"><span class="icon icon-home"></span> ALMACEN</a></li>
        </ul>
      </nav>
    </header>
<main>
  <h1>MENU HORIZONTAL RESPONSIVE CON CSS3</h1>
  <p>      CSS. Hojas de Estilo en Cascada
      (Cascading Style Sheets) es el lenguaje utilizado para describir
      la presentación de documentos HTML o XML, esto incluye varios lenguajes
      basados en XML como son XHTML o SVG</p>
</main>
  </body>
</html>



CSS:

body{
  margin: 0;
  font-family: sans-serif;
}

header{
  height: auto;
  width: 70%;
  background: rgb(44,125,176);
}
#btn-menu{
  display: none;
}

.icon{
  line-height: 60px;
  font-size: 20px;
  color: rgb(250, 250, 250);
}
/*manipulacion del icono de menu*/
header label{
  display: none;
  width: 30px;
  height: 30px;
  padding: 10px;
  padding-right: 1px solid rgb(25,80,115);
}
header label:hover{
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
}
.menu ul{
  margin: 0;
  list-style: none;
  padding: 0;
  display: flex;
}

.menu li{
  border-right: 1px solid rgb(25,80,115);
}

.menu li:hover{
  background: rgba(0,0, 0, 0.6);
}
.menu li a{
  display: block;
  padding: 15px 20px;
  color: rgb(255, 255, 255);
  text-decoration: none;

}
@media (max-width:768px) {
  header label{
    display: block;
  }
  .menu{
    position: absolute;
    background: rgb(44,125,176);
    width: 70%;
    margin-left: -70%;
    transition: all 0.3s;
  }
  .menu ul{
    flex-direction: column;
  }
  .menu li{
    border-top: 10px solid rgb(25,80,115);
  }
  #btn-menu:checked ~.menu{
  margin: 0;
  }

}



1 comentario:

  1. feliz día, soy nuevo en esto uso el editor de texto sublime text y no me funciona del todo al reducir la pantalla desaparece la lista y otra duda que tengo cuando se hace referencia en los li por ejemplo el primero este codigo class="icon icon-enter" es el nombre de la clase pero el icon-center que a segun es el icono de donde sale?

    ResponderEliminar

Checa esto

¿Que temas debe de haber en la pagina?

Posts Populares

Popular Posts

Recent Posts