Right Panel

Well, this a little bit advanced part of this template. We used custom modal for viewing panel content when click. This will work on three steps. Lets see.

Trigger: At first we need to add a trigger, where we can click to show modal content. In this theme, we added a menu like below:

<div class="right-menu">
    <span class="menu-hide"><i class="fa fa-bars"></i></span>
    <ul>
        <li><a class="aron-search-modal-trigger" href=""><i class="fa fa-search"></i> Seearch Here</a></li>
        <li><a class="aron-latestpost-modal-trigger" href=""><i class="fa fa-file-text-o"></i> Recent Post</a></li>
        <li><a class="aron-category-modal-trigger" href=""><i class="fa fa-list"></i> Category</a></li>
        <li><a class="aron-tags-modal-trigger" href=""><i class="fa fa-tag"></i> Popular tags</a></li>
    </ul>
</div>

If you look carefully, span class menu hide is a menu icon that we can hide mainmenu. We need to use menu show icon on mainmenu.

Next we build a menu for trigger to show modal. We used search, recent post, category & tag as modal. Each list item have a unique id to determine which modal will show.

Modal Content: For adding modal, we need to add modal content div. This is a simple markup. See below:

<div class="aron-custom-modal" id="aron-latestpost-modal">
    <div class="aron-custom-modal-inner">
        <div class="aron-modal-close"><img src="img/cross-icon.png" alt=""></div>
        <!-- Modal Content -->
    </div>
</div>

Here is a modal structure. You can use container, row & columns on modal content. Look at the template, we used it.

JS: Finial part is, we need to add modal javascript to show modal when click. We used like this. See below:

$(".aron-latestpost-modal-trigger").click(function(){
    $("#aron-latestpost-modal").addClass("aron-modal-enable");
    return false;
});

If you look carefully, we added a click function on aron-latestpost-modal-trigger to show aron-latest-post-modal. So it will show that modal when clicked.

Also there is menu hide function & show function & modal basic js.