Monday, June 16, 2014

Applying toggle type menu for Left Navigation

Introduction

I am going to share my idea about applying toggle for Left Navigation. 

Master Page Customization

We will find the Left Navigation using id sideNavBox in master page. Then, add one <span>  element to have header of toggle on above menu. For Example:

<span class="toggleMenu">Menu</span>
<div class="leftMenu">
        <div id="sideNavBox"></div> (SharePoint Left Navigation Tag)
</div>


Toggle will apply when we click the <span> tag. Paste the below jquery script at the bottom of master page.

<script type="text/javascript">
    $(document).ready(function () {

    $(".toggleMenu").click(function () {
        $(".leftMenu").slideToggle("slow");
    });
</script>

 That's all. Toggle type menu will appear on your page.

Applied screen will be like:


No comments:

Post a Comment