lucidlemon / paradeiser Goto Github PK

Can I use fontawesome for the icons or is that possible? I've tried and it renders them really small.

I really like how Paradeiser looks and works. Thank you! :)

My biggest suggestion is to remove the jQuery "baggage" — consider the following (quoted from the You Might Not Need jQuery site):

If you're developing a library (...) please take a moment to consider
if you actually need jQuery as a dependency. Maybe you can include a few lines
of utility code, and forgo the requirement. If you're only targeting more modern browsers,
you might not need anything more than what the browser ships with.

Main advantages:

• Users wait less time for your pages to download -- Remember many people are on mobile connections.
• You use commands that are touching the DOM directly. jQuery is a wrapper around the DOM and, as such, many times makes it less intuitive to accomplish some things. Know the DOM, you'll be better off this way. :)
• Simpler setup. From all the JS libraries I've used, jQuery (being by far the most complex) was the only one that choked on my build system's concatenate & uglify step. My build system had to be much more complex just because of jQuery... Removed it. Done!

Some resources that are helpful for switching from jQuery to native JavaScript:

• You Might Not Need jQuery
• jQuery considered harmful - Lea Verou

There's also this one (a bit more advanced):

• Ditching jQuery - Go Make Things

Mmm... Should I just say it? — "No jQuery" is the direction hipsters are taking. :D

The people in-the-know are now developing libraries without the jQuery requirement...

When feasible, a library should stand on its own feet — this way it is (more) future-proof, less dependent on other libraries, easier to get started with, and more flexible to be integrated in systems which don't use jQuery.

jQuery was created for a time when the DOM was hard. The DOM is pretty easy, now. ;)

This helps with accessibility and also when CSS is not available for some reason. If the main CSS gets a special class on the UL of the extra items and it becomes a nested list inside a main one of the .paradeiser one this should be easy to do.

Paradesier is not working properly for me on small screens (specifically iPad Mini and iPhone 5). It breaks. I am not sure if some of my CSS is conflicting with Paradesier. If you could nudge me in the right direction I would greatly appreciate it!

my site lives at: http://aboutmonica.com/siterehaul/#

actual output of paradeiser looks off on smaller screens

when I use web dev tools Paradeiser displays correctly

Love love love this plugin. Just wondering if the above could be implemented and then it would be perfect!

Hi
I would like to see the demo of Automatic hiding of the navbar using Headroom.js on paradeiser's website, but it links to the source code of demo page.

I think maybe "demo5.html" should move to gh-pages branch.
So that we could see the demo directly on browser.

Thanks!

Hello,

The <span class="paradeiser_dropdown"> can't be a SPAN element because it's not valid to have an UL element inside.
HTML basics :)

Good luck.

I can't find paradeiser on npmjs https://www.npmjs.com/package/paradeiser are you going to put it on there?

Sorry, not a real issue, but since I guess you've used this IRL I would like to ask your input.
I really like this pattern a lot, and your plugin seems to solve it neetly.
But how can I implement this on a website with multiple levels?
Use of a second navigation on subpages, breadcrumbs, related pages etc, whats your take on it?

Thanks!

Hey there,

I'm happy to see there is fairly consistent updating of Paradeiser. Having said that, it's quite a hassle to keep redownloading a CSS file and uploading it to my server every time there is an update. Consequently, is it possible to have Paradeiser hosted on a CDN?

Thanks,

Theo

Hi there,

Thanks for this plugin. I'm testing it in a project that is using Tidy extension to clean and repair bad markup. The code needs some minor repairs to be fully compatible with it.

1. "div" into "a" --> the menu buttons --> change de nested div to span
2. "div" and "ul" into "span" --> the dropdown --> change the span to div
3. Into the CSS: when making reference to the former structure .paradeiser > span, now it can be repaired as: .paradeiser > .paradeiser_dropdown

Regards,
Alex

Please update your markup when you have the time. I'm starting to get frustrated by so many people (not the author of this great menu package) who neglect more semantic markup in favor of "DIVitus". For example, you could replace <div class="paradeiser"></div> with <nav class="paradeiser"></nav>.

Nice work on this great "menu-maker" and great job at keeping it simple and slim! #awesome-job

js can no longer be used normally, the version has been updated 0.12.0

https://unpkg.com/[email protected]/dist/headroom.min.js

Beim öffnen des More-Menüs werden bei mir nicht alle eingebundenen Menueinträge angezeigt, beim versuch auf dem Device runterzuscrollen verschwindet das Menü.

Wenn ich beim unten eingefügten Script die Zeile entferne bleibt das Menü bestehen aber scrollt nicht mit.
Ich habe bereits mit CSS Overflow rumgespielt aber ohne Erfolg.

Hast du eine Idee ?

// enabling headroom
var myElement = document.querySelector(".paradeiser");
var headroom = new Headroom(myElement, {
    tolerance: 5,
    onUnpin: function() {
        //document.getElementById("paradeiser-more").classList.remove("open");
    }
});
headroom.init();

I want to have a materialize dropdown list in my paradeiser menu as one of my links but the css for .paradeiser ul effects all unordered lists within the menu and breaks my dropdown. A change to .paradeiser ul.paradeiser_children would allow other unordered lists within the menu, such as button dropdowns etc.

Maybe we can fix

Paradeiser seems to have a rendering problem in both Chrome and Safari for iPhone. I have not checked this in other iOS browsers that are avaliable however I can confirm Paradeiser does work in Chrome for Android having been checked by @pierr3.

Screenshot from Chrome for iOS is below. The behaviour is similar in Safari.