I have created a custom navbar/menu. Currently, it is loading CSS from my style.css and the JS is included in the PHP file using the following setup:
<link rel="stylesheet" href="style.css" type="text/css">
<nav> ... </nav>
<script>
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
</script>
The internal JS seems to be causing issues with the CSS loading.
Is there a way I can ensure that the called CSS loads before the JS while maintaining the current setup, without moving the Javascript to a separate .js file?
So far, I have attempted:
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">
<nav> ... </nav>
<script>
function initNavigation() {
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
}
</script>
</body/>
and
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<nav> ... </nav>
<script>
window.onload=function(){
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
}
</script>
</body/>
Can someone point out where I might have made a mistake? I'm thinking it could be related to the .ready part, but if so, I'm unsure how to address it without impacting the functionality of the JS.
Would changing the position of the JS to the head section below the CSS make a difference?