06/02/2014, 05:01
|
 | | | Fecha de Ingreso: junio-2010
Mensajes: 109
Antigüedad: 14 años, 5 meses Puntos: 1 | |
| Respuesta: menú vertical - efectos y posicion
Código:
<body>
<header id="header" class="clearfix">
<section id="header-top" class="menu clearfix">
<nav id="navIzquierda" >
<ul id="main-menu-Izq" class="inline hi-icon-effect-4b">
<li class="menu-i01 first"><a href="/" id="i01">SERVICIOS</a></li>
<li class="menu-i02"><a href="/" id="i02">GUIA</a></li>
<li class="menu-i03"><a href="/" id="i03">INFORMACION</a></li>
<li class="menu-i04"><a href="/" id="i04">REVISTA</a></li>
<li class="menu-i05"><a href="/" id="i05">FACTURA</a></li>
</ul>
</nav>
<div id="logoMenu">
<a id="logoG" class="logoG" title="Cooperativa de Servicios Publicos de Colonia Caroya y Jesus Maria Ltda." href="/">
CSPCCJM
</a>
</div>
<nav id="navDerecha">
<ul id="main-menu-Der" class="inline">
<li class="menu-d01 first"><a href="https://srvmail.coop5.com.ar/roundcube/" id="d01">WEBMAIL</a></li>
<li class="menu-d02"><a href="/" id="d02">CONTACTO</a></li>
<li class="menu-d03"><a href="/" id="d03">CLIMA</a></li>
<li class="menu-d04"><a href="/" id="d04">BUSCAR</a></li>
<li class="menu-d05"><a href="/" id="d05">SESION</a></li>
</ul>
</nav>
</section>
<section id="buttonNav">
<nav id="navInferior" class="clearfix">
<ul id="main-menu-Inf" class="inline">
<li class="menu-b01"><a href="/" id="b01">SERVICIOS</a></li>
<li class="menu-b02"><a href="/" id="b02">GUIA</a></li>
<li class="menu-b03"><a href="/" id="b03">INFORMACION</a></li>
<li class="menu-b04"><a href="/" id="b04">FACTURA</a></li>
<li class="menu-b05"><a href="/" id="b05">WEBMAIL</a></li>
<li class="menu-b06"><a href="/" id="b06">CONTACTO</a></li>
<li class="menu-b07"><a href="/" id="b07">SESION</a></li>
</ul>
</nav>
</section>
</header>
<div id="global" class="clearfix">
<div id="fondo-vmenu"></div>
<nav id="vertical-menu">
<!-- <div class=""> <input type="text" /><input type="button" text="GUIA"/></div> -->
<h3>SERVICIOS</h3>
<div>
<a href="/">ENERGIA</a>
<a href="/">AGUA POTABLE</a>
<a href="/">TELEFONIA</a>
<a href="/">INTERNET</a>
<a href="/">FABRICA DE POSTES</a>
<a href="/">BANCO DE SANGRE</a>
<a href="/">OBRA SOCIAL</a>
<a href="/">ORTOPEDICOS</a>
<a href="/">SEPELIOS Y SUBSIDIOS</a>
<a href="/">SERV. DE AMBULANCIAS</a>
</div>
<h3>INSTITUCIONAL</h3>
<div>
<a href="/">NOSOTROS</a>
<a href="/">HORARIOS DE ATENCION</a>
<a href="/">LUGARES DE PAGO</a>
<a href="/">OFICINAS COMERCIALES</a>
<a href="/">RECURSOS HUMANOS</a>
<a href="/">REVISTA</a>
<a href="/">VENCIMIENTOS</a>
</div>
<h3>UTILIDADES</h3>
<div>
<a href="/">CONSUMO DE ARTEFACTOS</a>
<a href="/">ENLACES RECOMENDADOS</a>
<a href="/">IMPRIMA SU FACTURA</a>
<a href="/">MEDIOS LOCALES</a>
</div>
<h3>USUARIO</h3>
<div>
<a href="/">REGISTRARSE</a>
<a href="/">INGRESAR</a>
<a href="/">RECUPERAR CONTRASEÑA</a>
<a href="/">CUENTA CORRIENTE</a>
<a href="/">CARGAR CURRICULUM</a>
<a href="/">VER CONSUMOS</a>
<a href="/">DECLARACION DE ELECTRODOMESTICOS</a>
<a href="/">CLIMA</a>
<a href="/">CORREO ELECTRONICO</a>
<a href="/">ENVIAR UN MAIL</a>
<a href="/">SALIR</a>
</div>
</nav>
<div class="container" style="height: 800px;">
</div>
</div>
<footer id="footer">
<!-- ACCESOS -->
<div id="topfooter">
<nav id="accesos" class="accesos clearfix">
<ul class="inline">
<li class="menu-f01"><a class="tooltips" href="/" id="f01"><span>NOTICIAS</span></a></li>
<li class="menu-f02"><a class="tooltips" href="/" id="f02"><span>FACTURAS</span></a></li>
<li class="menu-f03"><a class="tooltips" href="/" id="f03"><span>INFORMACION</span></a></li>
<li class="menu-f04"><a class="tooltips" href="/" id="f04"><span>MOVIL</span></a></li>
<li class="menu-f05"><a class="tooltips" href="/" id="f05"><span>REVISTA</span></a></li>
<li class="menu-f06"><a class="tooltips" href="/" id="f06"><span>WEBMAIL</span></a></li>
<li class="menu-f07"><a class="tooltips" href="/" id="f07"><span>CONTACTO</span></a></li>
</ul>
</nav>
</div>
<!-- PIE -->
<div id="pie" class="pie clearfix">
<div class="copy">
<span>© 2012 - 2013 Todos los derechos reservados.</span>
</div>
</div>
</footer>
<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- MODERNIZR -->
<script src="js/modernizr.custom.js"></script>
<!-- JQUERI PARA IU -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</body>
</html>
Código:
div#fondo-vmenu{position: fixed;top:0;height: 100%;background: #143C5C; width: 16%; z-index: -1000;}
div.container{width: 80%; float: left;}
nav#vertical-menu{width: 16%; float: left; height: 100%;}
nav#vertical-menu h3{font-family: 'bebas'; color: #FFD9DA;font-size: 1.3em;margin: 0;}
nav#vertical-menu a {font-family: 'muli';display: block;color: #fff;font-size: 1.2em; margin-left: 15px; border-bottom: 1px solid #258ecd;padding: 0.4em;}
nav#vertical-menu a:hover{background: #2A7EC2; text-indent: 1em; font-size: 1.2em; font-weight: bold;}
|