- Details
- Category: jQuery, HTML, CSS, JavaScript
There's load of ways of doing this. One of the simplest is to have the two states in the same image and then just changing the background position on hover. This way there's no extra wait for the hover image to load as its already there.
- Details
- Category: jQuery, HTML, CSS, JavaScript
We have to secure content from being stolen. So need to disable print screen, Cut, Copy, Paste, right-click, and Text Selection on a Website for end-users. I will show you how you can achieve this.
- Details
- Category: jQuery, HTML, CSS, JavaScript
How to make Sticky side div with Bootstrap 5, CSS, HTML
In this article, we will learn: How to make Sticky side div with Bootstrap 5
- Details
- Category: jQuery, HTML, CSS, JavaScript
How TO - Mobile Navigation Menu using CSS and JavaScript
In this article, we will learn: How to create a Mobile Navigation Menu with CSS and JavaScriptThis highlighted code is addition for mobile menu(will be visible on desktop too).
Step 1: Add CSS & JavaScript to template
May be inside same php file or template css file, you may insert this CSS.
/*********
MENU
*****************/
/* Style the navigation menu */
.topnav {
position: relative;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
color: #fb414d;
padding: 10px 15px;
text-decoration: none;
font-size: 17px;
display: block;
margin: 7px;
}
/* Style the hamburger menu */
.topnav a.icon {
background: #FFFFFF;
border:1px solid #fb414d;
border-radius:50%;
display: block;
position: absolute;
right: 0;
top: 0;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Also add following JavaScript:
<script>
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
x.style.position="absolute";
x.style.background="#FFFFFF";
x.style.right="10px";
x.style.width="250px";
}
}
</script>
Also check this : Desktop & Mobile menu in Joomla on Joomlafusion.com
Hope this helped.
Still need help! no problem, feel free to contact us Today