Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 4 de 4

Tema: Como adaptar un menú lateral extensible

  1. #1
    Me va gustando esto... Habitante Avatar de egabro
    Fecha de Ingreso
    15 abr, 09
    Ubicación
    Sevilla (España)
    Mensajes
    93
    Poder de Reputación
    16

    Como adaptar un menú lateral extensible

    Buenas noches a todos:

    Mi proyecto de página: http://cabraenelrecuerdo.myartsonline.com/index.php

    El motivo de este tema es que he colocado un menú lateral izquierdo extensible en mi proyecto de página y me va aceptablemente bien, y luego he intentado adaptarlo para el lado derecho de la página, pero no consigo que el efecto de extensión funcione

    Alguien me puede ayudar.

    el código css de los dos menús lo dejo a continuación:

    /* inicio del control del menu lateral izquierdo*/
    div#menu { float:left;
    width: 200px;
    margin-top:250px;
    }

    div#menu ul{
    list-style:none;
    }

    div#menu ul li{
    margin-top: 15px;
    font-family: tahoma;
    font-size: 18px;
    background-color: #B6D1DC;
    width: 160px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0px 20px 20px 0px;
    padding-left: 20px;
    box-shadow: 5px 0px 10px #939393;
    -webkit-transition: padding-left 0.6s;
    }
    div#menu ul li:hover{
    padding-left:50px;
    color:#FFF;
    }
    /* fin del control del menu lateral izquierdo*/


    /* inicio del control del menu lateral derecho*/
    div#menu-derecho { float: right;
    width: 200px;
    margin-top:250px;
    }

    div#menu-derecho ul{
    list-style:none;

    }


    div#menu-derecho ul li{
    margin-top: 15px;
    font-family: tahoma;
    font-size: 18px;
    background-color: #B6D1DC;
    width: 160px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 20px 0px 0px 20px;
    padding-left: 80px;
    box-shadow: 5px 0px 10px #939393;
    -webkit-transition: padding-right 0.6s;
    }
    div#menu-derecho ul li:hover{
    padding-left:50px;
    color:#FFF;
    }
    /* fin del control del menu lateral derecho*/



    Os doy las gracias por vuestra ayuda.

    Un saludo.

    Egabro

  2. #2
    Recien Llegado! Habitante
    Fecha de Ingreso
    16 feb, 12
    Mensajes
    24
    Poder de Reputación
    12
    prueba metiendole transform:scale(1.1);position:relative;right:50px; de otra forma no lo consigo

  3. #3
    Me va gustando esto... Habitante Avatar de egabro
    Fecha de Ingreso
    15 abr, 09
    Ubicación
    Sevilla (España)
    Mensajes
    93
    Poder de Reputación
    16
    muchas gracia suso30 por tu respuesta.

    He conseguido que el menu de la derecha se despliegue a la izquierda modificando:

    " en el div#menu-derecho { he cambiado a
    float: right;
    margin-right: 0px;
    margin-left: 30px;



    y en div#menu-derecho il li{ he cambiado a
    float:right;

    Os dejos el css completo.


    div#menu-derecho {
    float: right;
    width: 200px; /* va contener la primera columna*/
    margin-top: 30px; /* esto lo va a separar todo el bloque de el borde superior 50px*/
    margin-right: 0px; /*background-color: red; se puso al inicio despues border-radius se quito */
    margin-left: 30px;
    }

    div#menu-derecho ul{
    list-style:none; /*quita los puntos de la lista */

    }


    div#menu-derecho ul li{ float:right; /*para dar caracteristicas a las listas*/
    margin-top: 15px;/*cada texto de cada reglon va a tener arriba un espacio de 15px*/
    font-family: tahoma; /*tipo de letra para que sea un poco más vistoso*/
    font-size: 14px; /*tamaño de la letra */
    background-color: #B6D1DC;
    width: 200px;
    padding-top: 5px; /* distancia hasta el borde de arriba*/
    padding-bottom: 5px;
    border-radius: 20px 20px 20px 20px; /* para el redondeo de esquinas*/
    padding-left: 20px; /* para separar la letra del margen izquierdo */
    box-shadow: 0px 2px 10px #939393;/* para darle el sombreado */
    -webkit-transition: padding-right 0.6s;
    font-weight: bold;
    }
    div#menu-derecho ul li:hover{
    padding-left:50px;
    color:#FFF;
    }

    Un saludo y gracias.

  4. #4
    Recien Llegado! Habitante
    Fecha de Ingreso
    11 jul, 14
    Ubicación
    Lima
    Mensajes
    23
    Poder de Reputación
    9
    Gracias me sirvió tu segundo código css justo para un proyecto que estoy haciendo, saludos.
    Diseño de Páginas Web Profesionales:
    Hostingroup - Hosting Peru

Temas Similares

  1. Respuestas: 2
    Último Mensaje: 30/12/2012, 14:01
  2. Respuestas: 1
    Último Mensaje: 12/12/2008, 01:59
  3. Como arreglar el menú lateral
    Por galope_03 en el foro Foro General
    Respuestas: 3
    Último Mensaje: 22/07/2008, 19:42

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •