Rich JavaScript DHTML menus - javascript

Can someone suggest a JS menu script that would be able to support menus such as those that are made here http://www.brightstarr.com/US/Pages/Default.aspx ?
I've been searching the web but can't quite phrase it correctly so I always end up either on Superfish or some other plain dropdown menu?
What I need is support for big menus, broken apart in sections with optional images support (image per menu link).

The particular page doesn't seem to use JS for their menu at all - just CSS leveraging the :hover pseudoclass. Found a tutorial here. The bottom line is that you write all the markup your dropdows require, season them with CSS styles to taste (and position!), and finally put the :hover in place in your stylesheet to just make the submenus appear when you want them to.

Soh Tanaka's Mega Menu is the classic example of setting up this style of menu. I'd go so far as to say it's the gold standard for mega menu scripts. After building the tutorial, it should be easy to do anything you want inside the divs for each relevant area.
The best part about using a pre-done solution with a tutorial like this is that not only do you get to learn, but it's also been well tested and revised.
If the above example is a little too strict with <li> elements, you might try this tutorial from SitePoint

I would just search for plugins for your favorite javascript framework. There are probably about 1000 if you search "jquery drop down menu plugin". The big sizes and adding of images is pretty standard in the ones I've used as well since they are just divs. I don't know if you are used to working with jquery but I am sure there are plugins for all the other big frameworks out there as well.

I wrote the menu for the BrightStarr Site. It doesn't use JS at all, I tried lots of techniques before deciding on this and I choose this for the simple reason that it performs much better on mobile devices than any other JS solution I've come across.

Related

HTML5 Drag and Drop Vs jQuery UI Drag and Drop

