[SOLUCIONADO] menú vertical - efectos y posicion

difilippocarlos · #1 (**permalink**) 05/02/2014, 07:22

Hola a todos... aqui les dejo una imagen de lo q seria la "Maqueta" de la web.

El menu superior (celeste): Va cambiando de tamaño y zona con el responsive

La parte blanca seria donde va a ir el contenido de la pagina, es el q cambiara a medida que el usuario vaya navegando.

el Footer (gris) es de tamaño fijo, a lo sumo desaparece cuando se accede desde movil.

Ahora con lo que necesito ayuda es con el Menu Vertical (Naranja):
Tiene como caracteristica ser un listado de link (como cualquier otro navegador).
Esta compuesto por 4 secciones, separadas por un titulo.

1- Quiero darle un efecto atractivo, pero no me dejan usar acordeon (ni nada que oculte parte de los items)
2- Que se mantenga siempre entre el menu superior y el footer, sin importar el alto del contenido (blanco).

La verdad no se si es que tengo la cabeza quemada o que, pero no me esta saliendo... ahi les paso un poco el codigo q tengo...

pzin · #2 (**permalink**) 05/02/2014, 07:57

Pues quedamos a la espera del código.

difilippocarlos · #3 (**permalink**) 06/02/2014, 04:57

nooo.... lo habia puesto... no se q paso

ahi va de nuevo... no me deja... cuando pongo codigo me pasa a una codigo de verificacion y se clava

difilippocarlos · #4 (**permalink**) 06/02/2014, 05:01

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;}

difilippocarlos · #5 (**permalink**) 06/02/2014, 06:45

se me esta arruinando todo...

aca paso el codigo del css completo, solo funciona en chrome.

Lo divido en 2 partes pq no entra

Código:

/* new clearfix */
.main{visibility: hidden;}
#logoG {background: url('../img/SpriteLogoFinal.png')no-repeat -145px -167px ;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 
#logoG:hover {background: url('../img/SpriteLogoFinal.png')no-repeat -1px -170px;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 

#navIzquierda{visibility: hidden;}
#navDerecha{visibility: hidden;}

ul.inline{display:inline;padding-left:0;}
ul.inline li{display:inline;list-style-type:none;padding:0 0.5em;}
ul.inline li{float:left;padding:0;margin:0;}

#navInferior li a#b01{background: url('../img/SpriteWebNormal.png') no-repeat -407px -351px; float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b01:hover{background: url('../img/SpriteWebNormal.png') no-repeat -406px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b02{background: url('../img/SpriteWebNormal.png') no-repeat -203px -351px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b02:hover{background: url('../img/SpriteWebNormal.png') no-repeat -203px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b03{background: url('../img/SpriteWebNormal.png') no-repeat -406px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b03:hover{background: url('../img/SpriteWebNormal.png') no-repeat -406px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b04{background: url('../img/SpriteWebNormal.png') no-repeat -0px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b04:hover{background: url('../img/SpriteWebNormal.png') no-repeat 0 -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b05{background: url('../img/SpriteWebNormal.png') no-repeat -102px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b05:hover{background: url('../img/SpriteWebNormal.png') no-repeat -102px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b06{background: url('../img/SpriteWebNormal.png') no-repeat -203px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b06:hover{background: url('../img/SpriteWebNormal.png') no-repeat -203px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b07{background: url('../img/SpriteWebNormal.png') no-repeat -305px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
#navInferior li a#b07:hover {background: url('../img/SpriteWebNormal.png') no-repeat -305px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}

/*
#navFixed{width: 100%;}
*/

section.buttonset button {border: none;opacity: 0.5;background: url('../img/SpriteWebNormal.png') no-repeat -305px -435px;padding: 2.5em;display: block;cursor: pointer;margin: 10px 0;font-size: 0.8em;text-indent:-999em;}
section.buttonset button:hover {border: none;opacity: 1;background: url('../img/SpriteWebNormal.png') no-repeat -305px -435px;padding: 2.5em;display: block;cursor: pointer;margin: 10px 0;font-size: 0.8em;text-indent:-999em;}
section.buttonset button.active {border: none;opacity: 1;background: url('../img/SpriteWebNormal.png') no-repeat -305px -435px;padding: 2.5em;display: block;cursor: pointer;margin: 10px 0;font-size: 0.8em;text-indent:-999em;}


@media (max-width:330px){
    #navInferior ul#main-menu-Inf li:last-child{margin:0 0 0 80px;}
    #navInferior ul#main-menu-Inf li{margin:5px;}

    #header{margin: 0 !important; width: 100%;background: #2A7EC2; padding-top: 1px; border-bottom: 1px solid #2A7EC2; top:0; height: 450px;-webkit-box-shadow: 2px 3px 1px 0px #143C5C;box-shadow: 2px 3px 1px 0px #143C5C; height: 450px;}

    #logoMenu{width: 130px;margin: 0 auto; text-align: center;}

    #navInferior{width: 225px; margin: 0 auto;}
    #navInferior li{margin:0px;}
}

