Foros del Web » Creando para Internet » HTML »

problema con listas

Estas en el tema de problema con listas en el foro de HTML en Foros del Web. Buenas, tengo un problema con un menú con submenús de los submenús, es un poco enrevesado, pero el problema seguramente tiene solución sencilla si me ...
  #1 (permalink)  
Antiguo 03/11/2010, 13:37
 
Fecha de Ingreso: marzo-2010
Mensajes: 90
Antigüedad: 7 años, 8 meses
Puntos: 2
problema con listas

Buenas, tengo un problema con un menú con submenús de los submenús, es un poco enrevesado, pero el problema seguramente tiene solución sencilla si me consigo explicar, debe ser que no he organizado bien la lista html


El tema es el siguiente.

Tengo una botonerá(menú) horizontal q me muestra unos submenús en horizontal en css,

Código PHP:
--------------------         --------------------
opicon opcion |           | opicon opcion |
-------------------          --------------------
                                 => |
subopcion|
                                     ----------
                                    |
subopcion|
                                     ---------- 
hasta ahí todo bien, el problema q tengo es q recivo las categorias(subopciones) desde una bbdd y esta es modificable por el cliente, así pues puedo llegar a tener muchas subcategorias q a su vez peuden tener muchas subcategorias.

Por eso necesito cortar el menu, pues puede tener muchas categorias ,por ejemplo cada 8 categorias y luego las 8 siguientes categorias q salgan al lado , en otra columna,
algo así:

Código PHP:
----------------------------------------
opicon opcion  opicon opcion |
----------------------------------------
                             |
subopcion| |subopcion|
                              ------------------------
                             |
subopcion| |subopcion|
                              ------------------------
                             |
subopcion|
                              -----------
                             |
subopcion|
                              -----------
                             |
subopcion|
                              -----------
                             |
subopcion|
                              -----------
                             |
subopcion|
                              -----------
                             |
subopcion|
                              ----------- 
Así si hay 8 saldrian en una columna, si hay hasta 16 saldrian en 2, hasta 24 en 3 etc..

mediante php lo he conseguido hacer, pero estas subopciones tienen a su vez otros submenús.
En el caso de una sola columna no he tenido problemas, el problema viene cuando tengo mas de una columna, que pasa?en mi desconocimiento de las listas he cogido con phpy he creado filas de 1 , 2 , 3 ,4 o mas elementos dependiendo de la cantidad :
si hay mas de 8 sería 2 columnas, 2 elementos

<li>ele1 ele2</li>
<li>ele3 ele4</li>
<li>ele5 ele6</li>
<li>ele7 ele8</li>

y mediante divs he conseguido mantenerlos alineados, realmente no son 2 columnas, si no 4 filas.

para q nos entendamos he hecho algo así(quito la parte de php y js para q quede mas claro)
Código HTML:
 <li><a href="#">Anuncios</a>  //[COLOR="Red"]aqui un boton del  menu ppal[/COLOR]
			<ul ><span></span>
				<li><a  href="#">categoria</a>
                	                <ul>   //[COLOR="Red"]aqui mi problema, para colocar las subcategorias en lineas, pues no se hacerlo de otra forma, luego al aplicar el hover se lo aplica a las dos subcategorias[/COLOR]
                    	                        <li><div id="subCate"><img  src="flecha.png" /><a  href="#">subcategoria</a></div></li>
                        <li><div id="subCate"><img  src="flecha.png" /><a href="#">Themes</a></div></li>	
                                        </ul>
                                </li>
				<li><img class ="bot2" src="flecha.png" /><a class="aTexto" href="#">categoria2</a></li>
			</ul>
 	</li> 
Así pues, pienso que mi problema es que no he organizado bien la lista, como digo en rojo arriba, al tener varias opciones en un li , al aplicarle el siguiente hover se le aplica a todas las opcioens de ese li(como es lógico).
alguna sugerencia para poder hacerla por columnas como digo, o organizar la lista de otra forma para poder hacerlo?


gracias de antemano!!!!
  #2 (permalink)  
Antiguo 03/11/2010, 16:10
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: problema con listas

pues la verdad que te has complicado mucho. la forma sencilla es con css3 gracias al modulo multi-column layout. el problema, aun no es estandar. lo menciono para que conozcas que dentro de un futuro sera estandar. aun asi, hay navegadores que ya tienen soporte el cual puedes experimentar o si te decantas por definitivamente utilizarlo, usa tu propio juicio.

al tema en si, te estas complicando mucho la estructura de listado. lo que puedes hacer es crear el listado pero un grupo por cada cantidad de opciones. de modo que te quedaria asi.
Código:
<ul> <!-- listado principal en horizontal [nivel 1] -->
<li>categoria</li>
<li><ul><!-- nivel 2 columna 1 -->
<li>opcion</li>
...
</ul><ul><!-- nivel 2 columna 2 -->
<li>opcion</li>
...
</ul></li>
...
</ul>
luego con css flotas los grupos (elementos UL nivel 2) hacia una orientacion (left|right) para que parezcan columnas.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 03/11/2010, 17:38
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: problema con listas

vos buscas esto: http://www.araudi.net/forosdelweb/menu_desplegable.html

acá tenes muchos más ejemplos! http://www.araudi.net/


Etiquetas: listas
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 20:42.