WebAppers

/ best free open source web resources /

Shopify

Create a Responsive Mega Dropdown with Sub-Categories

Posted · Category: License Free, Menu

One of the most challenging part when you’re working on a web projects with lots of content is to make it easy for a user to navigate through this content. One example we can all think of is Amazon: infinite categories, each one with its own sub-categories, that’s why they currently provide an easy-to-access navigation, in the form of a mega-dropdown element on the top-left corner of the page.

Codyhouse has been working on a similar concept, a Responsive Mega Dropdown component with sub-categories.

dropdown

Requirements: –
Demo: http://codyhouse.co/demo/mega-dropdown/index.html
License: License Free

Adding Popular Wobble Effect for Your Mobile App

Posted · Category: Menu, MIT License

WobbleView is an implementation of a recently popular wobble effect for any view in your app. It can be used to easily add dynamics to user interactions and transitions. This is subtle but dynamic motion for list swipe interactions and connect it with cell velocity, making it feel more responsive to user actions. WobbleView is available via CocoaPods.You can also manually add the files into your Xcode project. Slightly simpler, but updates are also manual.

wobble-effect

Requirements: iOS XCode
Demo: https://github.com/inFullMobile/WobbleView
License: MIT License

Slideout.js – Touch Slideout Navigation Menu for Web Apps

Posted · Category: Menu, MIT License

Slideout.js is a touch slideout navigation menu for your mobile web apps. it’s dependency-free with simple markup. It supports native scrolling. You can easily customize it as you wish. It supports different CSS transforms & transitions. Best of all, it’s just 4 Kb.

slideout-js

Requirements: –
Demo: https://mango.github.io/slideout/
License: MIT License

Slide-in Content Filter Powered by CSS and jQuery

Posted · Category: License Free, Menu

A well-designed filter is a powerful tool users can take advantage of. It is actually an essential feature if your website has lots of content, distributed across different categories. For an e-commerce, it is a way to increase conversion rates by reducing the time needed by the user to find what he’s looking for.

Building this kind of features is never easy: filters highly depend on the website content; besides a filter panel shouldn’t be distracting, the main focus should be the content/products. Hence, Codyhouse tried to simplify a bit your life by building an easy-to-customize and easy-to-integrate CSS Content Filter panel for you. It takes advantage of CSS Transitions, CSS Transformations and jQuery muscles to smoothly slide in when needed.

content-filter

Requirements: CSS
Demo: http://codyhouse.co/gem/content-filter/
License: License Free

Drag and Drop Interactions Ideas for Your Inspirations

Posted · Category: License Free, Menu

Codrops has shared some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged. The demos are just some experimental ideas of how these kind of interactions can be imagined.

The idea is to allow to drag an item and then show some droppable area that stands for certain actions. This saves a lot of UI space and gives an interesting dynamic to interactions. There are many applicable scenarios; think of categorizing and organizing content (i.e. like the Pinterest boards) or performing any type of actions (like in mail apps or in content management systems).

drag-drop-ideas

Requirements: –
Demo: http://tympanus.net/Development/DragDropInteractions/
License: License Free

Midnight.js Lets You Switch Fixed Headers on the Fly

Posted · Category: Menu, MIT License

Midnight.js is a jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it. Midnight.js lets you switch fixed headers on the fly. On iOS <7 and older Android devices scrollTop isn't updated fluently, which creates a choppy effect. It can be fixed somewhat by wrapping the body in container and detecting touch events.

midnight-js

Requirements: jQuery Framework
Demo: http://aerolab.github.io/midnight.js/
License: MIT License

Create Smart Fixed Navigation with JavaScript

Posted · Category: License Free, Menu

Smart Fixed Navigation is a fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.

smart-fixed-navigation

Requirements: JavaScript Framework
Demo: http://codyhouse.co/gem/smart-fixed-navigation/
License: License Free

A Flexible jQuery Plugin for Sorting & Pagination

Posted · Category: GPL License, Menu

jPList is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure. It supports data sources: PHP + MySQL, ASP.NET + Sql Server, PHP + SQLite. It works with JavaScript templates like Handlebars, Mustache etc.

jPList supports XML + XSLT. It works in all major browsers. For non-commercial, personal, or open source projects and applications, you may use jPList for free under the terms of the GPL V3 License.

jquery-data-grid-controls

Requirements: jQuery Framework
Demo: http://jplist.com/
License: GPL v3 License

Responsive and Fixed One Page Navigation Plugin

Posted · Category: Menu, MIT License

Fixed Responsive Nav is a responsive, fixed and touch friendly one page navigation, using Responsive Nav, smooth animated scrolling & vanilla JavaScript. This project is built using progressive enhancement and tested to be working on Internet Explorer 6 and up.

You can add a mask over the content when navigation is opened. Auto highlights current location. Closes the navigation when user tap’s outside of it. You are free to use the JavaScript, styles and the icon fonts provided here in your own project. Commercial or non-commercial.

responsive-nav

Requirements: JavaScript frameworks
Demo: http://blog.adtile.me/2014/03/03/responsive-fixed…
License: MIT License

Headroom.js Allows You to React to the User’s Scroll

Posted · Category: Menu, MIT License

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header slides out of view when scrolling down and slides back in when scrolling up.

Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time. Using headroom.js is really simple. It has a pure JS API, and optional jQuery/Zepto-compatible and AngularJS plugins.

headroom

Requirements: JavaScript Framework
Demo: http://wicky.nillia.ms/headroom.js/
License: MIT License

Page 1 of 11123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons