Responsive Nav is a tiny JavaScript plugin which weighs only 1.7 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.
Navi makes it easy to dynamically display content on your sites. Instead of cluttering up your site tree with extra files, you can easily write all of your html code for multiple pages in one file.
Navi was created to be an easy way for anyone wanting to change content. This plugin can help with the development of numerous other plugins including: tabs, pagination, image sliders, and others. Navi has serveral options to tweak and allows for loading content based on the page hash. You can call Navi on multiple elements with ease so you can have multiple content switching sections.Navi is also friendly with other plugins, and can be called on multiple objects or nested.
FINALLY the best gallery for tiled layouts because it doesn’t crop your images while it still offers a complex layout, it’s not the same old boring layout made of columns or rows of same size.
Best results are achieved using images of different sizes. Using images of same size will simply give you a standard grid layout.
A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.
Some media query examples show how to make the menu responsive and change the view to a touch-friendly vertically stacked navigation.
A responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear on hover or click are also included. Media queries can be used to resize the items in the grid or change the number of items in a row. Flexbox is used when supported.
Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize.
Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS. we’ll use Dave Rupert’s Lettering.js to wrap the words and letters into multiple spans.
