1LD Tutorials & Blogs

Blog

RapidWeaver Snippets Button

I had a request from a customer recently who’s responsive site created a drop down menu when the users screen was under a certain size (standard for all responsive designs and done for mobile devices in this instance). The drop down menu on mobile simple displayed the text “MENU” though the user wanted to replace that with an image instead. Fortunately this is very simple to do with JavaScript, though I thought this was worthwhile to save here as a snippet in case it benefits other users as well.

The HTML in this example is as follows:

1
<a href="http://YOUR_HOME_PAGE.com" class="imageSwitch">MENU</a>

1
2
3
4
5
6
$().ready(function () {
    $('.imageSwitch').each(function () {
        string = $(this).text('MENU');
        $(this).html('<img src="YOUR_IMAGE_LOCATION/NAME.png" alt="' + string + '" />');
    });
});

Obviously the image source (SRC) needs to change to the image location and name of your image. Likely you’ll have this image uploaded in your Resources section, which you can then click on the image and see the uploaded directory and name provided that you’ve already published your site.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

See Projects

Blog

New Release: Overlap Canvas RapidWeaver Stack

Overlap Canvas is a new tool for RapidWeaver Stacks for creating responsive overlapping layers of images, text, & content. With this stack you can create unique designs like never before in your projects. No graphic design skills needed! All stacks content can be added, positioned, rotated, & scaled within the stacks editor for an easy design process.

 

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software