Foros del Web » Creando para Internet » CSS »

Mantener seleccion usuario en Topmenu CSS y PHP

Estas en el tema de Mantener seleccion usuario en Topmenu CSS y PHP en el foro de CSS en Foros del Web. Hola a [email protected]! ya he empleado unas horas buscando como hacer que el menu recuerde la seleccion del usuario es decir como este menu: http://portal.uned.es/portal/page?_p..._schema=PORTAL ...
  #1 (permalink)  
Antiguo 27/11/2010, 15:32
 
Fecha de Ingreso: enero-2007
Mensajes: 156
Antigüedad: 10 años, 10 meses
Puntos: 3
Mantener seleccion usuario en Topmenu CSS y PHP

Hola a [email protected]!
ya he empleado unas horas buscando como hacer que el menu recuerde la seleccion del usuario es decir como este menu:

http://portal.uned.es/portal/page?_p..._schema=PORTAL

Sería fácil si mi menu fuese todo en html, pero esta en PHP y no se como hacerlo. Si da lo mismo preferiría usar CSS, que me resulta más fácil.

Os pongo mi código. Muchas gracias de antemano

index.html
Código PHP:
<head>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>
            <div id="menu">
    <ul class="menu">
        <li><a class="parent" href="<?php echo $this->getUrl() ?>"><span><?php echo $this->__('Home'?></span></a>
           
        </li>
        <li><a class="parent" href="<?php echo $this->getUrl(''?>"><span><?php echo $this->__('Products'?></span></a>
                         <ul>
                <?php foreach ($this->getStoreCategories() as $_category): ?>
                    <?php echo $this->drawItem($_category?>
                <?php endforeach ?>
            </ul>
        </li>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('menu')->toHtml(); ?>
    </ul>

              
</div></body>

menu.css
Código:
div#menu {
    height:41px;
    background:url(images/main-bg.png) repeat-x;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}

div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(images/item-pointer-mover.gif);
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);
}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
    color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -38px 0 0 163px !important;
    margin-left:172px;
}

/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }

/* lava lamp */
div#menu li.back {
    background: url(images/lava.png) no-repeat right -44px !important;
    background-image: url(images/lava.gif);
    width: 13px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(images/lava.png) no-repeat top left !important;
    background-image: url(images/lava.gif);
    height: 44px;
    margin-right: 8px;
}
  #2 (permalink)  
Antiguo 27/11/2010, 17:26
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Mantener seleccion usuario en Topmenu CSS y PHP

Ya que la página está en PHP, usa un identificador por medio de GET o POST, y agrega un "if" que genere una clase para el primer nivel de tu lista anidada. Así cuando el visitante de tu página cliquee un enlace de tu lista, la clase aparezca sobre ésta sólamente.

Saludos

Un ejemplo a grosso modo:

Código CSS:
Ver original
  1. .seleccionado{
  2. background:url(images/select-bg.png) repeat-x;
  3. }
]

Código PHP:
Ver original
  1. <ul class="menu">
  2.         <li <?php if($_GET['pageid']='home'){echo 'class="seleccionado"'};?>><a class="parent" href="<?php echo $this->getUrl() ?>"><span><?php echo $this->__('Home') ?></span></a>
  3.         </li>...
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 27/11/2010 a las 17:40
  #3 (permalink)  
Antiguo 28/11/2010, 16:15
 
Fecha de Ingreso: enero-2007
Mensajes: 156
Antigüedad: 10 años, 10 meses
Puntos: 3
Respuesta: Mantener seleccion usuario en Topmenu CSS y PHP

gracias baccxus, me has puesto un ejemplo muy claro.

voy a intentarlo a ver que tal.

Etiquetas: mantener, php, seleccion, usuarios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:21.