(Menu para móvil) usar enlace local con target para controlar dos etiquetas

[quico5]

Estoy construyendo un menú para moviles con CSS y cargo submenus con los enlaces locales del menu principal, el menu responde bien, pero no consigo a la vez mostrar un titulo diferente según el menú elegido

http://movil.anhida.org/menu.html#menu

P.D: EL menu es navegable

gracias por la ayuda

section{left:-100%;}
section#menu:target, section#tdah:target, section#anhida:target, section#enlaces:target{left:2%;}

span{opacity:0.2;}
span#menu:target{opacity:0.8;}

...
<section id="menu"> <!-- Menu principal -->
<nav>
<dl>
<dt><a href="#">Inicio</a></dt>
<dt><a href="#tdah">Tdah</a></dt>
<dt><a href="#anhida">Anhida</a></dt>
<dt><a href="#enlaces">Enlaces</a></dt>
<dt><a href="#">Foros</a></dt>
</dl>
</nav>
</section>
...

<footer>
<span id="menu">MENU</span>
<span id="tdah">TDAH</span>
<span id="anhida">ANHIDA</span>
<span id="enlaces">ENLACES</span>
</footer>

[kseso?]

Ya se lo comenté aquí, pero como veo que no le fue suficiente, se lo repito (lo mismo de otra forma):
ese etiquetado html en la lista está mal y su empeño en mantenerlo después del aviso es una burrada sin justificación posible.

Su empeño en ignorar las ayudas y su falta total de interés por aprender y ganas de hacer las cosas corréctamente es para mi suficiente motivo para desentenderme de sus problemas y abstenerme de indicar nada respecto al hecho de su uso de #id´s repetidos y otras cuestiones nada baladíes.

[quico5]

Desconozco el motivo por que es malo hacerlo como lo hice, pero por respeto a los miembros del foro he rectificado, me gustaria saber por que es tan malo como lo hice

disculmame

<ul>
<!--<dt><a href="#">Inicio</a></dt>-->
<li><a href="#tdah">Tdah</a></li>
<li><a href="#anhida">Anhida</a></li>
<li><a href="#enlaces">Enlaces</a></li>
<!--<dt><a href="#">Foros</a></dt>-->
</ul>

[quico5]

disculmame kseso?, ya rectifico, pense que tambien serviria

<ul>

<li><a href="#tdah">Tdah</a></li>
<li><a href="#anhida">Anhida</a></li>
<li><a href="#enlaces">Enlaces</a></li>

</ul>

errores corregidos -> http://movil.anhida.es/#menu

[kseso?]

Su enlace de #0 dice:
Internal Server Error

[quico5]

perdona kseso, en el ultimo POST puse la nueva ruta porque renombre el archivo a index.html para que no sea necesario hacer la dirección mas larga

http://movil.anhida.es/

estoy cerca de consegirlo

Antes tenia este código (pero tenia el fallo de que la pagina podía aparecer vacía)

//body>div{display:none;}
//body>div:target{display:block;}

Ahora tengo este que en teoría va perfecto (pero parece que Android no reconoce el simbolo de la S tumbada ~ )

body>div:target~div:last-child, body>div{display:none;}
body>:last-child, body>div:target{display:block;}

lo digo porque con este ultimo siempre se ve el menú principal, y defería ocultarse (tdah y anhida)

Rectifico, parece que funciona bien en android

[quico5]

[QUOTE=quico5;4176989]perdona kseso, en el ultimo POST puse la nueva ruta porque renombre el archivo a index.html para que no sea necesario hacer la dirección mas larga

http://movil.anhida.es/

estoy cerca de consegirlo

Antes tenia este código (pero tenia el fallo de que la pagina podía aparecer vacía)


Ahora tengo este que en teoría va perfecto (pero parece que Android no reconoce el simbolo de la S tumbada ~ )


lo digo porque con este ultimo siempre se ve el menú principal, y defería ocultarse (tdah y anhida)

A ves va bien en el movil y a veces no se oculta el menu (tdah, anhida) esto es muy raro

ya se lo que pasa
de url a url#algo, no oculta el primer menu
de url#menu a url#algo si lo oculta

En opera Movile parece que va perfecto, quizás sea un vallo del navegador de Android

[kseso?]

Debido a las limitaciones en las versiones móviles de los distintos navegadores en el soporte a css (no sólo propiedades o selectores más o menos "avanzados") posíblemente le sea más práctico utilizar una pizca de js para ocultar mostrar elementos las "opciones anteriores".

La navegación por pestañas (básicamente es lo que está haciendo) basadas en css (ya sea con ::target o con ::checked y checkbox) requieren de los selectores de hermanos o adyacentes (~/+) para poder ocultar o mostrar las pestañas inactivas.

Otra cuestión sería que mantuviese visible las "pestañas".

Quizás en páginas como http://www.cssplay.co.uk/ encuentre alguna que pueda servirle de ayuda

[quico5]

gracias por el aporte de CSSPLAY, voy a estudiarlo, respecto a lo que comentas sobre :CHECKED quizás fuese mas fácil, pues siempre hay uno obligatorio, pero quizás sea mejor la implementación via JS porque los CHECKBOX quedarían dispersos tal y como lo tengo organizado y habría que ocultar el CHECKBOX para que quedase mas bonito y no se si se podrá hacer, voy a experimentar a ver que sale

<input type="radio" name="group1" value="Milk">Uno
<input type="radio" name="group1" value="otro">Dos
Quizás en los input no se pueda, intento ocultarle la parte visual y controlarlo por el texto, pero parece que no es posible

a ver que encuentro en la web que me recomiendas

------

Este podría servir ocultando el input y pulsando el LABEL
<input type="radio" name="fav_food" id="food1" value="Pizza">
<label for="food1">Pizza</label>

quizás no sea posible, div:target[not] osea algo que detecte que no exista ningun :target

[quico5]

he modificado este ejemplo, le he añadido los enlaces, pero empiezo a pensar que quizás me tenga que conformar sin los enlaces, estoy intentando elegir los input a través de los enlaces, quizás en este caso se completaría con JS para recojer el TARGET de la URL y aplicarlo al INPUT, en caso de que no se pueda hacer por CSS

<style>
input:checked + div, input:target + div{display: block;}
input, div{display: none;}
</style>

<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>

<br><br>

<label for="one">One</label>
<label for="two">Two</label>
<label for="three">Three</label>

<input type="radio" id="one" name="tab" checked="checked" />
<div>One</div>

<input type="radio" id="two" name="tab" />
<div>Two</div>

<input type="radio" id="three" name="tab" />
<div>Three</div>

[quico5]

Ahora funciona perfecto, me quede sin los enlaces a cada sección, pero bueno, pensándolo bien es lo de menos

gracias por las sugerencias

http://movil.anhida.org