Menu icon Foundation
F6 - Top Bar dropdowns

I'm using Foundation 6.0.5. on the MEANJS stack, Angular etc and I'm having problems with the dropdown section of the nav not working.

I've downloaded Foundation 6 and if I run the index file from that folder the dropdown works, if I then copy the same code into my application it does not work.

jQuery is included in the head section:

The imported assets include foundation css and JS are as below.

module.exports = {
client: {
lib: {
css: [
'public/lib/foundation/css/foundation.css',
'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css',
'http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css',
],
js: [
'http://maps.googleapis.com/maps/api/js?v=3',
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/angular-file-upload/angular-file-upload.js',
'public/lib/foundation/js/vendor/what-input.min.js',
'public/lib/foundation/js/foundation.min.js',
],
},
},
};

All these files appear on the website correctly with

right before the closing body tag.

Does anyone have any experience with getting this working through this setup? At the moment I've just got a CSS hack to force the issue as I've been looking at this for quite some time:

li.has-submenu:hover ul.submenu {
display: block;
top: auto;
left: auto;
}

Many thanks.

foundation 6topbartop-bartop barmeanjsangular

I'm using Foundation 6.0.5. on the MEANJS stack, Angular etc and I'm having problems with the dropdown section of the nav not working.

I've downloaded Foundation 6 and if I run the index file from that folder the dropdown works, if I then copy the same code into my application it does not work.

jQuery is included in the head section:

The imported assets include foundation css and JS are as below.

module.exports = {
client: {
lib: {
css: [
'public/lib/foundation/css/foundation.css',
'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css',
'http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css',
],
js: [
'http://maps.googleapis.com/maps/api/js?v=3',
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-messages/angular-messages.js',
'public/lib/angular-ui-router/release/angular-ui-router.js',
'public/lib/angular-ui-utils/ui-utils.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.js',
'public/lib/angular-file-upload/angular-file-upload.js',
'public/lib/foundation/js/vendor/what-input.min.js',
'public/lib/foundation/js/foundation.min.js',
],
},
},
};

All these files appear on the website correctly with

right before the closing body tag.

Does anyone have any experience with getting this working through this setup? At the moment I've just got a CSS hack to force the issue as I've been looking at this for quite some time:

li.has-submenu:hover ul.submenu {
display: block;
top: auto;
left: auto;
}

Many thanks.

Brandon Arnold over 3 years ago

Did you initialize foundation anywhere?