Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Sub-menú sin borde

 Estas en el tema de Sub-menú sin borde en el foro de CSS en Foros del Web. Hola a todos.. Tengo este código que encontré en Internet hace un tiempo para hacer un menú vertical tipo acordeón. Modifique para cargar un menu... ...
  #1 (permalink)  
Antiguo 06/07/2014, 08:21
Avatar de Beuses  
Fecha de Ingreso: marzo-2009
Ubicación: Maracaibo
Mensajes: 132
Antigüedad: 15 años, 8 meses
Puntos: 5
Pregunta Sub-menú sin borde
Hola a todos..
Tengo este código que encontré en Internet hace un tiempo para hacer un menú vertical tipo acordeón.

Modifique para cargar un menu...
Código PHP:
<ul id="nav">
  <?php
    $sql_clasi = mysql_query(" SELECT id_clasi, nombre_clasi FROM tbl_clasificacion
    WHERE tipo_clasi = '0' or tipo_clasi = '1' ORDER BY id_clasi ASC")
    or die("Error al leer base de datos: ".mysql_error());
    $NumClas = mysql_num_rows($sql_clasi);
    for($i=0; $i<$NumClas; $i++){
        $RowsClas = mysql_fetch_array($sql_clasi);
        $IdClas = $RowsClas["id_clasi"];
        $NombreClas = utf8_encode($RowsClas["nombre_clasi"]);
  ?>
  <li>
    <a href="#" class="sub" tabindex="1">
     <img src="imagenes/punta_2.gif" />
     <b style="font-size:10px"><?php echo $NombreClas;?></b>
    </a>
    <img src="imagenes/up.gif" alt="" />
    <ul>
       <?php
          $sql_subclas = mysql_query("SELECT id_catclasi, nombre_catclasi FROM 
          tbl_cat_clasi WHERE id_clasi=".$IdClas." ORDER BY nombre_catclasi ASC")
          or die("Error al leer base de datos: ".mysql_error());
          $NumSubClas = mysql_num_rows($sql_subclas);
          if($NumSubClas>0){
              for($j=0; $j<$NumSubClas; $j++){
                  $RowsSubClas = mysql_fetch_array($sql_subclas);
                  $IdSubClas = $RowsSubClas["id_catclasi"];
                  $NombreSubClas = utf8_encode($RowsSubClas["nombre_catclasi"]);
      ?>
      <li style="margin-left:15px;">
         <a href="directorio-resultados?IdClas=<?php echo $IdClas;?>&IdSubClas=<?php echo $IdSubClas;?>">
            <img src="imagenes/punta_2.gif" />
            <?php echo $NombreSubClas;?>
         </a>
      </li>
      <?php
        } // for($j=0; $j<$NumSub; $j++)
     }// if($NumSub>0)
      ?>
    </ul>
   </li>
   <?php
    }// for($i=0; $i<$NumCat; $i++)
   ?> 
</ul>
Y el CSS para darle el diseño y función al menú..

Código CSS: 
Ver original
  1. #nav {
  2.     border:2px solid grey;
  3.     border-radius:5px;
  4.     -moz-border-radius:5px;
  5.     -webkit-border-radius:5px;
  6.     margin-right:8px;
  7.     margin-top:auto;
  8. }
  9. #nav, #nav ul {
  10.     list-style:none;
  11.     padding:0;
  12. }
  13. #nav ul {
  14.     position:relative;
  15.     z-index:-1;
  16. }
  17. #nav li {
  18.     position:relative;
  19.     z-index:100;
  20. }
  21. #nav ul li {
  22.     margin:0;
  23.     padding:0;
  24.     list-style:none;
  25.     height:0;
  26.     overflow: hidden;
  27.     transition:1s;
  28.     -moz-transition:1s;
  29.     -webkit-transition:1s;
  30. }
  31. #nav li a {
  32.     background-color:#FFFFFF;
  33.     color:#000;
  34.     display:block;
  35.     font-size:11px;
  36.     line-height:28px;
  37.     outline:0;
  38.     padding-left:0px;
  39.     text-decoration:none;
  40. }
  41. #nav li a + img {
  42.     cursor:pointer;
  43.     display:none;
  44.     height:28px;
  45.     left:0;
  46.     position:absolute;
  47.     top:0;
  48.     width:160px;
  49. }
  50. /* Boton categorias */
  51. #nav li a img {
  52.     border-width:0px;
  53.     height:13px;
  54.     line-height:28px;
  55.     margin-right:0px;
  56.     vertical-align:middle;
  57.     width:11px;
  58. }
  59. #nav li a:hover {
  60.     background-color:#bcbdc1;
  61. }
  62. #nav ul li a {
  63.     background-color:#FFF;
  64.     color:#000;
  65.     font-size:11px;
  66.     line-height:22px;
  67. }
  68. #nav ul li a:hover {
  69.     background-color:#ddd;
  70.     color:#444;
  71. }
  72. /* Boton subcategorias */
  73. #nav ul li a img {
  74.     background: url("../images/punta_2.gif") no-repeat;
  75.     border-width:0px;
  76.     height:13px;
  77.     line-height:22px;
  78.     margin-right:0px;
  79.     vertical-align:middle;
  80.     width:11px;
  81. }
  82. #nav ul li:nth-child(odd) a img {
  83.     background:url("../images/punta_2.gif") no-repeat;
  84. }
  85. #nav a.sub:focus {
  86.     background:#bcbdc1;
  87.     outline:0;
  88. }
  89. #nav a:focus ~ ul li{
  90.      height: 20px;
  91.     -moz-transition:  0.4s linear;
  92.     -ms-transition: 0.4s linear;
  93.     -o-transition: 0.4s linears;
  94.     -webkit-transition: 0.4s linears;
  95.     transition: 0.4s linear;
  96. }
  97. #nav a:focus + img, #nav a:active + img {
  98.     display:block;
  99. }
  100. #nav a.sub:active {
  101.     background:#bcbdc1;
  102.     outline:0;
  103. }
  104. #nav a:active ~ ul li {
  105.     margin-top:0;
  106. }
  107. #nav ul:hover li {
  108.     margin-top:0;
  109. }

Esto me funciona..
Lo que quiero es que el sub-menu me aparezca sin bordes. Así:


Es esto posible?? no entiendo muy bien el css.
Muchas gracias de antemano..
  #2 (permalink)  
Antiguo 06/07/2014, 09:24
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Sub-menú sin borde
Tendrías que ponerle el borde a cada enlace individualmente, y así los elementos de la lista ni la lista tendrán bordes. Otra opción es hacer que el submenú tenga un fondo blanco y ajustes el tamaño para que cubra esos bordes.

Como aquí de PHP no sabemos, es mejor que publiques sólo el código HTML que devuelve ese código, es innecesario lo que hagas en PHP para cuestiones de CSS.
  #3 (permalink)  
Antiguo 07/07/2014, 10:44
Avatar de Beuses  
Fecha de Ingreso: marzo-2009
Ubicación: Maracaibo
Mensajes: 132
Antigüedad: 15 años, 8 meses
Puntos: 5
Respuesta: Sub-menú sin borde
Ok, Perdon por el php :-$
Código HTML: 
Ver original
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Menu</title>
  6.   <link rel="stylesheet" href="css.css">
  7. </head>
  8. <body>
  9. <ul id="nav">
  10.   <li>
  11.     <a href="#" class="sub" tabindex="1"><img src="imagenes/punta_2.gif" /><b style="font-size:10px">Numeros</b></a>
  12.     <img src="imagenes/up.gif" alt="" />
  13.     <ul>
  14.       <li style="margin-left:15px;">
  15.          <a href="#"><img src="imagenes/punta_2.gif" />Uno</a>
  16.       </li>
  17.       <li style="margin-left:15px;">
  18.          <a href="#"><img src="imagenes/punta_2.gif" />Dos</a>
  19.       </li>
  20.       <li style="margin-left:15px;">
  21.          <a href="#"><img src="imagenes/punta_2.gif" />Tres</a>
  22.       </li>
  23.     </ul>
  24.    </li>
  25.    <li>
  26.     <a href="#" class="sub" tabindex="1"><img src="imagenes/punta_2.gif" /><b style="font-size:10px">Letras</b></a>
  27.     <img src="imagenes/up.gif" alt="" />
  28.     <ul>
  29.       <li style="margin-left:15px;">
  30.          <a href="#"><img src="imagenes/punta_2.gif" />A</a>
  31.       </li>
  32.       <li style="margin-left:15px;">
  33.          <a href="#"><img src="imagenes/punta_2.gif" />B</a>
  34.       </li>
  35.       <li style="margin-left:15px;">
  36.          <a href="#"><img src="imagenes/punta_2.gif" />C</a>
  37.       </li>
  38.     </ul>
  39.    </li>
  40. </ul>
  41. </body>
  42. </html>

