CODEWITHSUNDEEP
jqueryhtmlcsssidr
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to display a close icon when Sidr menu is open

I have implemented the Sidr mobile menu on my site:

<div class="mMenu mMenuStyle">
    <span class="dummySpan"></span> <!-- DUMMY SPAN TO CENTER IMAGE VERTICALLY -->
    <a id="simple-menu" href="#sidr"><img src="theImages/mobileMenuIcon.png" class="mobileMenuIcon" /></a>
    <div style="float: right; height: 35px; color: #FFF; background: #4cff00; overflow: hidden;">
            <input type="text" value="" placeholder="Search" id="Text1" class="styledTB searchB" />
    </div>
</div>
<div id="sidr">
    <div class="mmItemStyleParent">
        SERVICES
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/home.png" class="mIcon vertAlign mmm1" id="mH1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mH" class="vertAlign mmm">Home</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/MakeAnAppt_icon.png" class="mIcon vertAlign mmm1" id="mMW1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mMW" class="vertAlign mmm">My</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/FindaProvider_icon.png" class="mIcon vertAlign mmm1" id="mFP1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mFP" class="vertAlign mmm">Find a Provider</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/Services_icon.png" class="mIcon vertAlign mmm1" id="mS1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mS" class="vertAlign mmm">Services</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/Locations_icon.png" class="mIcon vertAlign mmm1" id="mL1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mL" class="vertAlign mmm">Locations</span>
    </div>
    <div class="mmItemStyleParent">
        RESOURCES
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/PatientInfo.png" class="mIcon vertAlign mmm1" id="mPI1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mPI" class="vertAlign mmm">Patient Information</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/NewsEvents.png" class="mIcon vertAlign mmm1" id="mNE1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mNE" class="vertAlign mmm">News & Events</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/HealthyLiving.png" class="mIcon vertAlign mmm1" id="mHL1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mHL" class="vertAlign mmm">Healthy Living</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/INTouch.png" class="mIcon vertAlign mmm1" id="mINT1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mINT" class="vertAlign mmm">INTouch Newsletter</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/CareerOps.png" class="mIcon vertAlign mmm1" id="mCO1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mCO" class="vertAlign mmm">Career Opportunities</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/Policies.png" class="mIcon vertAlign mmm1" id="mP1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mP" class="vertAlign mmm">Policies</span>
    </div>
</div>

enter image description here

The following JQuery toggles the opening and closing of the menu:

$(document).ready(function () {
    $('#simple-menu').sidr();
});

How do I toggle the menu icon once I have opened/closed the menu?

Upvotes: 0

Views: 1573

Answers (1)

Monte
Monte

Reputation: 1016

you should try something like this:

$('#simple-menu').sidr({
   onOpen: function(){
       // Change the menu icon on open
   },
   onClose: function(){
       // change the menu icon on close
   }
});

Upvotes: 4

Related Questions