How to disable menu entries in Zurb Foundation Top Bar - zurb-foundation

Question

in a web application (= multi user environment) I need to disable certain menu entries in a top bar, depending on the currently logged-in user etc. To keep consistency in the UI, hiding/omitting the menu entries is not an option. Adding disabled/inactive/whatsoever class which is the way to go on other foundation elements e.g. buttons is not supported by the framework, obviously.
<li><a class="disabled" href="#">Disabled Menu Entry</a></li>
Any ideas?

Answer 1

Your question has nothing to do "directly" with Foundation. Disabling and/or hiding elements is either a CSS thing or javascript. You can NOT directly disable an anchor tag but you can simulate it's "disabled behavior". Based on what logic you have, how you will determine if an anchor tag should be disabled, you can do the following:
<style>
.disabled-link {
text-decoration:none; // really not needed for the Top Bar, just for general technique
cursor: auto;
}
</style>
<script>
$(document).ready(function(){
$(".disabled-link").click(function(e){
e.preventDefault();
return false;
});
});
</script>
<a class="disabled-link" href="#">Disabled Menu Entry</a>
Take note that the disabled-link class should be applied there based on some logic, this depends on your server side code - you did not tell us what other tools you were using. If you are using ASP.Net, PHP or whatever.
Additionally you should remember to validate on the server as there is no way of stopping your users to circumvent the disabled behavior of the links.