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.