Is there any collapsable with resize menu plugin? - javascript

Lets take a look at google services menu:
There is that More pop up menu. but when we resize page all that top menu line does nothing - its width stays constant:
Same thing happens when we enlarge page width:
So I wonder if there is any jQuery plugin for greation of smart top bar menus that would add items to More when needed and return items from More to main menu when resulution allows that.
Is there any such plugin for jQuery?

Perhaps, something like this?

Related

Youtube / Google Style Carousel Slider

I would like to make a carousel slider similar to what you see on the new design for Youtube.com and pages like this: https://plus.google.com/discover/w29saB
Any recommendations on how to build this, or Jquery plugins that facilitate this.
I've tried itemSlide() but I don't know how to get the CSS so that it renders inside the container DIV properly. Also Itemslide doesn't give the arrows to scroll to the next page.
Other carousel plugins I've looked at even with their responsive options, make you specify the number of items to fit on a page. I would like that to be determined by css.
Update I've gotten itemSlide() to render in the container div however I still need to be able to add the arrows so that it scrolls when clicked. I figure getting the buttons to overlay is a matter of the right CSS. Getting the scroll to work when clicked is likely something specific to the itemSlide api that I should be able to figure out once the arrows are overlaid properly. itemSlide() as carousel slider library: http://itemslide.github.io/
Why not try a DIV inside a DIV. Have the overlap as hidden in css. Arrows can be div buttons that move the inner div "X" number of pixels in a given direction to match the block sizes in the carousel stile div.
Once you get the arrows overlaid you can use the disable_clicktoslide option of the library so that clicking on slides doesn't move to them.
To make the arrows work, call the functions next() and previous() on the carousel object.
Also you can use the function getActiveIndex() to detect where the user is on the carousel.
Good luck!

How to get a nice collapsible side bar menu with Bootstrap (yet another post about that)

I've seen countless examples of side bar navigation menus made with bootstrap, but none seem to be the way I'd like it.
I am looking for a couple features :
Each menu item has an icon and text
Collapsible : Display only the icons and top level menu items when collapsed
Simple animation when collapsing/uncollapsing (sidebar comes over the content)
Top level menu items and submenu items (hierarchy)
This one is nice but doesn't collapse
This one collapses (but not the way I want) but is missing icons + submenu items
This one (2nd example) has the collapsing behaviour I want but is missing some other things (and the way to make the menu appear is ugly)
Is it possible to have all these features on a sidebar with Bootstrap + javascript?
I've tried to convert a sidebar on what you needed.
Please have a look at this Codepen
Hope this helps!

How can I make a navigation bar that converts to a button for a sidebar when scaled down too much?

I have seen many sites with a navigation bar that will convert to a button that opens a menu if the page is scaled down too much. An example of this: www.aurelswonderland.com (Scale the windows width down and watch the nav bar dissapear)
How can I implement this myself?
Unless you are using Bootstrap or Foundation, I like to use SlickNav. It's a jQuery plugin that's very easy to use. You just call the slicknav() function on the "ul" in your navigation and you're good to go. You can also pass in options as in most jQuery plugins.
http://slicknav.com/

How to change vertically tabbed content panel into responsive collapsible with media queries and jquery?

I am attempting to build a content navigation pattern that uses vertically stacked tabs to toggle the display of hidden content panels next to the tabs. At smaller widths, this pattern breaks.
Heres my fiddle: http://jsfiddle.net/jrotton/xCeX8/1/
It is somewhat responsive...but lets say I have 12 tabs and the length of their labels range from "Nursing" to "Architecture, Design, and Construction". This breaks when the screen gets below 500px or so.
I could:
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
..it works but it not ideal when you have more than a few tabs.
I would rather hide the tab menu and change the panels into collapsibles with clickable h2's. It's also important that the pattern is screen-reader-accessible but I haven't made it that far yet.
Any ideas on how I could do this? Thanks in advance..
http://www.zurb.com/playground/off-canvas-layouts
Here's a few ideas...
Also I would say with what you have at the moment, floating that menu to the right on the mobile version isn't going to work. at the mobile size, those nav items should be 100% width, and the nav should be above the content, or should be another "slide panel".
Jquery mobile also has some very useful, very common design patterns built right in:
http://jquerymobile.com/

Html5/Javascript Docking/Flow Section Layout

Im in the process of making a web application with Asp.net mvc (w/html5). Following is my prototype layout plan for the application:
As you can see there are 4 different section:
Retractable side menu (docked left): This will be a side menu that will allow the user to click a button and slide it out of view. It will be scrollable with a scroller within its area.
Header Bar (docked top): Simple section with few buttons that is docked to the top.
Content Area (stretched to fit available space): This will show the content that is in focus to the user. This will be the only area that scrolls when the user scrolls the browser window
Button Bar (docked bottom): Section holding buttons for the application.
So my real issue is how you go about setting an area to be docked so that it is set to show in that area at all times even when the windows is scrolled (example would be facebook's ad bar on the right or their chat friend list). If the content area is longer than the browser window than when the user scrolls down the browser window (or if we need to implement a custom scrollable window that handles its own scrolling within the application) they will scroll down the content area, but all other areas will stay docked in view. How do you achieve this? A lot of websites seem to be doing it these days (facebook, twitter, windows azure etc). Any examples would be appreciated.
Thanks
The CSS way is to make an element's position set to fixed
This page has an example: http://davidwalsh.name/dw-content/css-fixed-position.php Look or the yellow sticky note on the top right. This is the relevant CSS for that element
.element {
position: fixed;
top: 2%;
right: 2%;
}
The nice thing about the web is that you can inspect (using Firebug or other tools) other sites to see how they build them.
That said, if you want a sticky area, I recommend StickyFloat, a jQuery plugin that works great.
I've used this wonderful jQuery plugin that provided exactly what you wanted and more..
UI Layout Plugin

Categories