自动滚动页面+关闭侧边栏菜单项选择后+链接菜单项与部分ID（Wordpress - Jquery）

Question

I am trying to create a custom sidebar menu...I have one page site with section on it...Every sidebar menu link should be connected to a specific section.I have created the menu but have two problems:

1) I want to link the menu items with sections ids with the help of jquery. 2) When user click on the menu item inthe sidebar,it should be closed automatically and scroll the page to that section.

I am new to Jquery and wordpress..Please help me to resolve this issue.

Sidebar Html:

<ul id="primary-menu" class="main-nav" role="menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#quote" data-level="1">
            <span class="menu-item-text">
                <span class="menu-text">Instant Quote</span>
                <i class="underline"></i>
            </span>
        </a>
    </li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#ethos" data-level="1">
            <span class="menu-item-text">
                <span class="menu-text">Ethos</span>
                <i class="underline"></i>
            </span>
        </a>
    </li>             
</ul>

Here is my Sidebar:

Answer 1

You have to give your section specific id like <section id="quote">

Then in your main.js write something

$('.menu-item').find('a').click(function(){
        var $href = $(this).attr('href');
        var $anchor = $($href).offset();
        $('body, html').animate({ scrollTop: $anchor.top} ,1500);
        return false;
    });

For Closing the sidebar It depends on how you made this sidebar.