Skip to main content
se añadieron 422 caracteres en el cuerpo
Origen Enlace
Cris223511.dev
  • 9.3k
  • 4
  • 7
  • 31

cuandoCuando quiero mostrar el submenú el fondo de la navbar también se hace más grande, ya que el submenú está dentro de ese bloque, pero quiero que la navbar se quede igual, sin cambiar su tamaño, y el submenú quede "flotando" de forma que sólo se muestre el submenú de ese botón sin afectar nada más, he probado con los position pero no me dan el resultado que busco, únicamente el fixedfixed lo uso para que la navbar siga al usuario al desplazarse por la página, intenté igualmente haciéndohaciendo el fondo con un bloque aparte poniendoleponiéndole las propiedades y position absoluteposition: absolute pero al cambio de resolución se desarma y no queda cómo quiero

HTML.

    <nav class="navCenter">
        <block>
          <button class="b">Clases
            <a href="offroad.html" class="hidden a1">Todo Terreno</a>
            <a href="sport.html" class="hidden a2">Deportivas</a>
          </button>
        </block>
        <block>
          <button class="b">Cilindraje
          <a href="" class="hidden">300-500</a>
          <a href="" class="hidden">600-800</a>
          <a href="" class="hidden">900-1300</a>
        </button>
        </block>
        <block>
          <button class="b">Marcas
          <a href="" class="hidden">BMW</a>
          <a href="" class="hidden">Yamaha</a>
          <a href="" class="hidden">Kawasaki</a>
          <a href="" class="hidden">KTM</a>
        </button>
        </block>
    </nav>

CSS

.navCenter{
    border: 3px solid green;
    background-color: rgb(0, 131, 0);
    margin-top: -1%;
    margin-bottom: 30px;
    text-align: center !important;
    padding-bottom: 0vmin;
    position: fixed;
    width: 98.8%;
    z-index: 2;

}

button{
    font-weight: 550;
    font-size: 0.4cm;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border: 3px red;
    background-color: darkgreen;
    color: aliceblue;
    z-index: 1;
    margin: 4px;
    margin-right: 10%;
    position: relative;
    margin-left: 10%;
    width: max-content;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    border-radius: 25px;    
}

button .hidden{
    display: none;

}

button:hover{
    background-color: rgb(78, 207, 78);
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 0%;
}

