Comunidad de diseño web y desarrollo en internet online

AYUDA CON MENU CSS

Citar            
MensajeEscrito el 17 Abr 2008 06:05 am
necesito ayuda con menu en css el problema q quiero q las pestañas se qden seleccionada aqui les dejo me codigo gracias x ayudar... soy nuevo en esto :wink:

Código :

<style type="text/css">

#menu {
margin: 0px;
padding: 0px;
background: inherit;
line-height: 35px;
color: #81D7DF;
width: 100%;
height: 35px
}

#menu  a, #menu a:viseted { color: #81D7DF; text-decoration: none; background: inherit }
#menu .submit { float: right; vertical-align: bottom  }
#menu .submit ul { margin:0; padding:0px 10px 0 50px; list-style:none }
#menu .submit li { display:inline; margin:0; padding:0 }
#menu .submit a { float:left; background: transparent url(images/tableft.jpg) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none }
#menu .submit a span { float:left; background: inherit; display:block; background:url(images/tabright.jpg) no-repeat right top; padding:0px 15px 0px 10px; margin-right: 2px; color:#FFF }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu .submit a span {float:none;}
/* End IE5-Mac hack */
#menu .submit a:hover span { color:#fffffe; }
#menu .submit a:hover { background-position:0% -35px }
#menu .submit a:hover span { background-position:100% -35px }
#menu .submit  a.selected { background-position:0% -35px }
#menu .submit  a.selected span { background-position:100% -35px }
</style>


<div id="menu">
<div class="submit">
<ul>
<li><a href="index.php" class="selected"><span>A</span></a></li>
<li><a href="index.php"><span>B</span></a></li>
<li><a href="index.php"><span>C</span></a></li>
<li><a href="index.php"><span>D</span></a></li>
<li><a href="#"><span>E</span></a></li>
</ul>
</div>
</div>

Por luisortix

8 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 17 Abr 2008 09:13 am
que se queden seleccionadas? con CSS?
Creo que he visto alguna pseudo-clase (que creo no reconoce el IE6) de CSS:focus.
Pero se desvanecería al hacer click fuera del elemento...

Creo que lo mejor, sería hacerlo con Javascript (si no quieres refrescar el menú).
Con JS, no sería muy difícil. Apenas unas líneas de código.

Si nadie te ha indicado antes, cuando llegue a casa te mando la URL de la página donde ví lo del ":focus" (y que alguien puso hace unos meses en estos foros)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 17 Abr 2008 01:29 pm
cuando dices seleccionadas te refieres a cuando pasas el raton por encima o cuanto entras en una sección marque donde estas.

en el primer caso, usas la pseudoclase ":hover"

en el segundo usas la clase selected (que esta en tu codigo) y le das el estilo que quieras, solo debes colocarle esa clase a la opción del menu ya sea con javascript o del lado del servidor con php

Saludos

Por Prozac

SWAT Team

1546 de clabLevel

1 tutorial

Genero:Masculino   SWAT

donde se regresa el viento

firefox
Citar            
MensajeEscrito el 17 Abr 2008 03:46 pm
Muchas gracias x los aportes muy buenos, lo q me referia que quiero que cuando entre a una seccion se marque donde estoy el problema q estoy trabajando con php para cargar las paginas:

Código :

<? 

if($id == "") { 
include("principal.php"); 
}                         
else { 
if(file_exists("$id.php")) { 
$id = htmlspecialchars(trim($_GET["id"])); 
$id = eregi_replace("<[^>]*>","",$id) ; 
$id = eregi_replace(".*//","",$id) ; 
include("$id.php"); 
} 
else { 
echo "Esta pagina no existe o esta siendo acualizada en este momento"; 
} 
} 
?>


de esa manera cargo las paginas en un solo lugar, mi otra manera de solucionar el problema seria de separar las paginas y colocarles a cada menu la clase selected.

Buenos muchas gracias si pueden dar mas aportes con javascript o php gracias :D

Por luisortix

8 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 17 Abr 2008 04:34 pm
No es necesario que los coloques en archivos separados, puedes poner un condicional con php para que compare tu página actual (con el atributo $id) con los elementos de tu menu y que asigne la clase selected a aquellos que coinciden (por lo general solo sería uno)

Por Odin

Claber

639 de clabLevel

2 tutoriales

Genero:Masculino   Premio_Secretos

El valle de las hamacas

firefox
Citar            
MensajeEscrito el 17 Abr 2008 04:53 pm
gracias Odin x el comentario pero como seria con el atributo $id dame un ejemplo gracias x el aporte

Por luisortix

8 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 17 Abr 2008 05:18 pm
Efectivamente, era con :focus.
Aquí hay un ejemplo, pero con un menú de imágenes (se podría adaptar)

Pero eso, teniendo en cuenta, que NO VAS A REFRESCAR LA PÁGINA DEL MENÚ al pasar de un sitio a otro.
(porque las páginas se cargan con iframes, o con AJAX)

Si vas a cambiar la página que contiene el menú, es como te han dicho, cambiando la case "selected".
(pero así, mola menos, pues no usas la potencialidad de los iframes, o el AJAX)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 17 Abr 2008 05:21 pm
Muchas gracias rizome voy a revisar tu informacion :D

Por luisortix

8 de clabLevel



Genero:Masculino  

msie7

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.