Archive for August, 2010

Some nice Jquery Menu Plugin

1. Apple-Style Icon Slide Out Navigation – CSS And jQuery
In this tutorial you will learn how to create an Apple-style navigation menu with a twist – it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element.
View Demo

2. Mega Drop Down Menus – CSS And jQuery
In this tutorial Soh Tanaka will learn you how to make an awesome Mega Drop Down Menu with the help of CSS, jQuery and the Hover Intent jQuery plugin from Cherne.net
View Demo

26. jQuery Context Menu Plug-In
A context menu plugin for jQuery that features easy implementation, keyboard shortcuts, CSS styling, and control methods. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.
View Demo

3. Smooth Animated Menu With jQuery
In this tutorial Zach Dunn will teach you how to build a nice jQuery menu with a smooth transition animation effect.
View Demo

4. Fading Menu – Replacing Content
When a menu item is selected, its graphic is shown at full opacity and its corresponding content area is shown, while the other menu items are faded and their content areas hidden. With jQuery, you can fade in the menu item being clicked, fade out all other menu items, display the corresponding content area and hide all the other.
View Demo

5. Fixed Fade Out Menu
This tutorial has the aim to teach you to build a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
View Demo

5. e24TabMenu – Drop down AJAX Menu
e24TabMenu is a plugin written for scriptaculous. In this tutorial Alfredo Artiles teaches you how to make a nice tab menu that expands and collapses smoothly.
View Demo

6. A Different Top Navigation
In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
View Demo

7. SpriteMenu
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. The menu is displayed by manipulating the background-position property to display individual sprites in the image.
View Demo

8. Image Menu
A horizontal menu that reveals more of the image as you rollover it. Features 2 optional onClick events (open and close), href passed to onClick events, stays open when clicked, closes when clicked and selects item to pre-open.
View Demo

9. Proto.Menu – Prototype Based Context Menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. Plays nice with JS turned off and menu styling can be easily defined in external stylesheet.
View Demo

10. Awesomeness-Filled Navigation Menu
In this tutorial you will learn how to create a navigation menu inspired by Dragon Interactive. CSS sprites can dramatically increase a websites performance and with jQuery you will implement awesome transition effects easily.
View Demo

Advertisements

Some fantastic Navigation menu Plugin

1. Halftone Navigation Menu – jQuery And CSS3
In this tutorial you will learn how to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
View Demo

2. Elastic Thumbnail Menu – jQuery And CSS
In this tutorial Sam Dunn will learn you how to make an elastic thumbnail menu. The menu magnifies menu items when they are hovered over and the menu items expand upwards.
View Demo

3. Filterable Portfolio with jQuery
In this tutorial, Trevor Davis, a 25 year old front-end developer, will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
View Demo

4. jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter.
View Demo

5. Ext Accordion
The Accordion widget and its InfoPanel are components that use the Ext JS Library. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.
View Demo

6. Fresh Content Accordion
A simple, yet very eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.
View Demo

7. Yetii – Yet (E)Another JavaScript Tab Interface
Yetii is a functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.
View Demo

8. Apple Style Menu Improved With jQuery
How to create a similar main navigation like the one of kriesi.at – a so called kwicks menu. Build an Apple-flavored Leopard-text-indent style menu from scratch in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
View Demo

9. Jquery Fade In And Fade Out
A fade in fade out effect – the effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website whatever it be an image, text, a link or even a div.
View Demo

10. Mootools Navigation Plugin
The goal of this plugin is to create a complex navigation menu as seamless as possible. All you need to do is create a standard unordered list and the plugin will do the rest.
View Demo

11. Morph Effect On Mouseenter And Mouseleave With Mootools 1.2
In this tutorial, you will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools – and turn it into something fun to click.
View Demo

12. jPaginate – Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

13. Clickable Table Row
If an HTML table row contains only one <a> link, it can be useful to make the entire row clickable and make it activate that link. This tutorial shows how to make the entire row clickable so that clicking anywhere in the row is the same as clicking that link.
View Demo

14. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo

15. Accordion And Hover Effects With JQuery
This tutorial video (QuickTime version is 60Mb – flash version is streaming) explains how the accordion and hover effects on Tim Van Damme’s site can be achieved using jQuery.
View Demo

16. Thumbnail Hover Effect Using Mootools
Image is splitting in the middle using two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.
View Demo

17. Outside The Box – Navigation
Just about every website uses the regular navigation concepts we’re all used to. After a while this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
View Demo

18. MooTools ScrollSidebar
ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.
View Demo

19. Icons To External Links
A trend going on around on websites is putting icons on links that point to web pages externally. If you want that on your site, this simple script will dynamically take care of that for you with the help of Mootools and some CSS.
View Demo

20. Powerful Product Highlighter With MooTools
This tutorial will help you to create a flexible tool for highlighting your sites products or services using the MooTools JavaScript framework – a clever rollover mechanism that works well as a product highlighter.
View Demo

21. Scrolling To The Top And Bottom – jQuery
Scrolling to the Top and Bottom of your website with a simple click with the help of jQuery special scroll events from James Padolsey, and some few extra lines of jQuery.
View Demo

22. Mootools 1.2 cvLinkSelect Class
This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded.
View Demo

Some Important CodeIgniter Tutorial links

How to Integrate WordPress blog to your existing Website

Basically you can think of WP as a collection of functions or scripts that do specific things. If you want to have your site title to be somewhere on the page, you simply type in: This piece of code is all that is required on your part to achieve the desired affect. So let’s get down to brass tacks. Say you have a site all ready to go, and you only want to use WP to power the text of your site;

Continue reading