1

Estoy queriendo agregarle vinculo a los a href de un menu como ejemplo Chapas y chapas acanaladas que vinculen a un sitio pero no me deja. Quería saber como si hay alguna forma que ademas de que abra su respectiva solapa vincule a una pagina.

adjunto un fragmento de código donde quiero el vinculo.

<a class="nav-link dropdown-toggle" href="https://www.google.com/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

Por otro lado como hacer para que en mobile el menu no quede desplegado y se contraiga.

.categoria-prod #collapsingNavbar .dropdown .dropdown-menu {
  position: absolute;
  transform: translate3d(0px, 41px, 0px);
  top: -43px!important;
  left: 252px!important;
  will-change: transform;
  background: #868686;
  border-radius: initial;
  color: #fff;
  padding-top: 0;
  padding-bottom: 0;
}

.categoria-prod #collapsingNavbar .dropdown .hijas-de-hijas {
  position: absolute;
  transform: translate3d(0px, 41px, 0px);
  top: -42px!important;
  left: 218px!important;
  will-change: transform;
  background: #868686;
  border-radius: initial;
  color: #fff;
  font-size: 14px;
  padding-top: 0;
  padding-bottom: 0;
}

.categoria-prod #collapsingNavbar .dropdown-item.active,
.dropdown-item:active {
  background-color: #f5131f;
  color: #fff!important
}

.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a {
  color: #fff;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a:hover {
  color: #000;
  background: #fff;
}

.categoria-prod .bg-prod {
  background-color: #f5131f;
}

.categoria-prod .bg-prod .btn-dropdown {
  background-color: #f5131f;
  width: 100%;
  color: #fff;
  border-radius: initial!important;
  border: initial!important;
  text-align: left;
  padding: 10px 15px 10px 20px;
  border-color: initial!important;
  font-weight: 600;
  font-size: 17px;
}

.categoria-prod .bg-prod .btn-dropdown i {
  float: right;
  font-size: 23px;
}

.categoria-prod .bg-prod .navbar-collapse {
  padding-top: 0!important;
  background-color: #454545;
  border-radius: initial;
}

.categoria-prod .bg-prod .navbar-collapse li {
  margin: 18px 15px 18px 5px;
}

.categoria-prod .bg-prod .navbar-collapse li a {
  padding: 0px 0px 0 10px;
  color: #fff;
  width: 100%;
  display: block;
}

.categoria-prod .bg-prod .navbar-collapse li a:hover {
  text-decoration: none;
  color: #dcdcdc;
}

.categoria-prod .bg-prod .navbar-collapse li .padre li {
  margin: 5px 5px 10px 5px;
}

.categoria-prod .bg-prod .navbar-collapse li:last-child {
  margin: 18px 15px 8px 5px;
}

.categoria-prod .bg-prod .navbar-collapse li .padre li:last-child {
  margin: 0px 15px 0px 5px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 107%;
  background-color: #868686;
  margin-left: -1px;
  width: 100%
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
  border-radius: initial
}

.dropdown-submenu:hover>.dropdown-menu .submenu-hijo {
  left: 102%;
  margin: 0;
  padding: 0;
}

.categoria-prod .bg-prod .dropdown-submenu:hover>.dropdown-menu>li>a {
  padding: 0px 10px;
  margin: 0;
}

.categoria-prod .bg-prod .dropdown-submenu:hover>.dropdown-menu>li>a:hover {
  text-decoration: none;
  color: #dcdcdc
}

.categoria-prod .bg-prod .dropdown-submenu:hover>.dropdown-menu>li .submenu-hijo li {
  margin: 8px 10px 8px 0;
  padding: 0;
  border-radius: initial;
}

.categoria-prod .bg-prod .dropdown-submenu:hover>.dropdown-menu>li .submenu-hijo li a {
  font-size: 14px
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
}

