One of the many key ways to increase our Website’s performance on the front-end is to optimize our JavaScript. Code execution causes render blockings which lower your Page Speed score, which also lowers your SEO ranking, and so on. In some cases, a user can even have JavaScript disabled in his browser. Of course, for something like an e-commerce website, it is impossible to function without JavaScript. Yet still, the user might prefer checking out your products and then directly contacting you to place an order. Here we will show you a few pure CSS capabilities that can help you reduce your JavaScript code in cases like a Menu Navigation (Accordion even) toggle and an Image Slider.
However, you should note that the pure CSS image slider scrolling, on a desktop, will work with a mouse wheel or a relative touch / touch-pad gesture only. A little bit of JavaScript might be needed if your UX goal is to use buttons.
Pure CSS toggle buttons
HTML has an input element that can then be ‘transformed’ into a checkbox. Now fortunately for us this checkbox, like many other elements, will have our target pseudo class :checked. It will work just as you’d expect an <a href /> element to (i.e. :active). This means that the CSS selector :checked on our checkbox along with a siblings selector to target our menu layout combined, we can reveal or hide our menu.
Here is a full code example:
<style>
.menu{
display:none;
}
.toggle:checked + .menu{
display:block;
}
</style>
<input class="toggle" type="checkbox" />
<nav class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
There are also a few touch-ups that we can do like changing the look of our checkbox to an SVG icon. This trick requires an additional label element as it can be bound to our checkbox using the id attribute. Here is a full example:
<style>
.menu {
display: none;
}
.toggle {
display: none;
}
.icon {
cursor: pointer;
}
.toggle:checked + .icon + .menu {
display: block;
}
</style>
<input id="toggle" class="toggle" type="checkbox" />
<label class="icon" for="toggle">
<svg viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>
</label>
<nav class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
Try it out – no JavaScript required. The same method would work on accordions. Better yet, for accordions, you can even use the pure HTML method with the details element. Use the <summary> element if you want to add a title like “Read More” in between your <details>. Here is an example:
<details>
<summary>Read More</summary>
<p>Lorem ipsum dolor sit amet</p>
</details>
Quite simple isn’t it? The fewer bytes a client’s browser needs to download the better.
Pure CSS image slider
CSS has scroll-snap parameters that can be used to define our axis of the snapping position. Usually, sliders are horizontal so to make one as an example we will need a container element with a couple of images. Our container will have the scroll-snap-type style whilst the child elements – scroll-snap-align. For an additional overall smooth effect, we can add scroll-snap-stop to the image. Our code should look like this:
<style>
.container {
scroll-snap-type: x mandatory;
max-height: 400px;
display: flex;
overflow-x: scroll;
}
.child-image {
scroll-snap-align: start;
scroll-snap-type: always;
}
</style>
<div class="container">
<img
class="child-image"
src="awesome-1-1-image.webp"
height="400"
width="400"
/>
<img
class="child-image"
src="awesome-1-1-image-2.webp"
height="400"
width="400"
/>
</div>
The downside of this pure CSS method, as we have mentioned above, is that on a desktop you can scroll through the images using a mouse or a relative touch / touch-pad gesture only. The amount of JavaScript needed to scroll left or right is relatively low. When we have an overflow-x: scroll style applied, we can use JavaScript’s scrollLeft to slide through our images. Do note that Element.scrollLeft won’t work while our scroll-snap-type style is applied, so we set it to none first. Here is the complete result for our scenario:
<style>
section {
width: 400px;
margin: auto;
}
.container {
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
max-height: 400px;
display: flex;
overflow-x: scroll;
}
.child-image {
scroll-snap-align: start;
scroll-snap-type: always;
}
</style>
<script>
window.addEventListener("load", (event) => {
varslideRight = document.querySelector(".right");
varslideLeft = document.querySelector(".left");
varcontainer = document.querySelector(".container");
slideRight.onclick = function () {
container.style.scrollSnapType = "none";
container.scrollLeft += 400;
container.style.scrollSnapType = "x mandatory";
};
slideLeft.onclick = function () {
container.style.scrollSnapType = "none";
container.scrollLeft -= 400;
container.style.scrollSnapType = "x mandatory";
};
});
</script>
<section>
<div class="container">
<img
class="child-image"
src="awesome-1-1-image.webp"
height="400"
width="400"
/>
<img
class="child-image"
src="awesome-1-1-image-2.webp"
height="400"
width="400"
/>
</div>
<button class="left" type="button"><</button>
<button class="right" type="button">></button>
</section>
And that’s it! While it might not be so obvious for a user with JavaScript disabled to scroll through the images manually, we can add an animated tooltip with a pseudo-class ::after or ::before for a better user experience.