css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<nav class="nav">
  <input class="chk-nav" type="checkbox" id="btn-navbar" />
  <label for="btn-navbar"><i class="fa fa-bars"></i></label>
  
  <ul class="navbar">
    <li><a href="#"><i class="fa fa-home"></i>Inicio</a></li>
    <li>
        <label class="lbl-nav" for="btn-subnav1">
          <i class="fa fa-graduation-cap"></i>Cursos
        </label>
        <input class="chk-nav" type="checkbox" id="btn-subnav1"/>
      
        <ul class="sub-nav">
          <li><a href="#">Excel básico</a></li>
          <li><a href="#">Diseño web</a></li>
          <li><a href="#">Computación básica</a></li>
          <li><a href="#">Fundamentos de programación</a></li>
        </ul>
              
    </li>
    <li>
        <label class="lbl-nav" for="btn-subnav2">
             <i class="fa fa-info-circle"></i>Nosotros
        </label>
        <input class="chk-nav" type="checkbox" id="btn-subnav2" />
        
        <ul class="sub-nav">
            <li><a href="#una">Historia</a></li>
            <li><a href="#">Servicios</a></li>
        </ul>
    </li>
    <li><a href="#"><i class="fa fa-envelope"></i>Contáctenos</a></li>
  </ul>
  
</nav>


<section>
  <h1>Menu responsive con css</h1>
  <small>Made with <span>&#9829;</span> by Edwin Ramírez</small>
  <hr />
  <br />
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id neque quae, necessitatibus possimus minima sed ipsa asperiores. Illum sunt voluptas sit beatae corporis deleniti delectus labore. Impedit aliquid ducimus consequuntur? Et unde nemo mollitia similique ea velit, veritatis nulla dolorem repudiandae deleniti, illum doloremque, molestiae expedita blanditiis. Atque odit beatae itaque ducimus amet odio, dolores adipisci fugiat, optio eaque quae, necessitatibus libero quis ea, deleniti assumenda ipsum quisquam? Amet, aperiam sapiente eligendi cumque praesentium doloribus voluptatum dolore debitis mollitia labore, harum iure. Porro, consequatur tenetur similique totam perspiciatis fugiat aliquid magni? Facere fugit laborum ipsum molestias voluptatum quidem numquam ducimus consequatur omnis obcaecati, harum, laboriosam necessitatibus officiis aut perferendis. At dolorum totam ad praesentium delectus qui pariatur, reiciendis voluptates eligendi quo maxime deserunt optio voluptatum inventore quibusdam odit beatae esse, blanditiis, atque iure voluptatem accusantium non facilis tempore? Inventore recusandae praesentium amet molestiae modi similique beatae consectetur provident a esse, at, ipsa voluptas quam deleniti voluptate quasi ex quas in, accusantium? Earum quam, a officia voluptate. Facilis enim, commodi adipisci voluptatibus doloremque eligendi voluptate cumque minima ratione aliquid non maxime delectus officiis nesciunt corporis. Tempora harum libero numquam nihil fugiat distinctio commodi iusto et, ex corporis. Fugit error voluptate minima quo excepturi, cupiditate dolor hic, quos neque ipsam distinctio voluptatibus, minus rem laborum nobis perferendis. Tempora et quis ipsa suscipit quas, minima esse, quae praesentium odio officia! Quasi voluptates, eaque pariatur impedit id consectetur facilis expedita eveniet perferendis alias rerum illum minus suscipit maxime aliquid, nesciunt obcaecati ab repudiandae quis iure nostrum nam reprehenderit doloremque at! Cupiditate minus nemo ad tenetur eaque! Laudantium distinctio reiciendis, debitis sed totam blanditiis deserunt quibusdam praesentium suscipit placeat non repellendus ullam ipsam modi unde quod nostrum facere illo repellat ab ipsa saepe. Recusandae consequuntur eius, mollitia, quae modi ex quibusdam sint amet tenetur officiis provident totam necessitatibus a, quis laborum harum. Aliquid quod porro, aut totam aliquam temporibus obcaecati ea magni quas autem ab consectetur ipsum fugiat in rem amet quia incidunt officiis. Molestiae asperiores dolor iure, consequuntur cum sapiente quo. Suscipit cumque voluptatibus veniam est unde, eligendi possimus delectus fuga laborum dignissimos placeat neque quis sequi commodi odio aspernatur. Ad repellat accusantium aliquid autem laborum harum iure, odit incidunt quod, similique quidem repellendus, aspernatur iste veniam asperiores amet. Tempore voluptatem assumenda obcaecati architecto, veniam sint ducimus nulla, nemo, dolor doloribus laborum dolore temporibus deleniti adipisci ipsum sunt, inventore? Unde illum porro eum necessitatibus possimus consectetur expedita hic id sint at, esse fugit, iste repudiandae perferendis ipsum labore delectus ipsam voluptas voluptatum quasi ab. Saepe, magnam aperiam mollitia laborum rerum nihil quis, praesentium nisi illo ratione, earum tempora. Quae laudantium ullam reprehenderit quibusdam debitis vero rerum numquam odio repellendus ea in ratione corporis cupiditate rem maiores quidem voluptatibus totam quo quasi eligendi quos recusandae excepturi vel, iusto? Similique voluptate modi libero corporis corrupti voluptas impedit quasi sed quam dolores aliquid delectus sit, quia ad quas facere alias molestias quo accusantium qui autem enim reiciendis voluptatum. Delectus officia in cumque quae magni voluptatum est quasi!
 </p>
</section>


            
          
!
            
              


/*_________________________________________________________________

                      $VARIBLES PARA COLORES 
____________________________________________________________________*/

$baseColor:#252525;
$secondaryColor:#F27229;
$compColor:#222;


