If you want (say) Item 2 to act as an <a href="go_here"> link when clicked (rather than a trigger to display Item 2A and Item 2B); I don't think there is a standard way to do this in Foundation. However you can get round it with additional links that are hidden for larger screens or JavaScript/jQuery + CSS + HTML changes:
Additional links
This option doesn't leave you needing to add hacks or additional CSS to hide unwanted menu furniture or override the way foundation menus work. What this does is add a new link that is only visible on small screens whilst leaving the original link untouched to continue acting as a trigger.
<li><a href="http://foundation.zurb.com/">Item 2</a>
<ul>
<li class="show-for-small-only">
<a href="http://foundation.zurb.com/">Item 2 "home"</a>
</li>
<li><a href="http://foundation.zurb.com/">Item 2A</a></li>
<li><a href="http://foundation.zurb.com/">Item 2B</a></li>
</ul>
</li>
JSfiddle: https://jsfiddle.net/sons9wzr/2/
This is more usable but requires an additional click to expose the sub menu. It would also be possible to do this with JavaScript/jQuery dynamically.
JavaScript/jQuery + CSS + HTML
If the aim is to only have the relevant links for mobile and an expanded menu for desktop, you can hide the sub navigation using a similar added class as in the first example above, add the JavaScript and then hide the redundant carets with CSS.
So your HTML becomes something like:
<li><a class="forced" href="http://foundation.zurb.com/">Item 2</a>
<ul class="show-for-large-only">
<li><a href="http://foundation.zurb.com/">Item 2A</a></li>
<li><a href="http://foundation.zurb.com/">Item 2B</a></li>
</ul>
</li>
Then use JavaScript (jQuery as it is required by Foundation anyway) to force the click on certain nav items (by adding class="forced" to each <a> you want to force to go to a new location in the HTML above).
An example of JavaScript for small screens only:
//check for screen size = small
if(Foundation.utils.is_small_only()) {
$('nav').on('click','a.forced', function (e) {
e.preventDefault;
window.location.href = $(this).attr('href');
});
}
(More information on the Media Query JS utility)
This will still leave the caret on the menu item though which may be confusing for users so you can remove it (from ALL sub-nav items) with this:
.is-accordion-submenu-parent > a::after {
display: none;
}
This should give you the desired effect, though it may require additional maintenance when you update Foundation.
Example in Codepen (without code for small-screens only): http://codepen.io/tymothytym/pen/eZGEER
Edit:
OK, so based on this comment:
I want to be able to expand the menu in the mobile view by clicking on the icon at the right of the parent element as well as to be able to click on the parents element itself.
I have created a new solution. This is very much a hack, and not a wonderful solution. I would recommend either finding an alternative navigation set up or working within the framework that Foundation offers.
New HTML (forced class moved to <li> & <span> added)
<li class="forced">
<span data-item="Item 2" class="show-for-small-only"></span>
<a href="http://foundation.zurb.com/">Item 2</a>
<ul class="menu vertical">
<li><a href="http://foundation.zurb.com/">Item 2A</a></li>
<li><a href="http://foundation.zurb.com/">Item 2B</a></li>
</ul>
</li>
New CSS
This splits up the contents of the <li> and positions the new sub-element
.is-accordion-submenu-parent > a::after {
display: none;
}
@media only screen and (max-width: 40em) {
li.forced span {
content: 'Item 2';
display: inline-block;
padding: .7rem 1rem;
line-height: 1;
width: 70%;
color: #2199e8;
cursor: pointer;
}
.menu > li.forced > a {
padding: .7rem 1rem;
line-height: 1;
float: right;
}
}
New JavaScript
This changes the text of the link (you'd need to do this for small screens only as shown above... above) makes the new <span> a link, inserts text into it by way of a data attribute & changes the original link text to a caret (to preserve as much original functionality as possible).
$(document).foundation();
$('nav').on('click','.forced span', function () {
window.location.href = $(this).siblings('a').attr('href');
});
$('.forced > a').html("▼");
$('.forced > span').text($('.forced > span').data("item"));
Example here: http://codepen.io/tymothytym/pen/GZOqvO
I think this is likely to have usability issues and maintenance issues so use with caution.
