Dev Depot: Sidr, Mobile Friendly Side Menus

As the mobile Internet gains in popularity, screen sizes are shrinking, just as feature sets are growing. This induces a whole new set of issues for web designers seeking to fit links to all of the relevant products and services, without cluttering content or limiting the space available to display that content. One popular solution is the use of hidden menus that are only displayed in response to user input, expanding and collapsing as needed through the power of jQuery.

Sidr (www.berriart.com/sidr/) is a jQuery plugin by Alberto Varela for creating responsive, mobile friendly Facebook-style side menus, and claims to be the easiest way for making your website’s menus responsive.

In its simplest usage, webmasters create a DIV called sidr and place a menu there. The plugin is then activated by binding it to a hyperlink. By default, this menu will not be visible and will only be displayed or hidden by clicking on the link.

Varela was inspired by the way Facebook implements its menu on mobile devices.

“The major reason for creating this plugin was just being able to easily add existing content (like a menu, a search box, social icons, etc.) to a menu in small screens,” Varela explains. “Simply load existing HTML into a Sidr, and then, hide this HTML and show the menu button with media queries.”

“You will be able to create multiple Sidrs on both sides of your web page to make responsive menus (or not, it works perfectly on desktops too),” Varela adds. “Fill the Sidrs normally, with existing content, remote content, or whatever you want.”

In its simplest usage, webmasters create a DIV called sidr and place a menu there. The plugin is then activated by binding it to a hyperlink. By default, this menu will not be visible and will only be displayed or hidden by clicking on the link.

With Sidr you can create as many menus as you want on the same page, placing them at either the right or left side of the screen. When creating more than one menu, however, you need to name them with unique identifiers. If you do not create a container DIV for the menu, then the plugin will create it for you.

There are multiple ways to load content into Sidr menus, including external URLs and internal functions. In its simplest usage, it takes no more than placing the content into a DIV to create the menu, as seen in the example above.

“The most common way is to load existing HTML into the menu,” Varela states. “You can add as many selectors as you want and they will be loaded in order.”

Sidr makes it possible to load remote content easily via AJAX. For those who need a more complex way to load content into the menu, callback functions are easily created — as are more sophisticated responsive menus.

Sidr allows users to open or close menus programmatically and to bind them to any event, including using an external library to implement touch events, such as a right/left swipe touch event that opens or closes the responsive menu.

As with other plugins, Sidr must be included after the jQuery script call. Varela notes that a performance boost can be had by loading the script at the bottom of your web page, or asynchronously.

Sidr also includes two themes (style sheets) with the plugin, one dark, and a light one; although webmasters are not required to use these styles, they must then create their own.

The Sidr website offers several coding examples to get you quickly up and running, while providing inspiration for your own deployment methods.

If you’re looking for an attractive and accessible way to offer the most links in the least space, with a great user experience, then Sidr may be for you.

Related:  

Copyright © 2024 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

opinion

How to Halt Hackers as Fraud Attacks Rise

For hackers, it’s often a game of trial and error. Bad actors will perform enumeration and account testing, repeating the same test on a system to look for vulnerabilities — and if you are not equipped with the proper tools, your merchant account could be the next target.

Cathy Beardsley ·
profile

VerifyMy Seeks to Provide Frictionless Online Safety, Compliance Solutions

Before founding VerifyMy, Ryan Shaw was simply looking for an age verification solution for his previous business. The ones he found, however, were too expensive, too difficult to integrate with, or failed to take into account the needs of either the businesses implementing them or the end users who would be required to interact with them.

Alejandro Freixes ·
opinion

How Adult Website Operators Can Cash in on the 'Interchange' Class Action

The Payment Card Interchange Fee Settlement resulted from a landmark antitrust lawsuit involving Visa, Mastercard and several major banks. The case centered around the interchange fees charged to merchants for processing credit and debit card transactions. These fees are set by card networks and are paid by merchants to the banks that issue the cards.

Jonathan Corona ·
opinion

It's Time to Rock the Vote and Make Your Voice Heard

When I worked to defeat California’s Proposition 60 in 2016, our opposition campaign was outspent nearly 10 to 1. Nevertheless, our community came together and garnered enough support and awareness to defeat that harmful, misguided piece of proposed legislation — by more than a million votes.

Siouxsie Q ·
opinion

Staying Compliant to Avoid the Takedown Shakedown

Dealing with complaints is an everyday part of doing business — and a crucial one, since not dealing with them properly can haunt your business in multiple ways. Card brand regulations require every merchant doing business online to have in place a complaint process for reporting content that may be illegal or that violates the card brand rules.

Cathy Beardsley ·
profile

WIA Profile: Patricia Ucros

Born in Bogota, Colombia, Ucros graduated from college with a degree in education. She spent three years teaching third grade, which she enjoyed a lot, before heeding her father’s advice and moving to South Florida.

Women In Adult ·
opinion

Creating Payment Redundancies to Maximize Payout Uptime

During the global CrowdStrike outage that took place toward the end of July, a flawed software update brought air travel and electronic commerce to a grinding halt worldwide. This dramatically underscores the importance of having a backup plan in place for critical infrastructure.

Jonathan Corona ·
opinion

The Need for Minimal Friction in Age Verification Technology

In the adult sector, robust age assurance, comprised of age verification and age estimation methods, is critical to ensuring legal compliance with ever-evolving regulations, safeguarding minors from inappropriate content and protecting the privacy of adults wishing to view adult content.

Gavin Worrall ·
opinion

Account-to-Account Payments: The New Banking Disruptor?

So much of our industry relies upon Visa and Mastercard to support consumer payments — and with that reliance comes increased scrutiny by both brands. From a compliance perspective, the bar keeps getting raised until it feels like we end up spending half our time making sure we are compliant rather than growing our business.

Cathy Beardsley ·
profile

WIA Profile: Samantha Beatrice

Beatrice credits the sex positivity of Montreal for ultimately inspiring her to pursue work in adult entertainment. She had many friends working in the industry, from sex workers to production teams, so it felt like a natural fit and offered an opportunity to apply her marketing and social media savvy to support people she truly believes in and wants to see succeed.

Women In Adult ·
Show More