button:hover .hidden{
    margin-top: 8px;
    display: flex;
    z-index: 3;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

a{
    background-color: rgb(9, 105, 9);
    padding: 2px;
    padding-left: 4px;
    font-size: small;
    font-weight: lighter;
    color: rgb(250, 250, 250);
    text-decoration: none;
    margin-left: 20px;
    text-align: center;
    border-radius: 25px;
    padding: 6px;
    width: auto;
    height: auto;
    max-width: max-content;
    box-sizing: content-box;
}

article{
    margin-top: 5%;
    position: absolute;
    z-index: 1;
}


a:hover{
    background-color: rgb(93, 201, 93);
}
  <nav class="navCenter">
    <block>
      <button class="b">Clases
        <a href="offroad.html" class="hidden a1">Todo Terreno</a>
        <a href="sport.html" class="hidden a2">Deportivas</a>
      </button>
    </block>
    <block>
      <button class="b">Cilindraje
      <a href="" class="hidden">300-500</a>
      <a href="" class="hidden">600-800</a>
      <a href="" class="hidden">900-1300</a>
    </button>
    </block>
    <block>
      <button class="b">Marcas
      <a href="" class="hidden">BMW</a>
      <a href="" class="hidden">Yamaha</a>
      <a href="" class="hidden">Kawasaki</a>
      <a href="" class="hidden">KTM</a>
    </button>
    </block>
  </nav>
.navCenter{
    border: 3px solid green;
    background-color: rgb(0, 131, 0);
    margin-top: -1%;
    margin-bottom: 30px;
    text-align: center !important;
    padding-bottom: 0vmin;
    position: fixed;
    width: 98.8%;
    z-index: 2;

}

button{
    font-weight: 550;
    font-size: 0.4cm;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border: 3px red;
    background-color: darkgreen;
    color: aliceblue;
    z-index: 1;
    margin: 4px;
    margin-right: 10%;
    position: relative;
    margin-left: 10%;
    width: max-content;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    border-radius: 25px;    
}

button .hidden{
    display: none;

}

button:hover{
    background-color: rgb(78, 207, 78);
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 0%;
}

button:hover .hidden{
    margin-top: 8px;
    display: flex;
    z-index: 3;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

a{
    background-color: rgb(9, 105, 9);
    padding: 2px;
    padding-left: 4px;
    font-size: small;
    font-weight: lighter;
    color: rgb(250, 250, 250);
    text-decoration: none;
    margin-left: 20px;
    text-align: center;
    border-radius: 25px;
    padding: 6px;
    width: auto;
    height: auto;
    max-width: max-content;
    box-sizing: content-box;
}

article{
    margin-top: 5%;
    position: absolute;
    z-index: 1;
}


a:hover{
    background-color: rgb(93, 201, 93);
}
 

cuando quiero mostrar el submenú el fondo de la navbar también se hace más grande, ya que el submenú está dentro de ese bloque, pero quiero que la navbar se quede igual, sin cambiar su tamaño, y el submenú quede "flotando" de forma que sólo se muestre el submenú de ese botón sin afectar nada más, he probado con los position pero no me dan el resultado que busco, únicamente el fixed lo uso para que la navbar siga al usuario al desplazarse por la página, intenté igualmente haciéndo el fondo con un bloque aparte poniendole las propiedades y position absolute pero al cambio de resolución se desarma y no queda cómo quiero

HTML

    <nav class="navCenter">
        <block>
          <button class="b">Clases
            <a href="offroad.html" class="hidden a1">Todo Terreno</a>
            <a href="sport.html" class="hidden a2">Deportivas</a>
          </button>
        </block>
        <block>
          <button class="b">Cilindraje
          <a href="" class="hidden">300-500</a>
          <a href="" class="hidden">600-800</a>
          <a href="" class="hidden">900-1300</a>
        </button>
        </block>
        <block>
          <button class="b">Marcas
          <a href="" class="hidden">BMW</a>
          <a href="" class="hidden">Yamaha</a>
          <a href="" class="hidden">Kawasaki</a>
          <a href="" class="hidden">KTM</a>
        </button>
        </block>
    </nav>

CSS

.navCenter{
    border: 3px solid green;
    background-color: rgb(0, 131, 0);
    margin-top: -1%;
    margin-bottom: 30px;
    text-align: center !important;
    padding-bottom: 0vmin;
    position: fixed;
    width: 98.8%;
    z-index: 2;

}

button{
    font-weight: 550;
    font-size: 0.4cm;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border: 3px red;
    background-color: darkgreen;
    color: aliceblue;
    z-index: 1;
    margin: 4px;
    margin-right: 10%;
    position: relative;
    margin-left: 10%;
    width: max-content;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    border-radius: 25px;    
}

button .hidden{
    display: none;

}

button:hover{
    background-color: rgb(78, 207, 78);
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 0%;
}

button:hover .hidden{
    margin-top: 8px;
    display: flex;
    z-index: 3;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

a{
    background-color: rgb(9, 105, 9);
    padding: 2px;
    padding-left: 4px;
    font-size: small;
    font-weight: lighter;
    color: rgb(250, 250, 250);
    text-decoration: none;
    margin-left: 20px;
    text-align: center;
    border-radius: 25px;
    padding: 6px;
    width: auto;
    height: auto;
    max-width: max-content;
    box-sizing: content-box;
}

article{
    margin-top: 5%;
    position: absolute;
    z-index: 1;
}


a:hover{
    background-color: rgb(93, 201, 93);
}

Cuando quiero mostrar el submenú el fondo de la navbar también se hace más grande, ya que el submenú está dentro de ese bloque, pero quiero que la navbar se quede igual, sin cambiar su tamaño, y el submenú quede "flotando" de forma que sólo se muestre el submenú de ese botón sin afectar nada más, he probado con los position pero no me dan el resultado que busco, únicamente el fixed lo uso para que la navbar siga al usuario al desplazarse por la página, intenté igualmente haciendo el fondo con un bloque aparte poniéndole las propiedades y position: absolute pero al cambio de resolución se desarma y no queda cómo quiero.

.navCenter{
    border: 3px solid green;
    background-color: rgb(0, 131, 0);
    margin-top: -1%;
    margin-bottom: 30px;
    text-align: center !important;
    padding-bottom: 0vmin;
    position: fixed;
    width: 98.8%;
    z-index: 2;

}

button{
    font-weight: 550;
    font-size: 0.4cm;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border: 3px red;
    background-color: darkgreen;
    color: aliceblue;
    z-index: 1;
    margin: 4px;
    margin-right: 10%;
    position: relative;
    margin-left: 10%;
    width: max-content;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    border-radius: 25px;    
}

button .hidden{
    display: none;

}

button:hover{
    background-color: rgb(78, 207, 78);
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 0%;
}

button:hover .hidden{
    margin-top: 8px;
    display: flex;
    z-index: 3;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

a{
    background-color: rgb(9, 105, 9);
    padding: 2px;
    padding-left: 4px;
    font-size: small;
    font-weight: lighter;
    color: rgb(250, 250, 250);
    text-decoration: none;
    margin-left: 20px;
    text-align: center;
    border-radius: 25px;
    padding: 6px;
    width: auto;
    height: auto;
    max-width: max-content;
    box-sizing: content-box;
}

article{
    margin-top: 5%;
    position: absolute;
    z-index: 1;
}


a:hover{
    background-color: rgb(93, 201, 93);
}
  <nav class="navCenter">
    <block>
      <button class="b">Clases
        <a href="offroad.html" class="hidden a1">Todo Terreno</a>
        <a href="sport.html" class="hidden a2">Deportivas</a>
      </button>
    </block>
    <block>
      <button class="b">Cilindraje
      <a href="" class="hidden">300-500</a>
      <a href="" class="hidden">600-800</a>
      <a href="" class="hidden">900-1300</a>
    </button>
    </block>
    <block>
      <button class="b">Marcas
      <a href="" class="hidden">BMW</a>
      <a href="" class="hidden">Yamaha</a>
      <a href="" class="hidden">Kawasaki</a>
      <a href="" class="hidden">KTM</a>
    </button>
    </block>
  </nav>
 

Origen Enlace
David
  • 13
  • 3

cómo hago que la navbar se mantenga igual al mostrar un submenú

cuando quiero mostrar el submenú el fondo de la navbar también se hace más grande, ya que el submenú está dentro de ese bloque, pero quiero que la navbar se quede igual, sin cambiar su tamaño, y el submenú quede "flotando" de forma que sólo se muestre el submenú de ese botón sin afectar nada más, he probado con los position pero no me dan el resultado que busco, únicamente el fixed lo uso para que la navbar siga al usuario al desplazarse por la página, intenté igualmente haciéndo el fondo con un bloque aparte poniendole las propiedades y position absolute pero al cambio de resolución se desarma y no queda cómo quiero

HTML

    <nav class="navCenter">
        <block>
          <button class="b">Clases
            <a href="offroad.html" class="hidden a1">Todo Terreno</a>
            <a href="sport.html" class="hidden a2">Deportivas</a>
          </button>
        </block>
        <block>
          <button class="b">Cilindraje
          <a href="" class="hidden">300-500</a>
          <a href="" class="hidden">600-800</a>
          <a href="" class="hidden">900-1300</a>
        </button>
        </block>
        <block>
          <button class="b">Marcas
          <a href="" class="hidden">BMW</a>
          <a href="" class="hidden">Yamaha</a>
          <a href="" class="hidden">Kawasaki</a>
          <a href="" class="hidden">KTM</a>
        </button>
        </block>
    </nav>

CSS

.navCenter{
    border: 3px solid green;
    background-color: rgb(0, 131, 0);
    margin-top: -1%;
    margin-bottom: 30px;
    text-align: center !important;
    padding-bottom: 0vmin;
    position: fixed;
    width: 98.8%;
    z-index: 2;

}

button{
    font-weight: 550;
    font-size: 0.4cm;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border: 3px red;
    background-color: darkgreen;
    color: aliceblue;
    z-index: 1;
    margin: 4px;
    margin-right: 10%;
    position: relative;
    margin-left: 10%;
    width: max-content;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    border-radius: 25px;    
}

button .hidden{
    display: none;

}

button:hover{
    background-color: rgb(78, 207, 78);
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 0%;
}

button:hover .hidden{
    margin-top: 8px;
    display: flex;
    z-index: 3;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

a{
    background-color: rgb(9, 105, 9);
    padding: 2px;
    padding-left: 4px;
    font-size: small;
    font-weight: lighter;
    color: rgb(250, 250, 250);
    text-decoration: none;
    margin-left: 20px;
    text-align: center;
    border-radius: 25px;
    padding: 6px;
    width: auto;
    height: auto;
    max-width: max-content;
    box-sizing: content-box;
}

article{
    margin-top: 5%;
    position: absolute;
    z-index: 1;
}


a:hover{
    background-color: rgb(93, 201, 93);
}