@media (min-width:330px) and (max-width:500px){
    #navInferior ul#main-menu-Inf li:last-child{margin:0 0 0 80px;}
    #navInferior ul#main-menu-Inf li{margin:5px;}

    #header{margin: 0 !important; width: 100%;background: #2A7EC2; padding-top: 1px; border-bottom: 1px solid #2A7EC2; top:0; height: 380px;-webkit-box-shadow: 2px 3px 1px 0px #143C5C;box-shadow: 2px 3px 1px 0px #143C5C; height: 380px;}
    #logoMenu{width: 130px;margin: 0 auto; text-align: center;}

    #navInferior{width: 225px; margin: 0 auto;}
    #navInferior li{margin:0px;}
}

@media (min-width:500px){
    .main{visibility: visible;}
    #header{margin: 0 !important; width: 100%;background: #2A7EC2; padding-top: 1px; border-bottom: 1px solid #2A7EC2; top:0; height: 210px;-webkit-box-shadow: 2px 3px 1px 0px #143C5C;box-shadow: 2px 3px 1px 0px #143C5C; height: 210px;}
    #logoMenu{width: 100px;margin: 0 auto; text-align: center;}
    #logoG {background: url('../img/SpriteLogoFinal.png')no-repeat -145px -167px ;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 
    #logoG:hover {background: url('../img/SpriteLogoFinal.png')no-repeat -1px -170px;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 

    #navInferior{width: 483px; margin: 0 auto;}
    #navInferior li{margin: 0 2px;}
}

@media (min-width:760px){
    #logoMenu{width: 100px;margin: 0 auto; text-align: center;}
    #logoG {background: url('../img/SpriteLogoFinal.png')no-repeat -145px -167px ;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 
    #logoG:hover {background: url('../img/SpriteLogoFinal.png')no-repeat -1px -170px;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 

    #navInferior{width: 595px; margin: 0 auto;}
    #navInferior li{margin: 0 10px;}
}

@media (min-width:916px){
    #navInferior{width: 735px; margin: 0 auto;}
    #navInferior li{margin: 0 20px;}
}

difilippocarlos · #6 (**permalink**) 06/02/2014, 06:46

Código:

@media (min-width:1200px){
    #header{margin: 0 !important; width: 100%;background: #2A7EC2; padding-top: 1px; border-bottom: 1px solid #2A7EC2; top:0; -webkit-box-shadow: 2px 3px 1px 0px #143C5C;box-shadow: 2px 3px 1px 0px #143C5C; height: 130px;}

    #navIzquierda{visibility: visible;}
    #navDerecha{visibility: visible;}
    #navInferior{visibility: hidden;}

    .menu #navIzquierda li a#i01{background: url('../img/SpriteWebNormal.png') no-repeat -407px -351px; float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i01:hover{background: url('../img/SpriteWebNormal.png') no-repeat -406px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i02{background: url('../img/SpriteWebNormal.png') no-repeat -203px -351px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i02:hover{background: url('../img/SpriteWebNormal.png') no-repeat -203px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i03{background: url('../img/SpriteWebNormal.png') no-repeat -406px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i03:hover{background: url('../img/SpriteWebNormal.png') no-repeat -406px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i04{background: url('../img/SpriteWebNormal.png') no-repeat -508px -351px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i04:hover{background: url('../img/SpriteWebNormal.png') no-repeat -508px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i05{background: url('../img/SpriteWebNormal.png') no-repeat -0px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navIzquierda li a#i05:hover{background: url('../img/SpriteWebNormal.png') no-repeat 0 -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}

    .menu #navDerecha li a#d01{background: url('../img/SpriteWebNormal.png') no-repeat -102px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d01:hover{background: url('../img/SpriteWebNormal.png') no-repeat -102px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d02{background: url('../img/SpriteWebNormal.png') no-repeat -203px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d02:hover{background: url('../img/SpriteWebNormal.png') no-repeat -203px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d03{background: url('../img/SpriteWebNormal.png') no-repeat -510px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d03:hover{background: url('../img/SpriteWebNormal.png') no-repeat -508px -255px;float:left;width: 65px;height: 65px;text-indent:1em;}
    .menu #navDerecha li a#d04{background: url('../img/SpriteWebNormal.png') no-repeat -102px -351px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d04:hover{background: url('../img/SpriteWebNormal.png') no-repeat -102px -435px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d05{background: url('../img/SpriteWebNormal.png') no-repeat -305px -172px;float:left;width: 65px;height: 65px;text-indent:-999em;}
    .menu #navDerecha li a#d05:hover{background: url('../img/SpriteWebNormal.png') no-repeat -305px -255px;float:left;width: 65px;height: 65px;text-indent:-999em;}

    .menu #navIzquierda li:first-child{padding-left: 25px;}
    .menu #navIzquierda li{padding-right: 25px;}
    .menu #navDerecha li:last-child{padding-right: 25px;}
    .menu #navDerecha li{padding-left: 25px;}

    #logoMenu{width: 100px;margin: 0 auto; text-align: center;}
    #logoG {background: url('../img/SpriteLogoFinal.png')no-repeat -145px -167px ;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 
    #logoG:hover {background: url('../img/SpriteLogoFinal.png')no-repeat -1px -170px;float:left;width: 122px;height: 106px;text-indent:-999em;padding: 5px;margin:0;} 

    #navIzquierda{text-align: left;margin-top: 50px;float:left;}
    #navDerecha{margin: 50px auto;float:right;}
}

