Foros del Web » Programación para mayores de 30 ;) » Java »

Problema menu personalizado en JSF

Estas en el tema de Problema menu personalizado en JSF en el foro de Java en Foros del Web. Hola. Necesito hacer un menu personalisado en JSF con Facelets, como por ejemplo de aqui de foros del web. El problema es que las etiquetas ...
  #1 (permalink)  
Antiguo 02/10/2014, 10:59
Avatar de Andreslrz  
Fecha de Ingreso: septiembre-2008
Mensajes: 99
Antigüedad: 15 años, 7 meses
Puntos: 2
Problema menu personalizado en JSF

Hola.

Necesito hacer un menu personalisado en JSF con Facelets, como por ejemplo de aqui de foros del web.

El problema es que las etiquetas <ul> y <li> de html no estan en jsf y me pone problemas al mostrarlos, tengo lo siguiente:
css
Código:
#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
     width: 100%;
    background-color: #ffffff;
    border-bottom: #D20005 solid 3px;
    box-shadow: #ff7f7f 0px 2px;
    -moz-box-shadow: #ff7f7f 0px 2px;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}

#menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
    color: #fafafa;
}

#menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;    
    background: #444;   
    background: linear-gradient(#444, #111);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
    border-radius: 3px;
    transition: all .2s ease-in-out;
}

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    box-shadow: -1px 0 0 rgba(255,255,255,.3);      
}

#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {   
    box-shadow: none;    
}

#menu ul a {    
    padding: 10px;
    width: 130px;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#menu ul a:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0; 
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec; 
}

#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3; 
    border-bottom-color: transparent;   
}

#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}
}
este es el codigo del template:
Código:
 
<div id="menu" >
            <ui:insert name="menu">
            
            </ui:insert>
        </div>
Este el codigo del template cliente:
Código:
 <ui:define name="menu">
        <ul>
            
            <li>contenido1</li>
            <li>contenido2</li>
            <li>contenido3</li>
        </ul>
    </ui:define>
tambien he intentado creando listas en un beam como por ejemplo:
Código:
<ul>
  <ui:repeat value="#{myBean.items}" var="item">
    <li><h:outputText value="#{item.name}"/></li>
  </ui:repeat>
</ul>
pero nada de esto funciona. Agradesco cualquier ejemplo, ya que hacia un tiempo largo no programaba.

Etiquetas: jsf, personalizado, programa
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 17:53.