Foros del Web » Creando para Internet » CSS »

Seleccionar con estilo un elemento de menu

 Estas en el tema de Seleccionar con estilo un elemento de menu en el foro de CSS en Foros del Web. El problema que tengo es simple. tengo un menu que encontre en internet. Al pasar el mouse por cada elemento del menu, este se resalta ...
  #1 (permalink)  
Antiguo 07/05/2011, 07:12
Avatar de Fernarey1810  
Fecha de Ingreso: noviembre-2008
Mensajes: 214
Antigüedad: 15 años, 5 meses
Puntos: 1
Seleccionar con estilo un elemento de menu
El problema que tengo es simple. tengo un menu que encontre en internet. Al pasar el mouse por cada elemento del menu, este se resalta con un fondo oscuro, y al salir del elemento del menu, el fondo desaparece y el elemento queda normal. Lo que no me permite, es que al hacer clic sobre cada elemento. este quede seleccionado con ese fondo que mencione, para poder saber en que elemento estoy posicionado. Probe hacerlo con un ONCLICK pero no puedo:S.
Estas son las imagenes

https://rapidshare.com/files/461110847/images.rar

Este es el codigo del menu:
Código HTML: 
Ver original
  1. <html>
  2. <head><title>Sistema Principal</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
  5. <script type="text/javascript">
  6. function resalta(elemento) {
  7.     switch(elemento.style.className) {
  8.         case 'select':
  9.             elemento.style.className = 'current';
  10.             break;
  11.         case 'current':     
  12.             elemento.style.className = 'select';
  13.             break;
  14.     }
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <!-- Start: page-top-outer -->
  20. <div id="page-top-outer">  
  21.  
  22.     <div id="page-top">
  23.     
  24.         <!-- start logo -->
  25.         <div id="logo">
  26.         <a href=""><img src="images/loguin.png" width="156" height="40" alt="" /></a>
  27.         </div>
  28.         <!-- end logo -->
  29.         
  30.         <!--  start top-search -->
  31.         <div id="top-search">
  32.             <table border="0" cellpadding="0" cellspacing="0">
  33.             <tr>
  34.             <td><input type="text" value="Search" onBlur="if (this.value=='') { this.value='Search'; }" onFocus="if (this.value=='Search') { this.value=''; }" class="top-search-inp" /></td>
  35.             <td>
  36.             <select  class="styledselect">
  37.                 <option value=""> All</option>
  38.                 <option value=""> Products</option>
  39.                 <option value=""> Categories</option>
  40.                 <option value="">Clients</option>
  41.                 <option value="">News</option>
  42.             </select> 
  43.             </td>
  44.             <td>
  45.             <input type="image" src="images/top_search_btn.gif"  />
  46.             </td>
  47.             </tr>
  48.             </table>
  49.         </div>
  50.         <!--  end top-search -->
  51.         <div class="clear"></div>
  52.     <!-- End: page-top -->    
  53.     </div>
  54. <!-- End: page-top-outer -->
  55.     
  56. <div class="clear">&nbsp;</div>
  57.  
  58. <!--  start nav-outer-repeat................................................................................................. START -->
  59. <div class="nav-outer-repeat"> 
  60.     <!--  start nav-outer -->
  61.     <div class="nav-outer">  
  62.                
  63.             <!--  start nav -->
  64.             <div class="nav">
  65.                 <div class="table">     
  66.                     <ul class="select"><li><a href="#nogo"><b>Blocks y Cigüeñales M.B.</b></a></li></ul>
  67.                     
  68.                     <div class="nav-divider">&nbsp;</div>                           
  69.                     <ul class="select" onclick="resalta(this);"><li><a href="#nogo"><b>Tapas</b></a></li></ul>  <!-- class="current" deja seleccinado la opcion -->
  70.                     
  71.                     <div class="nav-divider">&nbsp;</div>       
  72.                     <ul class="select"><li><a href="#nogo"><b>Cinpal Motor</b></a></li></ul>
  73.                     
  74.                     <div class="nav-divider">&nbsp;</div>       
  75.                     <ul class="select"><li><a href="#nogo"><b>Levas</b></a></li></ul>
  76.                     
  77.                     <div class="nav-divider">&nbsp;</div>       
  78.                     <ul class="select"><li><a href="#nogo"><b>Botadores y Levas Aux.</b></a></li></ul>
  79.                     
  80.                     <div class="nav-divider">&nbsp;</div>       
  81.                     <ul class="select"><li><a href="#nogo"><b>Múltiples</b></a></li></ul>
  82.                     
  83.                     <div class="nav-divider">&nbsp;</div>       
  84.                     <ul class="select"><li><a href="#nogo"><b>Repuestos Varios</b></a></li></ul>
  85.                     
  86.                     <div class="nav-divider">&nbsp;</div>       
  87.                     <ul class="select"><li><a href="#nogo"><b>Cubrevolantes</b></a></li></ul>
  88.                     
  89.                     <div class="clear"></div>
  90.                 </div>
  91.                 
  92.                 <div class="clear"></div>
  93.             </div>
  94.             <!--  start nav -->
  95.     </div>
  96.     
  97.     <div class="clear"></div>
  98. <!--  start nav-outer -->
  99. </div>
  100. <!--  start nav-outer-repeat................................................... END -->
  101. </div>
  102. </body>
  103. </html>

Este es el codigo CSS:
Código CSS: 
Ver original
  1. #page-top-outer {
  2.     background: url(../images/top_bg.jpg) top center repeat-x;
  3.     border-bottom: 1px solid #7e7e7e;
  4.     height: 92px;
  5. }
  6. #page-top   {
  7.     margin: 0 auto;
  8.     max-width: 1260px;
  9.     min-width: 850px;
  10.     position: relative;
  11.     }
  12. #logo   {
  13.     float: left;
  14.     margin: 45px 0 0 15px;
  15.     }
  16. #logo   a   {
  17.     display: block;
  18.     }
  19. #top-search {
  20.     display: inline;
  21.     float: right;
  22.     position: relative;
  23.     margin: 46px 20px 0 0;
  24.     z-index: 20;
  25. }   
  26. .top-search-inp {
  27.     background: url(../images/top_search_inp.gif) no-repeat;
  28.     border: none;
  29.     color: #fff;
  30.     font-size: 12px;
  31.     height: 23px;
  32.     padding: 6px 6px 0 10px;
  33.     width: 164px;
  34. }
  35.  
  36. .styledselect {
  37. background: #2a2a2a;
  38. border: 1px solid #424242;
  39.     color:#fff;
  40.     width:120px;
  41.     padding: 5px;
  42.     line-height: 14px;
  43.     margin-right: 6px;
  44.     font-size: 12px;
  45. }
  46.  
  47.  
  48. /*  NAVIGATION ----------------------------------------------- */
  49. .nav-outer-repeat   {
  50.     background: url(../images/repeat.jpg) repeat-x;
  51.     height: 77px;
  52. }
  53. .nav-outer  {
  54.     margin: 0 auto;
  55.     max-width: 1260px;
  56.     min-width: 850px;
  57.     }
  58.  
  59. .nav    {
  60.     float: left;
  61.     font-family: Tahoma;
  62.     font-size: 13px;
  63.     height: 38px;
  64.     position: relative;
  65.     width: 1200px;
  66.     min-width: 600px;
  67.     z-index: 500;
  68.     }
  69. .nav-divider    {
  70.     background: url(../images/divider.jpg) top no-repeat;
  71.     float: left;
  72.     height: 40px;
  73.     width: 15px;
  74. }
  75. .nav .table {
  76.     display: table;
  77.     }
  78.  
  79. .nav .select,
  80. .nav .current   {
  81.     display: table-cell;
  82.     float: left;
  83.     list-style: none;
  84.     margin: 0 0px 0 0;
  85.     padding: 0;
  86.     white-space: nowrap;
  87.     }
  88. .nav li {
  89.     float: left;
  90.     height: auto;
  91.     margin: 0;
  92.     padding: 0;
  93.     }
  94. .nav .select a  {
  95.     background: url(../images/pro_line_0x.gif);
  96.     color: #fff;
  97.     display: block;
  98.     float: left;
  99.     height: 37px;
  100.     line-height: 35px;
  101.     padding: 0 20px 0 20px;
  102.     text-decoration: none;
  103.     white-space: nowrap;
  104.     }
  105. .nav .current a {
  106.     background: url(../images/pro_line_1.gif);
  107.     color: #fff;
  108.     display: block;
  109.     float: left;
  110.     height: 37px;
  111.     line-height: 35px;
  112.     padding: 0 0 0 10px;
  113.     text-decoration: none;
  114.     white-space: nowrap;
  115.     }
  116. .nav .current a b   {
  117.     background: url(../images/pro_line_1.gif) right top;
  118.     display: block;
  119.     padding: 0 20px 0 10px;
  120.     }
  121. .nav .select a:hover, 
  122. .nav .select li:hover a {
  123.     background: url(../images/pro_line_1.gif);
  124.     color: #fff;
  125.     cursor: pointer;
  126.     padding: 0 0 0 10px;
  127.     }
  128. .nav .select a:hover b, 
  129. .nav .select li:hover a b   {
  130.     background: url(../images/pro_line_1.gif) right top;
  131.     cursor: pointer;
  132.     display: block;
  133.     float: left;
  134.     padding: 0 20px 0 10px;
  135.     }
  136. .nav .select_sub    {
  137.     display: none;
  138.     margin: 0 0 0 10px;
  139.     }
  140.  
  141.  
  142.  
  143.  
  144.  
  145. /* GENERAL --------------------------------------------------------*/ 
  146.  table  {
  147.     border-collapse: collapse;
  148.     }
  149. .fr {
  150.     float: right;
  151.     }
  152. a   {
  153.     outline: none;
  154.     text-decoration: none;
  155.     }
  156. a:hover {
  157.     }
  158. .clear  {
  159.     clear: both;
  160.     font-size: 0px;
  161.     height: 0;
  162.     line-height: 0px;
  163.     margin: 0px;
  164.     padding: 0px;
  165.     }
  166. img {
  167.     border: 0;
  168.     }
  169. p   {
  170.     margin: 0px;
  171.     padding: 0px;
  172.     }
  173. form    {
  174.     margin: 0;
  175.     padding: 0;
  176.     }
  177. .line   {
  178.     border-top: 1px solid #dcdada;
  179.     font-size: 0px;
  180.     height: 1px;
  181.     line-height: 0px;
  182.     margin: 20px 0;
  183.     padding: 0;
  184.     }
  185. .font11 {
  186.     font-size: 11px;
  187.     }