div#tiempo_ampliado {position: absolute;top: 132px;right: 0;display: none;z-index: 100;}
.menu #navDerecha li a#d03:hover div#tiempo_ampliado {display: block;}
div#tiempo_ampliado{font-family: 'muli'; color: #fff;}
div#tiempo_ampliado table{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; border: 2px solid #143C5C;}
div#tiempo_ampliado table{ background-color: #2A7EC2; max-width: 450px;}
div#tiempo_ampliado th{font-size: 1.2em; padding-left: 0.5em;}
div#tiempo_ampliado #fecha{font-size: 1.3em; padding-left: 0.5em; padding-right: 1em;}
div#tiempo_ampliado #max,div#tiempo_ampliado #min{padding: 0.5em 0.5em 0.1em 0.5em; vertical-align: bottom; font-size: 1.1em;}
div#tiempo_ampliado td#imagen{height: 80px; text-align: center; vertical-align: middle; padding-left: 1em; padding-right: 2em;}
div#tiempo_ampliado td#imagen img{width: 120px;}
div#tiempo_ampliado .max,div#tiempo_ampliado .min{padding: 0 0.5em 0.5em 0.5em; vertical-align: top; font-size: 1.1em;}
div#tiempo_ampliado td#desc_temp{font-size: 1.4em; padding-right: 0.2em; text-align: right;}

div#fondo-vmenu{position: fixed;top:0;height: 100%;background: #143C5C; width: 300px; z-index: -1000;}
div.container{width: 82%; float: left;}
nav#vertical-menu{width: 300px; float: left; height: 100%;}
nav#vertical-menu h3{font-family: 'bebas'; color: #FFF;font-size: 1.5em; letter-spacing: 5px; margin-left: 15px;padding: 0.4em; margin-top: 1em;}
nav#vertical-menu a {font-family: 'muli';display: block;color: #fff;font-size: 1.2em; margin-left: 15px;padding: 0.4em;}
nav#vertical-menu a:hover{background: #2A7EC2; text-indent: 1em; font-size: 1.2em; font-weight: bold;}

@media (max-width:1800px){
    div.container{width: 80%;}
}

@media (max-width:1520px){
    div.container{width: 78%;}
}

@media (max-width:1380px){
    div.container{width: 76%;}
}
@media (max-width:1300px){
    div.container{width: 76%;}
    div#fondo-vmenu{width: 250px;} 
    nav#vertical-menu{width: 250px; float: left; height: 100%;}
    nav#vertical-menu h3{font-size: 1.4em; letter-spacing: 4px; margin-left: 15px;padding: 0.3em; margin-top: 1em;}
    nav#vertical-menu a {font-size: 1em; margin-left: 10px;padding: 0.3em;}
    nav#vertical-menu a:hover{font-size: 1em;}
}
@media (max-width:1100px){
    div.container{width: 76%;}
    div#fondo-vmenu{width: 200px;} 
    nav#vertical-menu{width: 200px; float: left; height: 100%;}
    nav#vertical-menu h3{font-size: 1.2em; letter-spacing: 4px; margin-left: 15px;padding: 0.2em; margin-top: 1em;}
    nav#vertical-menu a {font-size: 1em; margin-left: 10px;padding: 0.2em;}
    nav#vertical-menu a:hover{font-size: 1em;}
}

@media (max-width:850px){
    div.container{width: 72%;}
}
@media (max-width:750px){
    div#fondo-vmenu{visibility: hidden; height: 0; width: 0;}
    nav#vertical-menu{visibility: hidden; height: 0; width: 0;}
    div.container{width: 98%;}
}

difilippocarlos · #7 (**permalink**) 06/02/2014, 07:59

Listo chicos... la solucion era la siguiente:

reemplazar las lineas:

Código:

90:     #navInferior{visibility: hidden; overflow: auto;} 
124:   #navDerecha{margin-top: 50px;float:right;}