In the previous article, we created a side navigation bar that we would like to be toggleable. The navigation bar should be hidden at the start. When the user clicks on the “Hamburger” icon, it should appear and disappear on the next click. To achieve this, we have to incorporate jQuery into our webpage. So, in this article, we will try to make our webpage more interactive with the help of jQuery functions, events, and effects.
Good to Know: Hamburger is the icon with 3 horizontal lines usually used for toggleable elements.
Downloading jQuery
The first step in using jQuery on your website is to download it.
- Go to the jQuery Download page.
- Click on the uncompressed development version link.
A new tab will open with lots of coding. - Press CTRL + A and the CTRL + C to copy the code.
- Now, open the jQuery.js file we created earlier, paste all the code, and save.
Alternatively, if you did not create the file earlier, you can right-click on the webpage, select Save As, and save the file in the same folder as the webpage.
jQuery is an open-source library, so we do not need to install it to use the functions. Hence, we can use its functions directly.
Creating JavaScript File
To use a jQuery file, we must create a separate JavaScript file where we will define our code.
- In Notepad++, create a new file.
- Save the file as “javascript.js”
Linking the files
Now, to link the jQuery and JavaScript files with HTML, paste the following code in <head>:
<script src="jquery.js"></script>
<script src="javascript.js"></script>
Please note that in order for jQuery functions to work, the jQuery file must be added before the JavaScript file. Otherwise, you will get unexpected results.
Hide the Side Panel
Now, let’s hide the side panel. You can do it in several ways, such as:
Using ‘display’ Property
The display property allows you to hide an element or make it block or inline. To hide an element, use none value for the display property as follows:
.side_menu{
width: 300px;
height: auto;
position: absolute;
margin-top: 50px;
border: 1px solid white;
border-radius: 5px;
display: none;
}
Using visibility Property
By setting the visibility property to hidden, you can also hide any element on the screen as follows:
.side_menu{
width: 300px;
height: auto;
position: absolute;
margin-top: 50px;
border: 1px solid white;
border-radius: 5px;
visibility: hidden;
}
Our sidebar will disappear in both ways:
You can use any approach here. I’ll use the display:none property.
Making the Sidebar Visible with jQuery
First, let’s try to make the sidebar visible with jQuery before moving forward to toggling.
Inside the JavaScript file, add the basic syntax:
$(document).ready(function(){
});
Now, let’s add a .click() event:
$(document).ready(function(){
$('.toggle_nav').click(function(){
});
});
Lastly, use the .show() function to display the sidebar as follows:
$(document).ready(function(){
$('.toggle_nav').click(function(){
$('.side_menu').show('slow');
});
});
Our sidebar becomes visible when we click on the Hamburger.
Making the Sidebar Toggleable
To make the sidebar toggling, simply replace the .show() with the .toggle()> function.
$(document).ready(function(){
$('.toggle_nav').click(function(){
$('.side_menu').toggle('slow');
});
});
Highlighting the Hovered Menu Item
Let’s add more interactivity to the webpage by fading out the menu items the user didn’t hover over. To do so, we’ll use the mouseenter() and mouseleave() events with the .fadeTo() effect.
The first step in achieving this would be assigning unique IDs to the items as follows:
<div id="item_1" class="menu_item">Assign item_2, item_3, and item_3 to the rest of the menu items.
In JavaScript, call the mouseenter() event on the item_1 and fade the remaining items to the preferred opacity. This is how your mouseenter() function should look like:
$('#item_1').mouseenter(function(){
$('#item_2').fadeTo("fast", 0.4);
$('#item_3').fadeTo("fast", 0.4);
$('#item_4').fadeTo("fast", 0.4);
});
To reset the items when the mouse leaves the item_1’s area, use the mouseleave() event on the same item and call the fadeTo() function with opacity set to 1:
$('#item_1').mouseleave(function(){
$('#item_2').fadeTo("fast", 1);
$('#item_3').fadeTo("fast", 1);
$('#item_4').fadeTo("fast", 1);
});
Do the same for the rest of the items. Make sure to change the IDs properly, or else you may get unwanted results. The final code should be as follows:
$(document).ready(function(){
$('.toggle_nav').click(function(){
$('.side_menu').toggle('slow');
});
//Highlighting Item 1
$('#item_1').mouseenter(function(){
$('#item_2').fadeTo("fast", 0.4);
$('#item_3').fadeTo("fast", 0.4);
$('#item_4').fadeTo("fast", 0.4);
});
$('#item_1').mouseleave(function(){
$('#item_2').fadeTo("fast", 1);
$('#item_3').fadeTo("fast", 1);
$('#item_4').fadeTo("fast", 1);
});
//Highlighting Item 2
$('#item_2').mouseenter(function(){
$('#item_1').fadeTo("fast", 0.4);
$('#item_3').fadeTo("fast", 0.4);
$('#item_4').fadeTo("fast", 0.4);
});
$('#item_2').mouseleave(function(){
$('#item_1').fadeTo("fast", 1);
$('#item_3').fadeTo("fast", 1);
$('#item_4').fadeTo("fast", 1);
});
//Highlighting Item 3
$('#item_3').mouseenter(function(){
$('#item_1').fadeTo("fast", 0.4);
$('#item_2').fadeTo("fast", 0.4);
$('#item_4').fadeTo("fast", 0.4);
});
$('#item_3').mouseleave(function(){
$('#item_1').fadeTo("fast", 1);
$('#item_2').fadeTo("fast", 1);
$('#item_4').fadeTo("fast", 1);
});
//Highlighting Item 4
$('#item_4').mouseenter(function(){
$('#item_1').fadeTo("fast", 0.4);
$('#item_2').fadeTo("fast", 0.4);
$('#item_3').fadeTo("fast", 0.4);
});
$('#item_4').mouseleave(function(){
$('#item_1').fadeTo("fast", 1);
$('#item_2').fadeTo("fast", 1);
$('#item_3').fadeTo("fast", 1);
});
});
You can also apply the same effects on the popular items by assigning unique IDs to them and calling the fadeTo() function on mouseenter() and mouseleave() events.
After assigning the popular_1 and popular_2 IDs to my popular items, I have added the following code to my JS file to apply the fading effect on my popular items:
//Highlighting Popular Items
$('#popular_1').mouseenter(function(){
$('#popular_2').fadeTo("fast", 0.4);
});
$('#popular_1').mouseleave(function(){
$('#popular_2').fadeTo("fast", 1);
});
$('#popular_2').mouseenter(function(){
$('#popular_1').fadeTo("fast", 0.4);
});
$('#popular_2').mouseleave(function(){
$('#popular_1').fadeTo("fast", 1);
});
Try using the other functions and events on your webpage for practice. In the next article, we will learn more jQuery functions for dynamically changing HTML and setting attributes.
