I am using a jQuery menu plugin from http://mmenu.frebsite.nl/
Everything is working fine, but when I select the sub menu, it never shows the active state. It keeps on sending to the main page after page loads. See the screenshot for more information.
I am doing this:
<div id="menu">
<ul class="listview-icons">
<li>
<a>
<form method="post" action="{$site_url}/tracking.html" name="trak_now_homepage" id="trak_now_homepage">
<div class="form-group texttransform">
<input type="text" class="form-control" id="shipment_track_num" name="track_num" placeholder="Enter the booking ID">
<span id="shipment_alert" class="alert" style="color:#CF0"></span>
<BR />
<input name="news_go" type="submit" value="Track now" class="com_buton" id="send" onclick="return valid_shipment_tracking_form(document.trak_now_homepage);" />
</div>
</form>
</a>
</li>
<li><i class="fa fa-home"></i> HOME</li>
<li>
<span><i class="fa fa-file-text-o"></i> SEND</span>
<ul>
<li><i class="fa fa-file-text-o"></i> DOCUMENTS</li>
</ul>
</li>
<li>
<span><i class="fa fa-plane"></i> SERVICES</span>
<ul>
<li><i class="fa fa-map-marker"></i> SAME DAY DELIVERY</li>
</ul>
</li>
<li>
<span><i class="fa fa-user"></i> ABOUT US</span>
<ul>
<li><i class="fa fa-info-circle"></i> ABOUT US</li>
<li><i class="fa fa-info-circle"></i> FAQ</li>
<li><i class="fa fa-info-circle"></i> HOW IT WORKS</li>
<li><i class="fa fa-info-circle"></i> PACKAGING ADVICE</li>
<li><i class="fa fa-info-circle"></i> REVIEWS</li>
<li><i class="fa fa-info-circle"></i> TERMS</li>
<li><i class="fa fa-info-circle"></i> POLICIES</li>
<li><i class="fa fa-info-circle"></i> VOLUME CALCULATOR</li>
</ul>
</li>
<li><i class="fa fa-phone"></i> CONTACT US</li>
<li><i class="fa fa-fw fa-shopping-cart"></i>ITEMS</font></li>
<li><i class="fa fa-fw fa-user"></i> my account</li>
</ul>
</div>
How to fix this? The working demo is at www.matchcouriers.com
I have solved it, using smarty condition as i am using smarty as a template and the class that need to be used from mmenu is mm-seleced
<li class="mm-selected"><i class="fa fa-home"></i> HOME</li>
By default mmenu uses the css class Selected (note the capital S) on the current li for the current selected item.
selected menu have a dark background
You must define your own li.Selected style, I don't think you have done this.
sub-menu panel should stay as it is, but after selecting menu and page load, main-menu appear no the selected sub-menu panel
This is actually not automatic. You need to add Selected class to the relevant li on your pages. For example, in the About Us page, you would do this:
<li class="Selected"><i class="fa fa-info-circle"></i> ABOUT US</li>
References:
Styling Lists
Menu Items not selected after page load
Related
I have a main menu (collapse) that uses Bootstrap 3.3.7 and Font Awesome 5.0.1
What I am looking for :
When the menu is closed, a "plus" icon is displayed.
When the menu is open, a "minus" icon is displayed.
The "plus" icon is displayed on the menu but does not change.
I think there is a problem with my JS code.
<nav role="navigation" aria-labelledby="block-navigationprincipale-menu" id="block-navigationprincipale">
<ul class="menu nav navbar-nav">
<li class="expanded dropdown open">
<i class="fas fa-plus-circle fa-lg"></i> Boutiques
<ul class="menu dropdown-menu">
<li>
<i class="fas fa-shopping-bag fa-lg"></i> Boutiques
</li>
<li>
<i class="fas fa-gift fa-lg"></i> Produits
</li>
<li>
<i class="fas fa-sign-language fa-lg"></i> Services
</li>
</ul>
</li>
<li class="expanded dropdown">
<i class="fas fa-plus-circle fa-lg"></i> Groupes
<ul class="menu dropdown-menu">
<li>
<i class="fas fa-users fa-lg"></i> Groupes
</li>
<li>
<i class="fas fa-newspaper fa-lg"></i> Annonces
</li>
<li>
<i class="fas fa-file-alt fa-lg"></i> Articles
</li>
</ul>
</li>
<li>
<i class="fas fa-id-card fa-lg"></i> Profils
</li>
</ul>
</nav>
Here is my JS code. Something is wrong with it.
(function ($) {
$(".collapse-change-icon").on('shown.bs.collapse', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-plus-circle").addClass("fa-minus-circle");
});
$(".collapse-change-icon").on('hide.bs.collapse', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-minus-circle").addClass("fa-plus-circle");
});
})(window.jQuery);
You have not used the right bootstrap events for dropdown. Try this one.
jQuery(document).ready(function ($) {
$(".dropdown").on('shown.bs.dropdown', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-plus-circle").addClass("fa-minus-circle");
});
$(".dropdown").on('hidden.bs.dropdown', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-minus-circle").addClass("fa-plus-circle");
});
});
REf: https://getbootstrap.com/docs/3.3/javascript/#dropdowns-events
I'm a beginner to javascript, I've been trying to add the active class to a li using jquery i.e. When its clicked, expand li and make it active:
<script>
$(document).ready(function() {
var url = window.location['pathname'];
jQuery('li a').each(function() {
if($(this).attr('href') == url)
$(this).parent().addClass('active');
});
});
</script>
This only makes the sub-menu active but not expanded. But when I manually added the active class (as shown below) to treeview and li, it expanded and became active. How to dynamically add the active class through jquery?
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MENU</li>
<li class="treeview active">
<a href="#">
<i class="fa fa-table"></i> <span>USER</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-plus"></i> Add</li>
<li class="treeview active">
<a href="#"><i class="fa fa-circle-o"></i> Profile
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active"><i class="fa fa-circle-o"></i> View </li>
<li><i class="fa fa-circle-o"></i> Settings </li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>
So, you need to apply active class on all .treeview using parents:
$(this).parents('.treeview').addClass('active');
Actually, changing parent() to parents() fixed it:
$(this).parents().addClass('active');
I have a code like below in my html
<ul class="nav">
<li class="no-bullet " onclick="window.location = 'ask_question.html';">
<button type="button" class="signout_btn line_height">
<i class="fa fa-home " aria-hidden="true"></i>
Home</button>
</li>
<li class="sub-menu"><a href="#">
<i class="fa fa-tags" aria-hidden="true"></i>
Search by Category</a>
<ul class="" id="loadCategories">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu"><a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i>
Switch City </a>
<ul class="" id="loadCities">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="no-bullet " onclick="window.location = 'user_profile.html';" >
<button type="button" class="settings_btn line_height">
<i class="fa fa-user" aria-hidden="true"></i>
My Profile</button>
</li>
<li class="no-bullet " onclick="window.location= 'all_users.html';">
<button type="button" class="signout_btn line_height" id="btnFindAFriend">
<i class="fa fa-users" aria-hidden="true"></i>
Find A Friend</button>
</li>
</ul>
If you notice the above code, I have li which on click I am directing to a certain html page. Inside the li I have put a button there in order to make all my menu option look uniform. In order to achieve that I did some make and break to make it look exact similar.
But I am unable to make all of them look exactly the same. I want to have the same height and size of all the menu option.
Can someone recommend a correct way to solve this.
Here's the fiddle for the same.
Currently, I am hiding a sidebar with javascript (When I click a button the menu hides, click it again, it appears back)
I did some research on localStorage and nothing prevailed. I am wondering if I am able to set a simple user preference using this method. All the JS does is change the elements display property. Sorry the code is in the same section (The big break indicates HTML after)
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
<div class="col-sm-2">
<i id="collapse" class="fa fa-bars fa-lg" onclick="toggle_visibility('communitiesWrapper');" style="position:absolute;"></i>
<div id="communitiesWrapper">
<div id="communitiesHeader">
<center><h4 style="font-weight: 700;">Communities & Teams</h4></center>
</div>
<div id="communitiesMenu">
<ul class="listofcommunities">
<li><i class="fa fa-code" aria-hidden="true"></i>PCMasterRace</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Steam</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Corsair</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Web development</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Font Awesome</li>
</ul>
<hr>
<ul class="listofteams">
<li><i class="fa fa-code" aria-hidden="true"></i>Project A</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Project B</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project B</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project B</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li>
</ul>
</div>
</div>
</div>
Cheers,
Yes, you can use localStorage.setItem and localStorage.getItem methods. You have to bind a function to the side bar (onClick) to store user's preference. If the used hides the side bar, the function should do:
localStorage.setItem("showSideBar", "no");
and set it to yes if the opposite.
And then whenever you load the page, check for this value to decide whether to show the side bar or not:
var show = localStorage.getItem("showSideBar");
if show == "yes":
#show the side bar
else:
#hide the side bar
<div id="wrapper">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse collapse">
<ul class="nav" id="side-menu">
<li>
<a class="active" href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Operation <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<i class="fa fa-bar-chart-o fa-fw"> </i> Request<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
<i class="fa fa-dashboard fa-fw"></i> Browse
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Add
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Hello,
I have a bootstrap (3) side menu who works great but I can't understand why third level collapse (and with him his parent) on click.
I'd like to prevent his collapse and make it works like the second level.
Any suggestions?
Thanks.