-1
Good evening guys, I’m making a mini website for the college’s Web Programming Test 1, but there were some problems in it.
I made a responsive menu, with dropdown and Collapse for when the screen size is small, but NO menu button works, they are configured correctly on, href is correct, but they still don’t work. And to make it even weirder, the dropdown submenus, which are written THE SAME WAY as any other menu option, work, even if the requested file doesn’t exist, they open the error page of "file not found".
Below follows my used HTML and CSS code:
https://codepen.io/joaocasarin/pen/xxKmboY
Please help me, I have no idea what it is, and even my friends don’t know.
<html>
<head>
<title>Tibia</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("ul.nav li.dropdown").click(function() {
$(".dropdown-menu").stop(true, true).fadeToggle(100);
});
});
</script>
</head>
<body>
<div class="topo">
<div class="logo">
<a href="index.html"><img src="img/Tibia.png" alt="Tibia Logo" height="80"></a>
</div>
<div class="container-fluid socialmedia">
<a href="https://pt-br.facebook.com/tibia/" class="fa fa-facebook" target="_blank"></a>
<a href="https://www.instagram.com/tibiabrcom/" class="fa fa-instagram" target="_blank"></a>
<a href="https://twitter.com/tibia" class="fa fa-twitter" target="_blank"></a>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#alvo">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="alvo">
<a class="navbar-brand"><img src="img/Tibia_icon.png" height="32px"></a>
<ul class="navbar-nav" id="menu">
<li class="nav-item">
<a class="nav-link" href="index.html" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cadastro.html" data-toggle="tab">Cadastro</a>
</li>
<li class="nav-item">
<a class="nav-link" href="calendario.html" data-toggle="tab">Calendário</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contato.html" data-toggle="tab">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="galeria.html" data-toggle="tab">Galeria</a>
</li>
<li class="nav-item">
<a class="nav-link" href="posts.html" data-toggle="tab">Posts</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" style="cursor: pointer;">
Vocations
<span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdown_target">
<a class="dropdown-item" href="druid.html">Druid</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="knight.html">Knight</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="paladin.html">Paladin</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="sorcerer.html">Sorcerer</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="corpo">
</div>
</body>
</html>
Edit ------ I tested it here and it’s working its menu, see if the files are in the same folder, see if the names are right. ps: I even comment, but I have no reputation...
– Luan Gabriel
Even if the files are not in the same folder, the Knight, Druid, Sorcerer and Paladin menus work
– casarin