Os menus suspensos do meu site HTML não funcionam

Baldomero Gar · 20/09/2023

Hola. ¿Alguien sabe cómo puedo arreglar este código para que funcionen los desplegables del menú? Cualquier ayuda, os la agradeceré mucho. Un saludo


<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index" style="padding-left: 0px;"><img src="img/logo.jpg"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li <?php if($pagina=="inicio"){ echo 'class="active"';}; ?>><a href="index">INICIO</a></li>
<li <?php if($pagina=="trayectoria"){ echo 'class="active"';}; ?>><a href="trayectoria">TRAYECTORIA</a></li>
<li <?php if($pagina=="tecnicas"){ echo 'class="active"';}; ?> class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">TÉCNICAS</a>
<ul class="dropdown-menu">
<li><a href="tecnicas-proceso">Proceso de elaboración</a></li>
<li><a href="tecnicas-restauracion">Restauración</a></li>
</ul>
</li>
<li <?php if($pagina=="trabajos"){ echo 'class="active"';}; ?> class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">TRABAJOS</a>
<ul class="dropdown-menu">
<li><a href="trabajos-bordado">Bordados en oro, plata y sedas</a></li>
<li><a href="trabajos-aplicacion">Bordados en aplicación</a></li>
</ul>
</li>
<li <?php if($pagina=="contacto"){ echo 'class="active"';}; ?> ><a href="contacto">CONTACTO</a></li>
</ul>
</div>
</div>
</div>

Puko · 20/09/2023

1.- acomodalo asi, al menos para "saber" que es todo eso:

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index" style="padding-left: 0px;"><img src="img/logo.jpg"></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li <?php if($pagina=="inicio"){ echo 'class="active"';}; ?>><a href="index">INICIO</a></li>
        <li <?php if($pagina=="trayectoria"){ echo 'class="active"';}; ?>><a href="trayectoria">TRAYECTORIA</a></li>
        <li <?php if($pagina=="tecnicas"){ echo 'class="active"';}; ?> class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">TÉCNICAS</a>
          <ul class="dropdown-menu">
            <li><a href="tecnicas-proceso">Proceso de elaboración</a></li>
            <li><a href="tecnicas-restauracion">Restauración</a></li>
          </ul>
        </li>
        <li <?php if($pagina=="trabajos"){ echo 'class="active"';}; ?> class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">TRABAJOS</a>
          <ul class="dropdown-menu">
            <li><a href="trabajos-bordado">Bordados en oro, plata y sedas</a></li>
            <li><a href="trabajos-aplicacion">Bordados en aplicación</a></li>
          </ul>
        </li>
        <li <?php if($pagina=="contacto"){ echo 'class="active"';}; ?> ><a href="contacto">CONTACTO</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

2. y el css/style, nomas veo esto:

3. y el script?

Puko · 20/09/2023

¿qué versión usa de jquery, bootstrap.min.js y bootstrap.min.css?

ya mero llego a tu error ... si abre pero se ve algo del codigo

Puko · 20/09/2023

usa el codigo en este orden (tampoco se que versiones usa tu codigo y si le pusiste las mismas)
<link rel="stylesheet" href=" bootstrap.min.css">
<script src=" jquery .min.js"></script>
<script src=" bootstrap.min.js"></script>

y donde se ve parte del codigo va asi: (yo creo)
<li <?php if($pagina == "tecnicas"){ echo 'class="active dropdown"'; } else { echo 'class="dropdown"'; } ?>>

y en el siguiente <li> igual

🤭

Baldomero Gar · 20/09/2023

Puko disse:
usa el codigo en este orden (tampoco se que versiones usa tu codigo y si le pusiste las mismas)
<link rel="stylesheet" href=" bootstrap.min.css">
<script src=" jquery .min.js"></script>
<script src=" bootstrap.min.js"></script>

y donde se ve parte del codigo va asi: (yo creo)
<li <?php if($pagina == "tecnicas"){ echo 'class="active dropdown"'; } else { echo 'class="dropdown"'; } ?>>

y en el siguiente <li> igual

Ver o anexo 1099024
🤭

Muchísimas gracias, Puko. Has sido muy amable

¿Me podrías facilitar cómo quedaría el código completo? No sé muy bien dónde hay que colocar / sustituir lo que me has pasado. Gracias!

Puko · 20/09/2023

Baldomero Gar disse:
cómo quedaría el código completo?

solo le puse la versión nueva de jquery
bootstrap no se que versión es la actual
le cambie lo que se veia del codigo
los > me imagino que se ven asi porque es en php y lo hice asi en html:

HTML:

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index" style="padding-left: 0px;"><img src="img/logo.jpg"></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li <?php if($pagina=="inicio"){ echo 'class="active"';}; ?>>
          <a href="index">INICIO</a>
        </li>
        <li <?php if($pagina=="trayectoria"){ echo 'class="active"';}; ?>>
          <a href="trayectoria">TRAYECTORIA</a>
        </li>
        <li <?php if($pagina == "tecnicas"){ echo 'class="active dropdown"'; } else { echo 'class="dropdown"'; } ?>>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">TÉCNICAS</a>
          <ul class="dropdown-menu">
            <li><a href="tecnicas-proceso">Proceso de elaboración</a></li>
            <li><a href="tecnicas-restauracion">Restauración</a></li>
          </ul>
        </li>
        <li <?php if($pagina == "trabajos"){ echo 'class="active dropdown"'; } else { echo 'class="dropdown"'; } ?>>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">TRABAJOS</a>
          <ul class="dropdown-menu">
            <li><a href="trabajos-bordado">Bordados en oro, plata y sedas</a></li>
            <li><a href="trabajos-aplicacion">Bordados en aplicación</a></li>
          </ul>
        </li>
        <li <?php if($pagina=="contacto"){ echo 'class="active"';}; ?> ><a href="contacto">CONTACTO</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

Baldomero Gar · 22/09/2023

MUCHAS GRACIAS!

Os menus suspensos do meu site HTML não funcionam

Baldomero Gar

Puko

Puko

Puko

Baldomero Gar

Puko

Baldomero Gar

Tópicos similares