Comments (3)
Hello,
This is an interesting experiment. I'm kind of surprised it (sort-of) works with the table mark-up (it looks like keyboard navigation is broken).
Personally, I'd let IE7 and below degrade gracefully by allowing the menu to not be full width. That way you don't have to abuse the table element and break keyboard support, and having the design be usable but aesthetically less-than-optimal in IE7 is about as much as it deserves nowadays.
The first thing I'd try though (I haven't looked at this cross-browser, so you may have already tried and discounted this) would be to just set a percentage width on the top level list items (although you need to know how many items there will be ahead of time). I have forked your jsfiddle, removed the table markup and demonstrated the percentage width idea here.
from superfish.
Hi,
I admit that i didn't check all the functionality.
My problems started with the client requiring to have the same UX, on all browser including IE6 :| can't do much as I'm only a consultant on the firm that builds the app for this client.
The problem with the percentage width is that the menu changes the number of the First Level Elements, and the length of the label varies and I would have to give them different values.
When I've wrote the "patch" and saw how little changes it took I thought it would be nice sharing.
By the way your example has a problem ... try to set the width of the top UL for example to 400px, the UL respects the width but the last A text finishes off the rectangle (Chrome, IE10,)
from superfish.
I think you should use display:table for good browsers, and for older IE use your idea of calculating the width with JS, but change it to set the top-level list item width to 100% divided by number of top-level items
. This would be a simpler and more flexible solution than calculating pixel widths.
As for the problem with my jsfiddle, that's just because 400px is too narrow to fit the items on one line. If you want the text to wrap then just remove the white-space css. Then you'll have to battle with the vertical height, though.
from superfish.
Related Issues (20)
- Superfish slim HOT 2
- SuperfishForSharePoint HOT 1
- Mobile menu not working 🤔 HOT 1
- jQuery easing animation support
- Way to disable all delays and animations HOT 2
- On Mobile (Google Pixel) on wordpress, selecting a submenu opens and rapidly closes the submenu HOT 1
- v1.7.9 confict with WooCommerce single product tabs navigation HOT 1
- issues with jquery 3.2.1 HOT 3
- onShow triggered again when clicking menu
- how to initialize superfish using javascript HOT 1
- Swiping to scroll opens submenu
- mouseenter targets vs focusin targets HOT 2
- On mobile submenus not showing HOT 1
- Superfish doesn't work correctly
- Close the current submenu by using escape HOT 5
- iPad ios 13.1 menu item link problem HOT 17
- Busted link in the README HOT 1
- jQuery Superfish Menu Plugin
- Homepage implies it contains examples, on their own page
- jQuery(...).superfish is not a function HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from superfish.