Develop Reference

Dropdown in nav bar not working - items in dropdown all link to the same thing (UIKit framework)

What I would like to happen: The first three list items in the nav bar should correspond to the first three content items in the content area. The three list items in the dropdown should correspond to the remaining three content items. Hovering over the dropdown icon should display the list but the dropdown icon shouldn't link to anywhere.
What's actually happening: The first three list items work properly and link to the first three content items. The dropdown box animates properly, but the items in it all link to the 4th content item. Clicking the dropdown box's icon also links to the 4th item.
Here is the code (A lot of the code is generated, so I grabbed the code from FireBug, which is why the "uk-active" classes and "aria-hidden" attributes are there):
<nav class="uk-navbar">
<ul class="uk-navbar-nav" data-uk-switcher="{connect:'#content-area'}">
<li class="uk-active" aria-expanded="true">
Dashboard
</li>
<li aria-expanded="false">
Summary
</li>
<li aria-expanded="false">
Details
</li>
<li id="settings-btn-container" class="uk-parent" data-uk-dropdown="" aria-expanded="false" aria-haspopup="true">
<a href="">
<i class="uk-icon-cog"></i>
</a>
<div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom" aria-hidden="true" style="top: 40px; left: 0px;" tabindex="">
<ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
<li>
Upgrade
</li>
<li>
Configure
</li>
<li>
Settings
</li>
</ul>
</div>
</li>
</ul>
</nav>
<ul id="content-area" class="uk-switcher">
<li id="content-dashboard" class="parent.uk-container uk-container-center uk-active" aria-hidden="false">...</li>
<li id="content-summary" aria-hidden="true">...</li>
<li id="content-details" aria-hidden="true">...</li>
<li id="content-upgrade" aria-hidden="true">...</li>
<li id="content-config" aria-hidden="true">...</li>
<li id="content-settings" aria-hidden="true">...</li>
</ul>
Basically, the "on click" event handler for the 4th content item is getting added to the "settings-btn-container" list item and no event handlers are getting added to the list items under the dropdown. I can't figure out how to get the event handlers to bind to the dropdown list items instead.

Try being more explicit to the UIkit Switcher component about what constitutes a "toggle".
In the snippet below, I've used these settings:
{
connect: '#content-area',
toggle: '.toggle-link'
}
The default value for toggle, in the UIkit Switcher component is >*, which you'll probably recognize as a selector for "the first immediate child element of any type". Since the links in your dropdown are not immediate descendants, no Switcher events were fired when they were clicked.
By broadening the "toggle" definition to all .toggle-link elements in the switcher, each of your links gets mapped to the corresponding <li> in the #content-area element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css'>
<nav class="uk-navbar">
<ul id="switcher-menu" class="uk-navbar-nav" data-uk-switcher="{connect: '#content-area', toggle: '.toggle-link'}">
<li class="uk-active toggle-link">Dashboard</li>
<li class="toggle-link">Summary</li>
<li class="toggle-link">Details</li>
<li id="settings-btn-container" class="uk-parent" data-uk-dropdown>
<i class="uk-icon-cog"></i>
<div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
<ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
<li class="toggle-link">Upgrade</li>
<li class="toggle-link">Configure</li>
<li class="toggle-link">Settings</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="uk-container uk-container-center">
<ul id="content-area" class="uk-switcher">
<li class="uk-active">... (Dashboard)</li>
<li>... (Content Summary)</li>
<li>... (Content Details)</li>
<li>... (Content Upgrade)</li>
<li>... (Content Config)</li>
<li>... (Content Settings)</li>
</ul>
</div>

How to change active class at each link click in jQuery?

I have an MVC app, where in the _Layout.cshtml file I have something like this:
<div class="collapse navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li id="home" class="active"><a id="homeLink" href='#Url.Action("Index", "Home")'>Home</a></li>
<li id="about"><a id="aboutLink" href='#Url.Action("About", "Home")'>About Us</a></li>
<li><a href='#Url.Action("Services", "Home")'>Services</a></li>
<li><a href=''>Blog</a></li>
<li><a href='#Url.Action("Contact", "Home")'>Contact</a></li>
</ul>
</div>
So the point is that when the website starts, the first link is set to active, then after each link click I want to set that one's class to active. I guess I need to write some jQuery code, but I cannot seem to figure out the answer.
UPDATE:
<ul class="nav pull-right navbar-nav">
<li id="Home" class="active"><a href='#Url.Action("Index", "Home")'>Home</a></li>
<li id="About"><a href='#Url.Action("About", "Home")'>About Us</a></li>
<li id="Services"><a href='#Url.Action("Services", "Home")'>Services</a></li>
<li id="Blog"><a href=''>Blog</a></li>
<li id="Contact"><a href='#Url.Action("Contact", "Home")'>Contact</a></li>
</ul>
main.js
$(function () {
$('a').click(function () {
$(this).closest('ul').find('li').removeClass('active');
$('#' + '#ViewBag.Title').addClass('active');
});
});
Example views:
#{
ViewBag.Title = "Services";
}
#{
ViewBag.Title = "Contact";
}

