How to add a custom close button

From http://www.berriart.com/sidr

$.sidr('close', 'menu-name');

https://gist.github.com/artberri/6da9f659b77b028e3caa#file-programatical...

Hi,

I too would like to do this, but I'm not clear how from the above comments. The link to berriart appears to be broken which may have explained everything. I'm not clear on jquery, so if there's a step by step guide somewhere that would be great.

@zenbens

I edited that comment, the colon (:) was breaking the link.

So, either assign a click event on your button that does that:
$.sidr('close', 'menu-name');
via inline like: onclick="" or your own JS file.

Did you solve this?

Sorry, I'm still not sure I understand. As I said I don't really understand js

I've added a link on site like this

Click Me

where navigation is the menu name.

I'd really appreciate any help you can offer on this as I'm completely clueless!

sorry I didn't mean the code to become a link automatically here it is again
<p><a href="#" onClick="$.sidr('close', '#navigation');">Click Me</a></p>

Try
onClick="jQuery.sidr('close', '#sidr-0');"

Check the name, I think it should be something like "#sidr-0", depending on how many instances of a Sidr menu are on the page.

Hello, can you please give a clear guide where i should add the code? Thanks very much.

Hi, I tried to use the code
<p><a href="#" onClick="jQuery.sidr('close', '#sidr-0');">Click Me</a></p>this way of closing the menu does not work for me, it doesn't respond. When i click the button, it has this error "Uncaught TypeError: Cannot read property 'sidr' of undefined onclick". Can you please help? Many thanks.

@Lan

Woops! Sorry it should be like this:

<a href="#" onclick="jQuery.sidr('close', 'sidr-0');">Click Me</a>

(take the # out of sidr-0)

Also, inspect your menu, to make sure it has id="sidr-0". Match whatever ID it has to the 2nd argument in that function.

It works now. Brilliant! Thanks drastik. You save me a lot of time. :)

Hi Guys,

I'm stuck trying to implement this. Please see attached screenshot. I've tried changing the 2nd arg. from sidr-0 to sidr-1 b/c I see both in the page source, but no luck. Any advice on how to implement this link to close the menu?

@MO
You would that elsewhere on the page, not in these settings.

Somewhere else as in: a block, content, template, etc.

@drastik,

Thanks for the response. I'm trying to place this within the sidr menu itself. When I put the code in a block, then I see the "click me" link in that block. It works because it's closing the menu, but how do I get the link inside the actual menu? Where should I place the code? Within the sidr library?

Thanks ahead of time for the help. I'm confused.

-MO

@MO
Oh, then it would need to be a part of the HTML inside your target selector (menu) either via preprocess hooks, templates, or whatever new-fangled module can do that now.

Or you could insert it via javascript.

Look at jQuery append/prepend and that whole family of functions.
http://api.jquery.com/append/

I did this, maybe help ?
It works for me using the #sidr-1 element.

In onOpen callback (function) put this:

	(function() {
      	$('#sidr-1 ul.sidr-class-menu').prepend(
         	$('<li id="sidr-close-opt">').append(
        		$('<a class="sidr-close sidr-class-sf-depth-1 sidr-class-active">').attr('href','#').append("Close menú")
      	));

      	if ( $("#sidr-close-opt").length ) {
         	$( "#sidr-close-opt" ).on("click", function() {
            	   $.sidr('close', 'sidr-1');
         	});
      	}

      	$(window).on("resize", function(event) {
         	if($('body').hasClass('sidr-open') && $(window).width() >= 768) {
            	   $.sidr('close', 'sidr-1');
         	}
      	});
	})(jQuery)

In onClose callback (function) put this:

	(function() {
           $('#sidr-1 ul.sidr-class-menu #sidr-close-opt').remove();
	})(jQuery)

@7emmanuel7

I tested your code, but it does nothing.
Just changed #sidr-1 to my version #sidr-2 but it's not working.
Which Version do you have installed?

I fixed this issue using the Menu HTML module (https://www.drupal.org/project/menu_html). Here's how;

1 - enable Menu HTML module
2 - create a new menu item with in your responsive sidr menu
3 - add the following code to the 'Menu link title' field;

Close

4 - in the 'Path' field add '', not ideal but it works!

4 - VERY IMPORTANT - Scroll down the form and make sure 'Allow HTML' is checked
5 - 'Save' the form

Now you should see a menu item called titled 'Close'. When you click on this it will close the menu.

I suggest that you add a 'X' or similar symbol to help imporve the UI, users expect this really.

@princiangi
I ended up using another kind of menu, but i was using 7.x-1.5 version and Jquery 1.8

#20 works for me.

I changed #sidr-1 ul.sidr-class-menu in #sidr-0 ul.sidr-class-main-menu

I think this is the problem of #21

#20 works for me BUT take care you use the right id.
In my case I had to change #sidr-1 tot #sidr-0

#20 works for me with #sidr-0 and sidr v1.2.1

#20 Works perfectly just be sure to inspect element of your menu to find the sidr ID and make sure that it is the same otherwise change #sidr-1 to #sidr-0 (or whatever your ID is). You can also use the unicode close character so .append("Close menu") can become <em>.append("CLOSE MENU &#10006;")</em> which appears as a bold <strong>X</strong>

#20 works for me.
You can see it here: http://sacredvoice.com
Responsive Menus theme: dark

onOpen callback (function):

(function() {
      	$('#sidr-0 ul.sidr-class-navbar').prepend(
         	$('<li id="sidr-close-opt">').append(
        		$('<a class="sidr-close sidr-class-active">').attr('href','#').append("Close Menu")
      	));

      	if ( $("#sidr-close-opt").length ) {
         	$( "#sidr-close-opt" ).on("click", function() {
            	   $.sidr('close', 'sidr-0');
         	});
      	}

      	$(window).on("resize", function(event) {
         	if($('body').hasClass('sidr-open') && $(window).width() >= 768) {
            	   $.sidr('close', 'sidr-0');
         	}
      	});
	})(jQuery)

Note: I had to change #sidr-1 ul.sidr-class-menu to #sidr-0 ul.sidr-class-navbar
You'll need to inspect your menu to confirm what you'll need to change

onClose callback (function)

	(function() {
           $('#sidr-0 ul.sidr-class-navbar #sidr-close-opt').remove();
	})(jQuery)

Note: same change as above.

CSS:

/* sidr mobile menu */
#sidr-wrapper-0 a {
text-decoration: none !important;
float: right;
margin-top: -100px;
font-weight: bold;
font-size: 1.5em;
color: #000000 !important;
}

#sidr-0 h2 {
display: none;
}
.sidr ul {
text-align: center;
}

Hope this helps!

Thanks thalemn
Comment #28 ,It worked with me !

#20 seems to be logical but there is an issue where the textbox is not accepting && and > and just changing them after save.