wordpress left menu slide with css transform arrow and slideup down

Posted: March 31, 2015 in web
.forArrows{
    position: relative;
    top: 4px;
    left: 8px;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}
.menu-slide-menu-container .menu-item-has-children ul {
    display: none;
}
.menu-slide-menu-container .menu-item-has-children.active .forArrows{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
function handleClickSlider() {
        $('.menu-slide-menu-container .menu-item-has-children > a > .forArrows').addClass('glyphicon glyphicon-menu-down');        
        $('.menu-slide-menu-container .menu-item-has-children').click(function () {
            if ($('#' + this.id + ' .sub-menu').is(':hidden')) {
                $(this).addClass('active');
                $('#' + this.id + ' .sub-menu').slideDown(100);
            }
            else {
                $(this).removeClass('active');
                $('#' + this.id + ' .sub-menu').slideUp(100);
            }

        });
    }
<div id="ie-slide-menu" style="display: block;">
                <div id="ie-slide-wrap">
                    <div id="ie-slide-close">
                        <div id="x"><span class="glyphicon glyphicon-remove"></span></div>
                    </div>
                    <div id="mcontent">
                        <div class="menu-slide-menu-container"><ul id="menu-slide-menu" class="menu"><li id="menu-item-452" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-452"><a href="#">Service Areas<span class="forArrows glyphicon glyphicon-menu-down"></span></a>
<ul class="sub-menu">
	<li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="http://somesite/florida/">Florida<span class="forArrows"></span></a></li>
</ul>
</li>
<li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="http://somesite/georgia/natural-gas/multifamily/">Multifamily<span class="forArrows"></span></a></li>
<li id="menu-item-459" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-459"><a href="#">Free Gas For Life<span class="forArrows glyphicon glyphicon-menu-down"></span></a>
<ul class="sub-menu">
	<li id="menu-item-458" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-458"><a href="http://somesite/test-chat/">Test Chat<span class="forArrows"></span></a></li>
	<li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a href="http://somesite/test2/">test<span class="forArrows"></span></a></li>
</ul>
</li>
<li id="menu-item-456" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-456"><a href="http://somesite/careers/">Careers<span class="forArrows"></span></a></li>
</ul></div>                    </div>
                </div>
                <div id="ie-slide-footer">
                    footer
                </div>
            </div>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s