$linkColor:#E5E5E5;
$linkColorHover:#FFB503;

body{
 font-family: 'Lato', sans-serif;
 font-size:100%;
 background-color:darken($compColor,5%);
}





/*_________________________________________________________________

                      $RESET
____________________________________________________________________*/

*,*:before,*:after{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}





/*_________________________________________________________________

                      $ESTILOS GENERALES 
____________________________________________________________________*/

ul{
    list-style-type:none;
  }

a,label{
  display:block;
  font-size:1.25rem;
  text-decoration:none;
  color:$linkColor;
  padding:1rem 1rem 1rem 3rem;
  cursor:pointer;
  transition:all .3s ease;
  border-left:4px solid rgba(255,255,255,0);
  
  &:hover{
    color:$linkColorHover;
     border-left:4px solid lighten($linkColorHover,5%);
   }
  }



.chk-nav{
  display:none;
}




/*_________________________________________________________________

                      $NAV <nav class"nav"></nav>
____________________________________________________________________*/

.nav{
  width:100%;
  position:fixed;//para tener el menu siempre visible
  z-index:10;
 
}





/*_________________________________________________________________

                      $NAVBAR <ul class"nav-bar"></ul> 
____________________________________________________________________*/

.navbar{
    width:50%;
    .sub-nav{ display:block;}
    }
    
.sub-nav a{
  padding-left:2rem;
  font-size:1rem;
}

.navbar > li{
   border-top:1px solid rgba(255,255,255,.2);
   position:relative;
   }




/*_________________________________________________________________

$ESTILOS PARA MODIFICAR EL LABEL SECUNDARIO DEL SUBMENU
____________________________________________________________________*/


.navbar .fa{
  position:absolute;
  left:1rem;
}


.lbl-nav:after{
  content:"\25BC";
  font-size:1rem;
  position:absolute;
  width:100%;
  text-align:right;
  left:0;
  padding-right:.75rem;
  line-height:1.5rem;
  
  }




/*_________________________________________________________________

$ESTILOS PARA MODIFICAR EL LABEL PRINCIPAL O ICONO DE HAMBURGUESA
____________________________________________________________________*/

label[for="btn-navbar"]{
 
  padding:.5rem 1rem .5rem 1rem;
  font-size:2rem;
  text-align:left;//PARA ALINEAR ICONO DERECHA,CENTRO,IZQUIERDA
  color:$linkColor;
  background-color:$baseColor;
    
  &:hover{
   color:$linkColor;
   border-left:4px solid rgba(0,0,0,0);
  }
  
}




/*_________________________________________________________________

$ESTILOS PARA ESCONDER LA LISTA PRINCIPAL DEL MENU
____________________________________________________________________*/

.navbar{
  margin-left:-100%;
  height:100vh;
  transition:all .5s ease;
  background-color:$baseColor;
  
}

.chk-nav:checked ~ .navbar{
   margin-left:0;
   
}



/*_________________________________________________________________

$ESTILOS PARA ESCONDER LOS SUBMENUS 
____________________________________________________________________*/

.navbar .sub-nav{ 
   display:none;
  }
    
.chk-nav:checked ~ .sub-nav{
   display:block;
}






/****************_________________________________________________________________*******************

                                $ESTILOS PARA DESKTOP MEDIAQUERYS
****************____________________________________________________________________*****************/

      @media all and (min-width:48rem){

        a,label{
          display:block;
          padding:1rem 1.25rem;
          border-right:1px solid rgba(255,255,255,.2);
        }

           /*_________________________________________________________________

            $ESTILOS PARA NAVBAR 
          ____________________________________________________________________*/

          .navbar{
            max-width:1200px;
            width:100%;
            height:auto;
            display:table;
            table-layout:fixed;
            margin:auto;
          }
          .navbar>li{
            display:table-cell;

          }

          .chk-nav:checked ~ .navbar{
             margin:auto;
          }





          /*_________________________________________________________________

            $ESTILOS PARA ESCONDER EL ICONO DE HAMBURGUESA
          ____________________________________________________________________*/
          label[for="btn-navbar"]{
            display:none;
          }





          /*_________________________________________________________________

          $ESTILOS PARA el SUBMENU 
          ____________________________________________________________________*/

          .navbar .sub-nav{ 
             display:none;
              }

          .navbar>ul>li{
            postion:relative;
          }

          .chk-nav:checked ~ .sub-nav{
             display:block;
          }

          .navbar .sub-nav{
            width:100%;
            background-color:$compColor;
            position:absolute;
             }

          .sub-nav a{
             font-size:1rem;
             border-top:1px solid rgba(255,255,255,.2);
             
          }



          /*_________________________________________________________________

                  $ESTILOS PARA LOS ICONOS
            ____________________________________________________________________*/
              .navbar .fa{
                position:static;
                padding-right:.3rem;
               }


            .lbl-nav:after{
              top:0;
              height:100%;
              line-height:3.5rem;

              }
          
        /*_________________________________________________________________

                  $ESTILOS PARA EL MENU PRINCIPAL
         ____________________________________________________________________*/
        
          .navbar > li{
            position:relative;
            border-top:4px solid $linkColorHover;
             }
        
          .navbar > li>a:hover,label:hover{
            border-left:4px solid rgba(0,0,0,0);
             }




      }




/*_________________________________________________________________

  $ESTILOS PARA EL SECTION  ESTO NO TIENE NADA QUE VER CON EL MENU
____________________________________________________________________*/

section{
  width:90%;
  padding:3.5rem;
  margin:auto;  
  color:$linkColor;
  text-align:center;
  transition:all .4s ease;
  
  small{
    display:block;
     padding-bottom:1rem;
     font-size:1rem;
  }
  
  span{
    
    color:red;
    font-size:1.5rem;
  }

}




































            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console