Greepit » Menu and Navigation http://www.greepit.com Open Source Web Development Resources for Designers and Developers Fri, 10 Feb 2012 12:59:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Simple jQuery Context Menu (HTML5 Menu Supported): contextMenuhttp://www.greepit.com/2011/12/simple-jquery-context-menu-html5-menu-supported-contextmenu/ http://www.greepit.com/2011/12/simple-jquery-context-menu-html5-menu-supported-contextmenu/#comments Thu, 01 Dec 2011 08:57:58 +0000 Saif http://www.greepit.com/?p=14119 Navigation is one of the prime factors in the layout of a website or web application. It not only make it easy to learn and interact with the system but also makes it easy to manage content and even retain visitors and boost sales. Navigation can be in the form on menus, side bars, ribbons or sitemap etc. However, there are certain cases when you need to go beyond traditional navigation options to simplify complex workflows.

For instances, when there is a lot of mouse movements involved (like selecting objects in drop down list, reviewing object details and then selecting items from another menu) or when information is grouped in complex hierarchy (like Home & Garden > Garden Supplies > Garden Tools > Brand > Tool Type > Tools List).

The best approach in these scenarios would be using context menu to make navigation simple and allowing uses to instantly learn hierarchy of information. For an experiment, you can use contextMenu, which is a simple yet effective jQuery context menu plugin specially designed for websites and applications with large menus and navigation options.

jQuery contextMenu comes with keyboard support and you can use your keyboard to navigate.

Special Downloads
Design Freebies
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/12/simple-jquery-context-menu-html5-menu-supported-contextmenu/feed/ 0 How to Build An CSS3 Animated Dropdown Menuhttp://www.greepit.com/2011/11/how-to-build-an-css3-animated-dropdown-menu/ http://www.greepit.com/2011/11/how-to-build-an-css3-animated-dropdown-menu/#comments Fri, 18 Nov 2011 10:09:03 +0000 Saif http://www.greepit.com/?p=13971 Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics of a document written in a markup language.

CSS3 features like transitions, animations and transforms can add extra spice to your designs.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

Special Downloads
Design Freebies
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/11/how-to-build-an-css3-animated-dropdown-menu/feed/ 0 Framework to Create Google+ Styled Buttonshttp://www.greepit.com/2011/10/framework-to-create-google-styled-buttons/ http://www.greepit.com/2011/10/framework-to-create-google-styled-buttons/#comments Sat, 01 Oct 2011 08:18:43 +0000 Saif http://www.greepit.com/?p=13307 Greepit has previously shared Free Google+ PSD UI Kit and more than 200 Google+ PSD Interface Icons.

Today, we are sharing a framework to create Google+ Styled Buttons and Dropdown menus.

This is an easy to implement framework of Google+ styled buttons, icon buttons & dropdown menu buttons that look and work great in web applications.

Special Downloads
Design Freebies
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/10/framework-to-create-google-styled-buttons/feed/ 0 Dynamic Carousel: Free Carousel Plugin for Responsive Layoutshttp://www.greepit.com/2011/09/dynamic-carousel-free-carousel-plugin-for-responsive-layouts/ http://www.greepit.com/2011/09/dynamic-carousel-free-carousel-plugin-for-responsive-layouts/#comments Thu, 29 Sep 2011 11:33:07 +0000 Saif http://www.greepit.com/?p=13290 Responsive layout is a popular subject of interest for developers and designers of web applications. In fact, it has become important for web developers and designers to master responsive layout techniques because of increasing numbers of iPad, smart phone and tablets of all sizes.

There are already a number of open source tools and plugins shared on this website that aid developing web applications with responsive layouts. Today’s featured product is Dynamic Carousel. As the name explains, it allows you to provide a dynamic carousel element that is responsive to different web layouts.

Check out Dynamic Carousel and share your experience with us.

Special Downloads
Design Freebies
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/09/dynamic-carousel-free-carousel-plugin-for-responsive-layouts/feed/ 0 jQuery Plugin for Creating Single Page Web Sites: Pagify.jshttp://www.greepit.com/2011/09/jquery-plugin-for-creating-single-page-web-sites-pagify-js/ http://www.greepit.com/2011/09/jquery-plugin-for-creating-single-page-web-sites-pagify-js/#comments Fri, 16 Sep 2011 12:15:23 +0000 Saif http://www.greepit.com/?p=13114 Pagify.js is a simple jQuery plugin for creating single page web sites. It replaces the contents of a div with content from other html files.

