catalinred / animenu Goto Github PK
View Code? Open in Web Editor NEWA responsive dropdown navigation made with SCSS and a bit of JS
License: The Unlicense
A responsive dropdown navigation made with SCSS and a bit of JS
License: The Unlicense
I'm trying to implement this menu with multi-level drop-down and it seems to cut off some of the items in the sub menu.
Hi :) Thank you very much for Animenu, it's such a good menu solution. I just thought I should let you know about an issue we've spent the last few hours troubleshooting - basically if the Animenu css/style.scss OR sass/style.scss gets run through prettysass - https://www.npmjs.com/package/grunt-prettysass - it seems to break the menu (all of the parent menu items remain visible, while the children work as they should).
This may just be an issue with our particular Grunt setup, I'm not 100% sure, but just thought I'd flag it with you and also post a solution here for anyone else having a similar problem (I know we could have just included a call to the plain screen.css file in our html but this is for a big website so we wanted to avoid the additional http hit).
Basically we're keeping the exact version of the supplied screen.scss file in a sub-directory of our sass partials, and we've renamed it animenu, i.e. scss/partials/noprettysass/_animenu.scss
This is called in our master scss file, e.g.
@import "partials/noprettysass/animenu";
In our prettysass.js grunt file we've specified the directories to be prettysass-ed, e.g.
module.exports = {
// Pretty SASS
default_options: {
options: {
alphabetize: true
},
src: ['dev/sitename/scss/.scss','dev/sitename/scss/partials/.scss']
}
};
Then in our watch.js file we've included the extra "noprettysass" directory, e.g.
module.exports = {
// *** Watch ****
css: {
files: ['dev/sitename/scss/.scss','dev/sitename/scss/partials/.scss','dev/sitename/scss/partials/noprettysass/.scss'],
tasks: ['prettysass','sass']
},
};
When you stop and restart grunt from the command line ("grunt watch") and make a change to any of the .scss files it will re-compile and prettisassify everything except for the contents of the "noprettysass" directory as when it hits the prettysass.js file it will realise it hasn't been specifically told to process the contents of that directory, and so it won't.
The result is you can still keep everything neatly in your master.scss file and avoid the extra hit to the server by calling another stylesheet, and you can override the base Animenu styles in a normal sass partial, without risking the menu breaking.
Anyway hope this can help someone else at some stage and save you some hours!
Harmony :)
i cannot open the category dropdown list menu either on the browser or mobile. can you please help
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.