Ejemplos Adicionales

Ejemplo 1. Menú Animado con jQuery

HTML


      <html>
        <head>
          <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
            rel="stylesheet">
          <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300'
            rel='stylesheet' type='text/css'>
          <link href='style.css' rel='stylesheet'>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <script src="app.js"></script>
        </head>
        <body>
          <div class="menu">
            <!-- Menu icon -->
            <div class="icon-close">
              <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
            </div>
            <!-- Menu -->
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Help</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <!-- Main body -->
          <div class="jumbotron">
            <div class="icon-menu">
              <i class="fa fa-bars"></i>
              Menu
            </div>
          </div>
        </body>
      </html>

JS


      var main = function() {
        /* Push the body and the nav over by 285px over */
        $('.icon-menu').click(function() {
          $('.menu').animate({
            left: "0px"
          }, 200);
          $('body').animate({
            left: "285px"
          }, 200);
        });
        /* Then push them back */
        $('.icon-close').click(function() {
          $('.menu').animate({
            left: "-285px"
          }, 200);
          $('body').animate({
            left: "0px"
          }, 200);
        });
      };
      $(document).ready(main);

CSS


      /* Initial body */
      body {
        left: 0;
        margin: 0;
        overflow: hidden;
        position: relative;
      }
      /* Initial menu */
      .menu {
        background: #202024
          url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png')
          repeat left top;
        left: -285px;  /* start off behind the scenes */
        height: 100%;
        position: fixed;
        width: 285px;
      }
      /* Basic styling */
      .jumbotron {
        background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
        height: 100%;
        -webkit-background-size: cover;
               -moz-background-size: cover;
                 -o-background-size: cover;
                    background-size: cover;
      }
      .menu ul {
        border-top: 1px solid #636366;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .menu li {
        border-bottom: 1px solid #636366;
        font-family: 'Open Sans', sans-serif;
        line-height: 45px;
        padding-bottom: 3px;
        padding-left: 20px;
        padding-top: 3px;
      }
      .menu a {
        color: #fff;
        font-size: 15px;
        text-decoration: none;
        text-transform: uppercase;
      }
      .icon-close {
        cursor: pointer;
        padding-left: 10px;
        padding-top: 10px;
      }
      .icon-menu {
        color: #fff;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        padding-bottom: 25px;
        padding-left: 25px;
        padding-top: 25px;
        text-decoration: none;
        text-transform: uppercase;
      }
      .icon-menu i {
        margin-right: 5px;
      }

Ejemplo 2. Menú Animado con HTML5 y CSS3

HTML


  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Menú</title>
    <link rel="stylesheet" href="estilo.css">
    <link rel="stylesheet" href="fonts.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#"><span class="primero"><i class="icon icon-home"></i></span>Inicio</a></li>
          <li><a href="#"><span class="segundo"><i class="icon icon-price-tag"></i></span>Catgorias</a>
            <ul>
              <li><a href="#">Item #1</a></li>
              <li><a href="#">Item #2</a></li>
              <li><a href="#">Item #3</a></li>
              <li><a href="#">Item #4</a></li>
              <li><a href="#">Item #5</a></li>
            </ul>
          </li>
          <li><a href="#"><span class="tercero"><i class="icon icon-menu"></i></span>Servicios</a></li>
          <li><a href="#"><span class="cuarto"><i class="icon icon-briefcase"></i></span>Acerca de</a></li>
          <li><a href="#"><span class="quinto"><i class="icon icon-pencil"></i></span>Contacto</a></li>
        </ul>

      </nav>
    </header>
  </body>
  </html>

CSS


  * {
    margin: 0;
    padding: 0;
  }
  header {
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
    height: 150px;
    position: relative;
  }
  nav {
    top: -20px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 20px auto;
    width 90%;
    max-width: 1000px;
  }
  nav ul {
    list-style: none;
  }
  nav > ul {
    display: table;
    width: 100%;
    background: #000;
    position: relative;
  }
  nav > ul li {
    display: table-cell;
  }

  /* Submenu */
  nav > ul > li:hover > ul {
    display: block;
    height: 100%;
  }
  nav > ul > li > ul {
    display: block;
    position: absolute;
    background: #000;
    left: 0;
    right: 0;
    overflow: hidden;
    height: 0%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }
  nav > ul li a {
    color: #fff;
    display: block;
    line-height: 20px;
    padding: 20px;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }
  nav > ul > li > ul > li a:hover {
    background: #5da5a2;
  }
  nav > ul > li > a span {
    background: #174459;
    display: block;
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: -55px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }
  nav > ul > li > a span .icon {
    display: block;
    line-height: 60px;
  }
  nav > ul > li > a:hover > span {
    top: 0;
  }
   /* Colores */
   nav ul li a .primero {
     background: #0e5061;
   }
   nav ul li a .segundo {
     background: #5da5a2;
   }
   nav ul li a .tercero {
     background: #f25724;
   }
   nav ul li a .cuarto {
     background: #174459;
   }
   nav ul li a .quinto {
     background: #37a4b9;
   }

CSS Adicional (Iconos Personalizados)


  @font-face {
  	font-family: 'icomoon';
  	src:url('fonts/icomoon.eot?-lugcb');
  	src:url('fonts/icomoon.eot?#iefix-lugcb') format('embedded-opentype'),
  		url('fonts/icomoon.ttf?-lugcb') format('truetype'),
  		url('fonts/icomoon.woff?-lugcb') format('woff'),
  		url('fonts/icomoon.svg?-lugcb#icomoon') format('svg');
  	font-weight: normal;
  	font-style: normal;
  }

  [class^="icon-"], [class*=" icon-"] {
  	font-family: 'icomoon';
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
  	line-height: 1;

  	/* Better Font Rendering =========== */
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  }

  .icon-home:before {
  	content: "\e600";
  }
  .icon-pencil:before {
  	content: "\e601";
  }
  .icon-price-tag:before {
  	content: "\e602";
  }
  .icon-briefcase:before {
  	content: "\e603";
  }
  .icon-menu:before {
  	content: "\e604";
  }