Exploring the functionalities of Bootstrap 4 and jQuery has been an interesting journey. I recently worked on creating a Navbar with 4 links, where the 4th link has a submenu that opens upon hover. However, I encountered an issue where this functionality only works without including the bootstrap CDN in the code.
I attempted to resolve this by downloading both the Bootstrap CSS and jQuery min JS files separately, but unfortunately, it did not solve the problem. While I could implement a custom solution using CSS, my preference is to achieve this functionality solely through jQuery.
Code
$(document).ready(function() {
$("#dropDown-nav, #submenu").mouseenter(function() {
console.log("mouse entered");
$("#submenu").show();
});
$("#submenu, #dropDown-nav").mouseleave(function() {
console.log("mouse left");
$("#submenu").hide();
});
$(".topnav a").click(function(event) {
$("a").css('background-color', '#2F3942');
$(".dropbtn").css('background-color', '#2F3942');
$(this).css('background-color', '#E1E1E1');
$("a").css('color', '#E1E1E1');
$(".dropbtn").css('color', '#E1E1E1');
$(this).css('color', '#2F3942');
});
$(".dropdown-content a").click(function(event) {
$(".topnav a").css('background-color', '#2F3942');
$(".dropbtn").css('background-color', '#E1E1E1');
$(this).css('background-color', '#E1E1E1');
$(".topnav a").css('color', '#E1E1E1');
$(".dropbtn").css('color', '#2F3942');
$(this).css('color', '#2F3942');
});
});
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}#mainNav {
text-align: left;
vertical-align: middle;
}
#mainNav_2 {
text-align: center;
font-size: 2em;
color: white;
font-weight: bolder;
}
#mainNav {
overflow: hidden;
background-color: #0D5DB8;
padding-left: 15px;
height: 6em;
}
body {
margin: 0;
font-family: Arial
}
.topnav {
overflow: hidden;
background-color: #2F3942;
}
.topnav a {
float: left;
display: block;
color: #E1E1E1;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.forMargin {
margin-right: 15px;
}
...
<!-- <div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div> -->My goal is to make the hover functionality work seamlessly with both Bootstrap and jQuery integration.