Tema: Seleccionar con estilo un elemento de menu
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/05/2011, 07:12
Avatar de Fernarey1810
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