#collapsingNavbar {
  position: absolute;
  z-index: 10;
  width: 100%;
  top: 57px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="container categoria-prod pt-3 pt-lg-0">
  <div class="row">
    <div class="col-lg-3 p-0 pl-lg-0 pr-lg-3">
      <div class="bg-prod">
        <div class="py-lg-3 ">
          <div class="dropdown">
            <a id="dLabel" role="button" class="btn btn-dropdown" href="/page.html" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                Producto 
                <i class="fas fa-list-ul"></i>
            </a>

            <ul class="dropdown-menu multi-level navbar-collapse collapse " role="menu" aria-labelledby="dropdownMenu" id="collapsingNavbar">
              <li><a href="#">Hierro</a></li>
              <li><a href="#">Perfiles</a></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="www.google.com">Chapas
				<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
                </a>
                <ul class="dropdown-menu padre">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="www.google.com">Chapas acanaladas
                    	<span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
                    </a>
                    <ul class="dropdown-menu submenu-hijo">
                      <li><a href="www.google.com">Chapa Acanalada Prepintada</a></li>
                      <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Tubos y caños</a></li>
                  <li><a href="#">Metal desplegado y rejilla</a></li>
                  <li><a href="#">Aislaciones y membranas</a></li>
                  <li><a href="#">Clavos y tornillos</a></li>
                  <li><a href="#">Alambres y tejidos</a></li>
                  <li><a href="#">Todo para herrería</a></li>
                  <li><a href="#">Soldadoras</a></li>
                  <li><a href="#">Herramientas eléctricas</a></li>
                </ul>
              </li>
              <li><a href="#">Tubos y caños</a></li>
              <li><a href="#">Metal desplegado y rejilla</a></li>
              <li><a href="#">Aislaciones y membranas</a></li>
              <li><a href="#">Clavos y tornillos</a></li>
              <li><a href="#">Alambres y tejidos</a></li>
              <li><a href="#">Todo para herrería</a></li>
              <li><a href="#">Soldadoras</a></li>
              <li><a href="#">Herramientas eléctricas</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

9
  • Pero si tu botón de dropdown va a mostrar otras opciones para que quieres que abra otro enlace? Ya no tendria sentido, o bien quieres lo uno o lo otro Commented el 15 jun. 2018 a las 14:41
  • Hola mira es medio rebuscado lo que me piden ya el HTML se va integrar luego en un wordpress woocomerce y me piden que cuando haga click en el menu desplegable en CHAPA muestre una pagina que seria como una especie de category con todas categoría de CHAPA como CHAPA ACANALADAS, etc. Y cuando hagas click en CHAPA ACANALADAS me muestre un archive con CHAPA PREPINTADA Etc y de ahi click al single, no se si se comprende. Si quizás es medio de gusto hacer todo ese proceso, pero me lo piden así.un ejemplo seria como esta pagina storehaus.com.ar en el menu producto.
    – MarianoF
    Commented el 15 jun. 2018 a las 14:49
  • Si es así, tienes que cambiar tu código, para que el menú desplegable se abra al pasar el mouse sobre el menú y para que se abra otro enlace al hacer click Commented el 15 jun. 2018 a las 14:53
  • Osea que no podría usar este ejemplo que estoy adjuntando arriba? tendría que buscar otro tipo de dropdown?
    – MarianoF
    Commented el 15 jun. 2018 a las 14:54
  • revisa esto: w3schools.com/bootstrap/… Commented el 15 jun. 2018 a las 14:58

1 respuesta 1

2

empezando por tu segunda pregunta puedes simplemente utilizar el siguiente script

if( isMobile.any() ) alert('Mobile');

preguntas si es un dispositivo movil, si lo es llamas a tu collapse:

$('.navbar-collapse').collapse('hide');

y respecto a su primera pregunta puedes utilizar un evento onclick, por ahora es la unica solucion que puedo darte, ya que el bootstrap desabilita los links dentro de su navbar. utiliza el evento onclick dentro de la etiqueta a:

<a onclick="abrelink('https://www.google.com.ec')" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >

y pasale el enlace que desees, luego mediante javascript, has lo siguiente:

    <script type="text/javascript">
    function abrelink(url){
        var a = document.createElement("a");
        a.target = "_blank";
        a.style="display:none";
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
   </script>

lo que hace esta funcion es crear una nueva etiqueta de html, ponerla oculta, insertarla en el documento con la url especifica, abrir el enlace y eliminar esta etiqueta para que no quede basura en tu documento.

9
  • Entonces poniendo este script if( isMobile.any() ) alert('Mobile'); $('.navbar-collapse').collapse('hide'); haria que en version mobile no quede desplegado?
    – MarianoF
    Commented el 15 jun. 2018 a las 17:19
  • exactamente, quitale el alert(), solo seria if( isMobile.any() ) $('.navbar-collapse').collapse('hide');
    – jeanpitx
    Commented el 15 jun. 2018 a las 17:23
  • sabes que no me funciono.
    – MarianoF
    Commented el 15 jun. 2018 a las 17:28
  • bueno tienes otra opcion, esa es una funcion que detecta el navegador si es de escritorio o móvil... o has la pregunta asi if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { console.log('Esto es un dispositivo móvil'); } blog.endeos.com/como-detectar-un-dispositivo-movil-con-jquery la otra opción amigo es detectar el tamaño del navegador.... preguntas si window.innerHeight< 100px o ajustalo a tus necesidades...
    – jeanpitx
    Commented el 15 jun. 2018 a las 17:48
  • imagino que has estado probando hacer la pantalla mas pequeña, conectate a la ip desde tu movil y prueba haber si te resulta... pero de lo que si estoy seguro y lo probe es del $('.navbar-collapse').collapse('hide');... con eso ocultas el navbar...
    – jeanpitx
    Commented el 15 jun. 2018 a las 17:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.