Dev Depot: Slidebars, Sliding Menus for Responsive Design

Web designers seeking to accommodate the rapidly growing number of mobile web users are embracing new ways to support robust navigational menus on various devices — from tiny phones to tablets, the desktop and beyond. One technique that is gaining in popularity is the use of fly-out menus on the sides of a web page, triggered via text links, scripting or navigation bar icons, and more. It is an attractive and effective means of making it easy for visitors to navigate their way around your site to find what they want, and through the use of jQuery, can be enhanced by using smooth, animated transitions.

Although the process of JavaScript and CSS coding such a feature into your site is not so terribly daunting from a technical standpoint, sometimes it’s wise to use an established solution that can be quickly integrated without too much fuss.

Slidebars was born from a reoccurring need to create off-canvas sliding mobile menus for responsive design.

According to its publisher, Slidebars (plugins.adchsm.me/slidebars/) is a jQuery plugin for quickly and easily implementing app-style revealing, overlay and push menus and sidebars into any website.

“Slidebars was born from a reoccurring need to create off-canvas sliding mobile menus for responsive design,” Slidebars author Adam Smith explains. “It’s ultra-light at 1469 bytes (JS) and 499 bytes (CSS) when gzipped, uses hardware accelerated transitions where possible for quick and smooth animation, [and falls] back to jQuery .animate() on unsupported browsers.”

Slidebars are responsive and will resize along with the browser window, as well as handle changes in orientation so that mobile users will have easy access to menu items —regardless of how they hold their device.

“Slidebars aren’t just for handheld devices, they can be used for implementing revealing content on sites and screens of all sizes,” Smith says. “You can also add this site to your home screen — try it and see how it can make your web apps feel native.”

Getting Slidebars to work on your own website is simple, and begins with a download of the latest version of the script and style sheet. Next, include the Meta viewport tag in the page’s <head> element to ensure that the page will render correctly.

The following snippet shows the basic structure:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>

Next, wrap all site content except the Slidebars in an element with id of #sbsite, which must be a direct child of the <body>. Each Slidebar is also a direct child of the <body> and must use a base class of .sb-slidebar, with a modifer class to set its side.

Optional classes can also be used to control the Slidebars, as can a custom API.

It’s important to note that the slidebars.min.css or slidebars.css file must be called from the <head> of your web page, before the site’s style sheets. Finally, call the $.slidebars() method using the provided copy and paste code. Slidebars was last updated in March, so the code is current and under development.

Both original and minified versions are included in the free download, along with basic templates that include examples for mobile only, API usage, custom widths and animation styles. Comprehensive documentation eases the already simple setup process.

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