Última edición por Fernarey1810; 07/05/2011 a las 07:19
  #2 (permalink)  
Antiguo 07/05/2011, 14:09
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Seleccionar con estilo un elemento de menu
lee este tema. tienes dos opciones o usar la pseudo clase :target (no funciona en ie) o usar javascript
  #3 (permalink)  
Antiguo 09/05/2011, 08:01
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 13 años
Puntos: 20
Respuesta: Seleccionar con estilo un elemento de menu
he leido en varios post de que solo hay 2 opciones para hacer este efecto el target y java.
yo lo que hago es agregar una clase con el fondo, color o efecto que quiero, y luego le aplico a cada pagina al elemento del menu que corresponda dicha clase, me funciona con todos los navegadores, incluso si selecciono un menu y un submenu, aplicando clases distintas.

esta bien aplicada esa tecnica o es mas correcto usar el target y java. ¿?
__________________
Everybody Else It's Doing It, So Why Can't We?
  #4 (permalink)  
Antiguo 09/05/2011, 14:50
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Seleccionar con estilo un elemento de menu
Cita:
Iniciado por yonaida Ver Mensaje
yo lo que hago es agregar una clase con el fondo, color o efecto que quiero, y luego le aplico a cada pagina al elemento del menu que corresponda dicha clase, me funciona con todos los navegadores, incluso si selecciono un menu y un submenu, aplicando clases distintas.

esta bien aplicada esa tecnica o es mas correcto usar el target y java. ¿?
son dos temas distintos. creo entender que tu cambias de página mientas que en este temas no se trata de eso sino de resaltar la opción seleccionada por el usuario, todo en la misma página.

respondiendo a tu pregunta. la pseudo clase no puedes usarla, javascript es una posibilidad usando el objeto window.name o storage. otra posibilidad es hacerlo del lado del servidor
  #5 (permalink)  
Antiguo 10/05/2011, 04:06
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 13 años
Puntos: 20
Respuesta: Seleccionar con estilo un elemento de menu
ahora entendi que la cuestion era seleccionar en una misma pagina y no cambiando de pagina, y efectivamente lo unico que he visto para eso son los menus hechos con java.

gracias por la aclaracion.
__________________
Everybody Else It's Doing It, So Why Can't We?

Etiquetas: estilo, seleccionar
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:21.