Vertu – Simple Mega Menu is simple and easy mega menu with many functions.
Features:
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.
The interesting part is to calculate the correct preview height and to scroll the page to the right position. We’ll expand the preview in a way so that we can see the respective thumbnail row and cover the rest of the remaining page. Note that we don’t use very large images for the preview in the demo so you might see a lot of empty space on large monitors.
During my work as a frontend developer I coded many sites with a full page layout, both before and after the Flash decline.
Coding this type of layout was, every time, one step forward towards a better and more maintainable CSS structure; however, even if every single length was expressed as a relative and flexible unit, we need to know the number of pages.
For example: if we have an horizontal structure of 6 pages we set the pages’ container width to 600% and every single child page width to 16.66%. But if the number of pages changed to 5 or 7 we have to edit the CSS.
Flowtime.js is a framework for easily build HTML presentations or websites.You can navigate in many ways. The most common way is using the keyboard.
Flowtime.js is designed to perfectly fit your viewport and is based on a solid display: inline-block; foundation.
This frameworks doesn’t style your presentations or sites for you but it takes care of all the annoying things like navigation and deep-linking, so you are free to style every single element of your design as you like. But for the ones who need a ready-to-use tool it comes with a default theme that you can edit or you can add new themes just by linking your css files.
Sky jQuery Touch Carousel is a jQuery carousel plugin with rich set of features. It is responsive, touch-enabled, fast and smooth. It can be easily integrated into your own web projects. You can customize the visual appearance of the plugin with the help of the plugin options and CSS.
Features:
Grid Slider is a light-weight, high performance plugin that lets you display multiple items in perfect grid layout. It comes with various options letting you configure it without manually changing code. You could also use its built-in API to intergrate it with your own app very easily.
One can truly say this is really the ultimate navigation tool.With 65 jQuery plugin parameters there are thousands of customization options… literally!
All menus on this page are initialized with the same jQuery plugin settings, all the differences you see between the menus are managed through data-attributes.
Features:
HexaFlip is a JavaScript UI plugin that let’s you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins.
I originally developed a simpler version of HexaFlip for an iPhone app I built called ChainCal where it served as a time-picker interface for setting alarms. Most mobile time-picker widgets are fashioned after a dial, but I reasoned that rotating cubes would serve for a more unique and memorable experience. As we all know, a cube has six (i.e. “hexa”) faces, but when rotating it around a single axis, we only have four to work with (front, top, back, and bottom). Thus if we built a cube interface using CSS alone, our interface would be limited to four options per choice. HexaFlip solves this issue and playfully challenges the user’s expectations by allowing the cube to cycle over a list of any length.