It is very easy to use, simply include pagify.js, create a div, make one jQuery call and you’re done!

Get started by only specifying a list of pages or customize animations, default pages and caching. Pagify.js is far less than 100 lines of code, well commented and easy to understand and extend.

Special Downloads
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/09/jquery-plugin-for-creating-single-page-web-sites-pagify-js/feed/ 0 Improve Your Navigation Experience With Flexible Nav jQuery Libraryhttp://www.greepit.com/2011/09/improve-your-navigation-experience-with-flexible-nav-jquery-library/ http://www.greepit.com/2011/09/improve-your-navigation-experience-with-flexible-nav-jquery-library/#comments Fri, 02 Sep 2011 09:41:47 +0000 Saif http://www.greepit.com/?p=12929 Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article,.. any web page.

Nav links are distributed proportionally to the page sections. The library can generate for you the nav sidebar content providing elements to display in navigation.

By default, it uses h1 to h3 elements to retrieve and locate the different sections of a document but you can override these elements selector.

Special Downloads
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/09/improve-your-navigation-experience-with-flexible-nav-jquery-library/feed/ 0 Easy Sliding / Floating Panels for Your Web Page: Portamento.jshttp://www.greepit.com/2011/08/easy-sliding-floating-panels-for-your-web-page-portamento-js/ http://www.greepit.com/2011/08/easy-sliding-floating-panels-for-your-web-page-portamento-js/#comments Wed, 31 Aug 2011 14:58:46 +0000 Saif http://www.greepit.com/?p=12810 Portamento is a jQuery plugin that makes it simple to add sliding (aka “floating”) panel functionality to your web page. All that’s needed is some simple CSS and one line of JavaScript, and you’re away!

It works fine with floated and absolutely-positioned layouts, in all modern browsers and some not-so-modern ones too.

Portamento also has sensible behaviour if the user’s viewport is too small to display the whole panel, so you don’t need to worry about users not being able to see your important content.

Special Downloads
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/08/easy-sliding-floating-panels-for-your-web-page-portamento-js/feed/ 0 How to Make Timelines with jQuery Timelinrhttp://www.greepit.com/2011/08/how-to-make-timelines-with-jquery-timelinr/ http://www.greepit.com/2011/08/how-to-make-timelines-with-jquery-timelinr/#comments Fri, 19 Aug 2011 09:43:31 +0000 Saif http://www.greepit.com/?p=12739 jQuery Timelinr is a jQuery plugin helps you to give more life to the boring timelines by creating animated sliding timelines.

It offers great flexibility by supporting horizontal and vertical timelines and you can parameterize the majority of attributes including speed, transparency.

Special Downloads
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/08/how-to-make-timelines-with-jquery-timelinr/feed/ 0 Determine the Visible Fractions of An HTML Element: jQuery.fracshttp://www.greepit.com/2011/07/determine-the-visible-fractions-of-an-html-element-jquery-fracs/ http://www.greepit.com/2011/07/determine-the-visible-fractions-of-an-html-element-jquery-fracs/#comments Fri, 29 Jul 2011 11:30:17 +0000 Saif http://www.greepit.com/?p=12504 jQuery.fracs determines the visible fraction of an HTML element that is currently in the viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be visible.

It also provides the coordinates of the visible rectangle in document, element and viewport space.

Special Downloads
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/07/determine-the-visible-fractions-of-an-html-element-jquery-fracs/feed/ 0 Create Visual Scrolling Navigation: Ascensorhttp://www.greepit.com/2011/07/create-visual-scrolling-navigation-ascensor/ http://www.greepit.com/2011/07/create-visual-scrolling-navigation-ascensor/#comments Tue, 26 Jul 2011 11:18:14 +0000 Saif http://www.greepit.com/?p=12452 One of the top trends in web design is effective and creative content navigation. You can experience all types of horizontal and vertical navigation of different style in modern websites. To get started with creative navigation, today we are featuring Ascensor, which is a scrolling navigation jQuery plugin which aims to train and adapt content according to an elevator system.

Ascensor identifies div child of the selected container and also creates the needed navigation system to link to different content parts.

Features

  • Make every div child a stage of the site
  • Add in every div a link for the next div (true/false)
  • Create a visual navigation (true/false)
  • Adapt and scroll to the active content
  • URL logical support
Special Downloads
Feedback Collection and Polling Widget
Free Creative Resume Template
Open Source Icons
Free Minimal WordPress Theme

Related Posts

]]> http://www.greepit.com/2011/07/create-visual-scrolling-navigation-ascensor/feed/ 0