The following script will add the active class
$('a').click(function(e) {
// uncomment the following line to prove it
// e.preventDefault();
$(this).closest('ul').find('li').removeClass('active');
$(this).closest('li').addClass('active');
})
however, since your clicking on a link you don't even see it because you immediately redirect to another page using the same layout where the active class applied to the first li element (the new view has no knowledge of what you did on this page).
Since you seem to be wanting to highlight the li element relating to the current page, one option would be to give your li elements an id attribute matching the ViewBag.Title property and use that to apply the class.
<div class="collapse navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li id="home">#Html.ActionLink("Home", "Index", "Home")</li>
<li id="about">#Html.ActionLink("About Us", "About", "Home")</li>
<li id="services">#Html.ActionLink("Services", "Services", "Home")</li>
....
</ul>
</div>
and the script
$('#' + '#ViewBag.Title').addClass('active');
Then in the Index.cshtml view,
#{
ViewBag.Title = "Home"; // or "About" for About.cshtml, "Services" for Services.cshtl etc.
Layout = "~/Views/Shared_Layout.cshtml";
}

Assuming you aren't doing anything to alter the way the links fire (loading content with ajax), you can compare the href of the links to the current url to figure out which one should be active.
$('.navbar-nav ul').children().each(function() {
var link = $(this).find('a'); // or var link = $(this).children('a');
if (link.attr('href') == location.href) {
$(link).addClass('active');
return false;
}
});
All you'll need is to make sure the link href is formatted the same way it will appear in the url (relative vs absolute).

How to make the mmenu default expanded

I am using Jquery mmenu for my application. My menu contains sub menus. Sub menus are expanded only when user clicks on the main menu item. I want that expanded by default when user clicks on the menu button. How is this possible? I have initialized as follows.
$(document).ready(function () {
console.log('mmenu loading');
$("#menu").mmenu({
slidingSubmenus: false
});
});
Any help is really appreciated.
Thank You

You can give the class ( "mm-opened" ) to the menu which have submenu.
<nav id="menu">
<ul>
<li>Home</li>
//MENU WITH SUBMENU ADD CLASS mm-opened
<li class="mm-opened">
About us
<ul>
<li>History</li>
<li> The team</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
AND slidingSubmenus to false.
$("#menu").mmenu({
slidingSubmenus: false
});

how to active parent ul li after page refresh or click on sub menu link

how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>

You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>

dynamically update breadcrumb & highlight active color

I am sorry for the title. I don't no how to write the title for the below scenario .
The below question would be easier for an expert. Kindly bear with my English.
I am creating a single page portfolio. In the web site I have top menu,breadcrumb,content & footer.
If i click any menu or submenu the corresponding div is loading properly but I want to change my breadcrumb dynamically based on the menu
Here is the HTML code for top menu
<div id="eyMenuNav">
<ul id="navmenu">
<li class="on">
<a class='link1' href="#first">Article on Technology</a></li>
<li>
<a class="sub" href="#">Success Stories</a>
<ul>
<li>
<a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
</li>
<li>
<a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
</li>
<li>
<a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
</li>
</ul>
</li>
<li>
<a class='link5' href="#five">Hexaware Key Contributor</a>
</li>
</ul>
</div>
Here is the HTML code for breadcrumb
<div id="eyBreadCrumb">
<ul>
<li>
<a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
</li>
</ul>
<!-- Clearing Element -->
<div style="clear:both;"></div>
<!-- end breadcrumb --> </div>
Here Is the code for javascript which i tried it is working for one menu click but i want for all.
function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}
Kindly help me for the above scenario
Note : I am not using jquery only iam working with javascript.
Thanks
Mahadevan

Add this parameter to your onctext() call, so your menu items look like so:
<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>
And then change your onctext function to retrieve the text from this:
function onctext(elm) {
var text = elm.innerHTML;
document.getElementById("crumb").innerHTML = text;
// set active class
var active = document.getElementsByClassName('active')[0];
if (active) {
active.className = active.className.replace(' active', '');
}
elm.className += ' active';
}