How to Easily Display a Menu from the Left Side of the Page Using jquery.sidr.js

When developing a website or application, it is very important to implement a menu that allows users to navigate comfortably. Especially in today’s world, where mobile devices such as smartphones and tablets are widespread, a “side menu” that slides in from the left or right side of the screen is an effective method for making the most of limited screen space.

In this article, I will explain how to easily implement a menu that slides in from the left side using the jQuery plugin “jquery.sidr.js”. To make it easy to understand, I will explain step by step with concrete code examples.

What is jquery.sidr.js?

“jquery.sidr.js” is one of the jQuery plugins that allows you to easily add a feature to slide in a side menu from either side of the webpage. Normally, implementing a side menu requires an understanding of HTML and CSS, but by using this plugin, you can create a functional menu with minimal JavaScript knowledge.

Additionally, this plugin is lightweight yet highly customizable, allowing it to adapt to various designs. For example, you can change the display position of the side menu or adjust the type of animation.

Advantages of Using jquery.sidr.js

By utilizing a jQuery plugin, you can efficiently add features without writing a lot of code manually. The main advantages of jquery.sidr.js are as follows:

• Easy Implementation: You can quickly get the side menu working by adding just some HTML and a bit of JavaScript code.
• Lightweight and Fast: The plugin itself is lightweight and does not significantly impact the loading speed of the webpage.
• High Customizability: You can freely customize the appearance using CSS, ensuring consistency with your design.

CSS Description for Displaying a Menu from the Left Side of the Page

First, let’s set up the basic CSS required to display a menu from the left side of the page. This CSS code is necessary to control the style and display position of the menu. Try adding the following code to your webpage.

<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:15px 0 10px 0;
	line-height:1.4em;
	text-align:center;
}
-->
</style>
<link rel="stylesheet" href="jquery.sidr.light.css">

　
In this CSS code, we first reset the margins and padding for the body tag to ensure a uniform appearance across the page. Additionally, we define the style for the h1 tag so that the heading is centered and has appropriate padding. After that, we load the jquery.sidr.light.css file.

JavaScript Description to Easily Display a Menu from the Left Side of the Page Using jquery.sidr.js

Next, let’s write the JavaScript code needed to actually display the side menu. By adding the following code to your HTML file, the menu will slide in based on a click event.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.sidr.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#simple-menu').sidr();
});
</script>

　
In this JavaScript code, we first load the jQuery library (jquery.min.js) and the jquery.sidr.min.js file. Then, within the $(document).ready() function, we set it so that when an element with the ID #simple-menu is clicked, the side menu will be displayed. This makes it easy for beginners to display a menu.

By writing $(Menu Display Link Tag).sidr(), when you click on the “Menu Display Link Tag”, the tag element with the ID (e.g., #sidr) set in the href will be displayed as a menu from the left side.

HTML Description for Displaying a Menu from the Left Side of the Page

Finally, add the HTML code necessary to display the menu. Here, we define the link tag and the menu display area.

<h1>Display a Menu from the Left Side of the Page (Browser)</h1>
     
<div align="center"><a id="simple-menu" href="#sidr">←Display Menu</a></div>
     
<div id="sidr">
      
    <ul class="xoxo categories">
        <li class="cat-item cat-item-36"><a href="https://dad-union.com/category/css">css</a></li>
        <li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript">JavaScript</a></li>
        <li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery">jQuery</a></li>
        <li class="cat-item cat-item-53"><a href="https://dad-union.com/category/php">PHP</a></li>
    </ul>
      
</div><!--/sidr-->

　
The a tag used here functions as a trigger to display the menu. By specifying #sidr in the href attribute, the element with the ID sidr is displayed when clicked. By understanding this part of the code, even beginners can easily implement a side menu.

Set #sidr in the href of the link tag (id=”simple-menu”) to display the menu. By preparing the menu display area (id=”sidr”) from the left side, the menu display area will be displayed when the link tag is clicked.

jquery.sidr.min.js: Demo Page for Displaying a Menu from the Left Side of the Page (Browser)

If you would like to check a sample that actually works, please take a look at the demo page from the following link. By clicking, you can see how the menu slides in from the left side.

jquery.sidr.min.js: Demo for Displaying a Menu from the Left Side of the Page

By viewing this demo page, it will be easier for you to grasp the actual operation.

Source: Sidr – A jQuery Plugin for Creating Side Menus

The plugin “jquery.sidr.js” introduced in this article can be downloaded from the official website below. You can also find more detailed information and customization methods on the official site.

Sidr – A jQuery plugin for creating side menus

Conclusion

As demonstrated, by using jquery.sidr.js, even beginners can easily implement a menu that slides in from the left side. This plugin is lightweight yet highly customizable, making it adaptable to various designs. To improve the user experience of your website, I encourage you to try it out.

By using this guide as a reference and creating your own side menu, you can experience the fun and practicality of web development. I hope this article will be helpful for your website creation.

　
*Please use at your own risk.
Do not reuse the Google Analytics tag in the demo page code.