Cambio puro html ^_^

Tratareee de hacer lo que me propones con el css.. pzin
Muchas gracias por tu respuesta..
  #4 (permalink)  
Antiguo 09/07/2014, 08:02
Avatar de Beuses  
Fecha de Ingreso: marzo-2009
Ubicación: Maracaibo
Mensajes: 132
Antigüedad: 15 años, 8 meses
Puntos: 5
Exclamación Respuesta: Sub-menú sin borde
Bueno, luego de leer tu ayuda he hecho asi en el html:

Código HTML: 
Ver original
  1. <ul id="nav">
  2.   <li>
  3.     <a href="#" class="sub" tabindex="1"><img src="imagenes/punta_2.gif" /><b style="font-size:10px">Numeros</b></a>
  4.     <img src="imagenes/up.gif" alt="" />
  5.     <ul class="RemoveLine">
  6.       <li style="margin-left:15px;">
  7.          <a href="#"><img src="imagenes/punta_2.gif" />Uno</a>
  8.       </li>
  9.       <li style="margin-left:15px;">
  10.          <a href="#"><img src="imagenes/punta_2.gif" />Dos</a>
  11.       </li>
  12.       <li style="margin-left:15px;">
  13.          <a href="#"><img src="imagenes/punta_2.gif" />Tres</a>
  14.       </li>
  15.     </ul>
  16.    </li>
  17.    <li>
  18.     <a href="#" class="sub" tabindex="1"><img src="imagenes/punta_2.gif" /><b style="font-size:10px">Letras</b></a>
  19.     <img src="imagenes/up.gif" alt="" />
  20.     <ul  class="RemoveLine">
  21.       <li style="margin-left:15px;">
  22.          <a href="#"><img src="imagenes/punta_2.gif" />A</a>
  23.       </li>
  24.       <li style="margin-left:15px;">
  25.          <a href="#"><img src="imagenes/punta_2.gif" />B</a>
  26.       </li>
  27.       <li style="margin-left:15px;">
  28.          <a href="#"><img src="imagenes/punta_2.gif" />C</a>
  29.       </li>
  30.     </ul>
  31.    </li>
  32.    <li>
  33.     <a href="#" class="sub" tabindex="1"><img src="imagenes/punta_2.gif" /><b style="font-size:10px">Lenguajes</b></a>
  34.     <img src="imagenes/up.gif" alt="" />
  35.     <ul  class="RemoveLine">
  36.       <li style="margin-left:15px;">
  37.          <a href="#"><img src="imagenes/punta_2.gif" />PHP</a>
  38.       </li>
  39.       <li style="margin-left:15px;">
  40.          <a href="#"><img src="imagenes/punta_2.gif" />C++</a>
  41.       </li>
  42.       <li style="margin-left:15px;">
  43.          <a href="#"><img src="imagenes/punta_2.gif" />Script</a>
  44.       </li>
  45.     </ul>
  46.    </li>
  47. </ul>

Y en el CSS agregue un estilo mas así:

Código CSS: 
Ver original
  1. .RemoveLine{
  2.     margin-left:-2px;
  3.     border-left:2px solid white;
  4.     margin-right:-2px;
  5.     border-right:2px solid white;
  6. }

No se si sea la mejor manera.. pero hasta ahora me ha servido

Muchas gracias nuevamente pzin
  #5 (permalink)  
Antiguo 09/07/2014, 08:06
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Sub-menú sin borde
Cita:
Iniciado por Beuses Ver Mensaje
No se si sea la mejor manera.. pero hasta ahora me ha servido
Si lo has hecho por tu cuenta, funciona y te vale, es la mejor forma.

Para este caso supongo que no hay mejor o peor forma, sino varias soluciones distintas.

Etiquetas: bordes, menu-acordion
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 08:57.