Foros del Web » Creando para Internet » CSS »

Bloqueo de una opción de una lista HTML

Estas en el tema de Bloqueo de una opción de una lista HTML en el foro de CSS en Foros del Web. Saludos comunidad tengo la siguiente duda: Tengo una lista en Html con varias opciones: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < ul >     ...
  #1 (permalink)  
Antiguo 05/08/2013, 23:53
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 13 años, 7 meses
Puntos: 1
Exclamación Bloqueo de una opción de una lista HTML

Saludos comunidad tengo la siguiente duda:

Tengo una lista en Html con varias opciones:

Código HTML:
Ver original
  1. <ul>
  2.     <li><a href="Opcion1.php">Opcion 1</a></li>
  3.     <li><a href="Opcion2.php">Opcion 2</a></li>
  4.     <li><a href="Opcion3.php">Opcion 3</a></li>
  5. </ul>

Use varios estilos css, para que tengan la forma de un menu, como se muestra en el siguiente enlace: http://www.cristalab.com/tutoriales/...-listas-c130l/

Mi duda es cuando presione en Opcion 1, como hago para que al ingresar a la pagina Opcion1.php la Opcion 1 se bloquee (La opcion 1 de la lista), como cuando se bloquea un boton html.

Se puede realizar dicho efecto?

Gracias por su tiempo.

Última edición por skyz; 06/08/2013 a las 00:00
  #2 (permalink)  
Antiguo 06/08/2013, 02:15
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 4 meses
Puntos: 2114
Respuesta: Bloqueo de una opción de una lista HTML

Si con bloquear te refieres a no poder seguir el enlace, entonces deberías de quitar el enlace.
  #3 (permalink)  
Antiguo 06/08/2013, 08:41
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 13 años, 7 meses
Puntos: 1
Exclamación Respuesta: Bloqueo de una opción de una lista HTML

Cita:
Iniciado por pzin Ver Mensaje
Si con bloquear te refieres a no poder seguir el enlace, entonces deberías de quitar el enlace.
Cierto podria hacerlo esa parte con lenguaje de parte del servidor (cuando ingrese a la pagina Opcion1.php) que muestre :

Código HTML:
Ver original
  1. <ul>
  2.     <li><a href="#">Opcion 1</a></li>
  3.     <li><a href="Opcion2.php">Opcion 2</a></li>
  4.     <li><a href="Opcion3.php">Opcion 3</a></li>
  5. </ul>

Bueno pero tambien quisiera que con css, ese boton que ahora le quite el enlace, ya no me muestre la manito, cuando el puntero del mouse este sobre el y tambien tenga un color oscuro transparente, dando la apariencia de un boton desabilitado.

Gracias.

Última edición por skyz; 06/08/2013 a las 08:48
  #4 (permalink)  
Antiguo 06/08/2013, 09:37
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 4 meses
Puntos: 2114
Respuesta: Bloqueo de una opción de una lista HTML

Lo correcto sería quitar el enlace, no el sólo el atributo href del enlace.

Si quieres hacerlo como dices, sólo tendría que poner:

Código CSS:
Ver original
  1. cursor: default;

Aunque pinchando en el enlace seguiría yendo al enlace.

Yo cambiaría ese a por un span y lo añadiría al selector de estilos para que esté igual, y creas otra regla para los estilos que quieras cambiar.
  #5 (permalink)  
Antiguo 06/08/2013, 10:03
Avatar de skyz  
Fecha de Ingreso: abril-2010
Mensajes: 170
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Bloqueo de una opción de una lista HTML

Cita:
Iniciado por pzin Ver Mensaje
Lo correcto sería quitar el enlace, no el sólo el atributo href del enlace.
Lo hare asi, lo analice mal

Cita:
Iniciado por pzin Ver Mensaje
Si quieres hacerlo como dices, sólo tendría que poner:

Código CSS:
Ver original
  1. cursor: default;

Aunque pinchando en el enlace seguiría yendo al enlace.

Yo cambiaría ese a por un span y lo añadiría al selector de estilos para que esté igual, y creas otra regla para los estilos que quieras cambiar.
Osea voy a tener mi lista asi, luego de manipularla con lenguaje de servidor:

Código HTML:
Ver original
  1. <ul>
  2.         <li><div id=efecto>Opcion 1</div></li>
  3.         <li><a href="Opcion2.php">Opcion 2</a></li>
  4.         <li><a href="Opcion3.php">Opcion 3</a></li>
  5. </ul>

Anteriormente la Opcion 1 tendria que estar en un div, en el cual aplique el efecto de:
Código CSS:
Ver original
  1. cursor: default;
.

donde tendria que colocar el la etiqueta span?, no lo entendi muy bien, gracias
  #6 (permalink)  
Antiguo 06/08/2013, 10:09
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 15 años, 9 meses
Puntos: 1146
Respuesta: Bloqueo de una opción de una lista HTML

Código HTML:
Ver original
  1. <li><span>Opcion 1</span></li>

la intención del span es que tenga los mismos estilos que el <a> para que no descuadre el menú, igual puedes agregarle un color diferente para diferenciarlo del resto
  #7 (permalink)  
Antiguo 06/08/2013, 10:11
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 4 meses
Puntos: 2114
Respuesta: Bloqueo de una opción de una lista HTML

Algo así decía yo. Aplicas el span —porque es un elemento parecido a un enlace, ya que es en linea y no en bloque:

Código HTML:
Ver original
  1. <ul>
  2.   <li><span>Opcion 1</span></li>
  3.   <li><a href="Opcion2.php">Opcion 2</a></li>
  4.   <li><a href="Opcion3.php">Opcion 3</a></li>
  5. </ul>

Luego le aplicas los mismos estilos que a los enlaces, pero para no volver a escribir esos estilos, simplemente cambias tu selector de —es un ejemplo, no sé cómo lo tienes:

Código CSS:
Ver original
  1. ul li a {
  2.   padding: 10px;
  3.   color: white;
  4.   background: black;
  5. }

A algo así:

Código CSS:
Ver original
  1. ul li a, ul li span {
  2.   padding: 10px;
  3.   color: white;
  4.   background: black;
  5. }

Y luego pones otra regla para los estilos que quieres cambiarle:
Código CSS:
Ver original
  1. ul li span {
  2.   background: grey;
  3. }

Etiquetas: bloqueo, html, lista, opcion
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 03:17.