What is the best way to make a drag and drop builder in 2017? Yes, this question has been asked before but that was 5 years ago and I assume things have changed? HTML5, jQuery UI or is there another option now?
A more recent question Form Builder From Scratch - HTML 5 Drag and Drop, or JQuery UI Draggable, or What? was also left unanswered.
Any help would be great! I have started to play around with both (I have never used HTML5 or jQuery UI's Drag and Drop so it's hard for me to make a decision.) and jQuery UI does seem to be easier to use and understand but also seems quite buggy, well at least in codepen.
We just did a bit of research into Drag and Drop with ReactJs and honestly came out the other side a bit sad. So if you're looking for pure HTML 5 Drag and Drop this is a fantastic site to show you how screwed you are:
https://caniuse.com/#feat=dragndrop
So as of the time of writing this, if you went pure HTML5 DND you really wouldn't cover the mobile scenarios.
Now what isn't listed in this is all the edge cases to get the feature looking the same across browsers. Between Edge, Firefox and Chrome, one adds an Icon to show that you are dragging at item, one has a slight opacity on a copied element and one does something else. Either way, aligning these designs (depending on how annoying your design team is) can be easy (e.g. don't care as long as drag and drop works) to impossible (e.g. get rid of the icon while I'm dragging).
Now when it comes to JQuery, it's been around a while but that doesn't mean it doesn't have it's faults as well. Because it runs in the JS layer instead of the browser itself, depending on how much is going on in the system, it can feel a bit slow. Also I did notice it started dragging on annoying situations like when you're trying to swipe the page to scroll in Edge. That could have also been poor programming on our part.
I think in the end we just used React Dnd with the HTML5 backend. Seems to work pretty good and for those mobile scenarios we just have menu options which expose the same functionality in a different form. It ended up helping with accessibility as explaining all the actions for drag and drop via keyboard shortcuts was slightly annoying.
Not sure if that helps but if I recall (and it's been about 6 months) that's the run down.
I recommend using jqueryui with a small hack called touch punch that allows you to capture the events of mobile devices such as ontouch on the screen. I prefer jqueryui because it is more complete than HTML5 and relatively easy to use.
The link:
http://touchpunch.furf.com
Good luck and greetings

how does responsive design work?

After checking a few dozen articles I am still in the dark how to actually implement a responsive ux-design (I really understood the layout part). A simple example: Bootstrap (CSS framework) collapses toolbar buttons into one drop-down button on mobiles. That's all I need! I'd like to understand just the basics of this very behavior. Does it requires only CSS, or do I need JavaScript too? I actually don't know any other way than JavaScript.
In my apps (IDEs), I usually have lots of toolbar buttons and at a certain breakpoint or width I guess I will have to put them just into a dropdown button, in one way or another, right? The obvious things such as re-arranging layout containers per break-point/width are a piece of cake with CSS; at least this is how it looks.
Update, I am working only with JS based widgets. Mostly generating all HTML.
You can make multiple (for different screen sizes) menus, dropdowns or navbars etc. And then use media queries to just display one of them at a specific screen width ( ie display: none for others). And I think Bootstrap works similarly (It might also use JS).
In this way your design will become responsive, although it will increase file size.
Check GRID. It's a (great) simple guide to responsive design.
http://adamkaplan.me/grid/
After doing lots of research and development; there is basically nothing standard out there for a JS based solution. I checked Dojo, Sencha and some others paid stuff. At the end I did end up with custom JS code. Media queries did only help to some degree, actually just when it comes to moving and sizing layout containers and pictures; but that's pretty much it. Its even better to do it in JS only since calculations become far more accurate and interfere less with your Code.
So to me 'responsive design' has actually no mean at all; its great for regular web-sites but really not for complex ux.
back to square one,
g

Mobile javascript framework with Twitter Bootstrap

In one of my website I use Twitter Bootstrap 2.3. I love its responsive behaviour, media queries in mobile devices. But it lacks of mobile features (especially linked listviews) So I need to use a framework that would handle mobile version of my website.
After some research I found that jquery mobile, sensa touch, jqtouch, iui, mobilize.js, zepto are possible candidates.
What would be your recommendation for a javascript framework/plugin for mobile pages, that would work well with twitter bootstrap ?
Possible related questions:
Bootstrap list view like jqm
twitter-bootstrap vs jquery-mobile
Using Bootstrap with jQuery Mobile
Also read this: Twitter Bootstrap Navbar: [Left Button -— Center Text -— Right Button]? II
I think i should be possible to build a mobile interface with Twitter's Bootstrap (3). And yes you're right (linked) listviews will miss. Maybe check http://getbootstrap.com/components/#list-group first. Of course you will need to write some code to handle the actions.
Other points to consider: Navigation and page structure. Frameworks like jQuery mobile serve more pages on one url, see: http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.html while sencha use a MVC approach. Consider http://getbootstrap.com/javascript/#tabs (or http://getbootstrap.com/javascript/#scrollspy maybe) to mimic such structures.
Other examples, see: How to make a JS horizontal content slide from px to % responsive a nice interface with TB by #boblet which adopt to mobile very well now: http://bootply.com/73715. David Panzarella started a clean mobile navbar with icons: Bootstrap 3 RC2 Navbar with Multiple Collapses And a alternative mobile navigation stucture can be found here: Toggle sidebar on mobile device with Twitter Bootstrap 2.x
Good luck
If you are ready to mess up with Bootstrap and other several frameworks together then make sure you have sound knowledge in jQuery, JavaScript, CSS.
Each framework has their own way of enforcing styles etc, so if you are to combines multiple platforms together, you will often encounter issues such as the expected style from expected framework is not being applied.
I’d recommend you to stick with jQuery Mobile. jQuery Mobile 1.3 has great deal of Responsive design concepts. In the release notes itself they’ve mentioned that they are working hard to support Responsive designs. Read the official documentation provided by jQuery Mobile. This will give you a good head start.
Disclaimer : I have used only Twitter Bootstrap and jQuery Mobile. But I’ve heard from people other Mobile frameworks are not as flexible as jQuery Mobile. Also remember Sencha touch is very fast compare to jQuery Mobile but bit difficult for absolute beginners to get started.
I would recommend iUI since i'm working on it (eh eh) and because it's more or less an empty canvas you can "draw" whatever you want on.
JQuery Mobile or Sencha are nice, but they come with dozens or buttons & UI elements you might not need for a website. It's even getting a mess if you want to give a custom look to your mobile website when everything is predefined.
afaik, Zepto is only a lighter JQuery, so that wouldn't solve you linked listviews issue that much...
Please, give a try to my iUI v2 project, Emy, that you can try here:
http://www.emy-library.org/demos/
Still a few bugs to fix but i'm damn close to the initial release. Big difference compare to iUI are HTML5 syntax, custom animations, full documentation and WindowsPhone support.
http://www.emy-library.org/documentation/1.0/getting-started.html
Cheers!

Horizontal Scrolling using JQuery/Javascript

I wanted to know if there is any open-source free script available for a horizontal scrolling website. I used this script but it has an issues running in IE.
Could someone suggest any script similar to this website?
There are lots of such widgets provided by a bunch of different javascript libraries.
GWT
YUI
ExtJS
Prototype/Scriptaculous
JSMadeEasy as posted by FacilityDerek above.
and Have a look at these jQuery scripts:
The first is a scrolling menu: Horizontal Scrolling Menu made with CSS and jQuery Example here
The second is a scrolling pane jScrollHorizontalPane example here
Here is a more simple one also using jQuery: simplyScroll v1
If what you want is more of a news ticker, you might find this interesting: liScroll (a jQuery News Ticker made easy) 1.0
jScrollpane will do the trick. It's cross browser.

How does this site achieve responsive layout

Can somebody throw some light as to what are the various ways this Site is using to be responsive. Especially how is the top and left navigation changing to drop down , when you when you re size the browser.
http://www.smashingmagazine.com
I am sure this doesn't use twitter bootstrap. Are they any better ways to go responsive without leveraging twitter bootstrap.
Responsive design has been around in name longer than Twitter Bootstrap, and in principal it has been around for even longer.
Are they any better ways to go responsive without leveraging twitter
bootstrap.
"Better" is subjective, but there are many ways:
Another out of the box framework
Media queries
JavaScript to adjust the page layout (your own, or something like Masonry)
Floating elements which wrap based on width
Percentage-based layouts
All of the above
The site you linked to actually has good info on responsive design: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
These frameworks look interesting:
http://framelessgrid.com/
http://webexpedition18.com/articles/responsive-css-frameworks/
http://foundation.zurb.com/

Categories