Projects

js-menu-toggle-adder

Menu Toggle Adder - JQuery PluginJQuery plugin that automatically adds "toggle triangles" to your menu. Includes ability to automatically highlight selected links. ExamplesExample One: Highlight Selected Link, Animation occurs when toggling. Example Two: Don't highlight Selected ... [More] Link, No animation occurs when toggling. Download Download the JQuery Menu Toggle Adder plugin and related files! How To UseDownload the latest version of JQuery and the Menu Toggle Adder files. The Menu Toggle Adder files contains "sample.css", "menu_toggle_adder.css" and "ie6_menu_toggle_adder.css". "sample.css" contains some reset, formatting rules. "menu_toggle_adder.css" contains the rules needed to display your menu. "ie6_menu_toggle_adder.css" contains additional rules need to display your menu in ie6. Call the style sheets from your page similar to this: The Menu Toggle Adder files contains "toggle images". Modify them as needed. Upload the Menu Toggle Adder "toggle images" to your images folder. Call the JQuery and Menu Toggle Adder Javascript files similar to this: Invoke the Menu Toggle Adder function similar to the below example. This means that you should add the below code (surrounded by "script" tags) to the html document(s) where your menu is displayed. '#menu' should be replaced by the id attribute assigned to the parent unordered list of your menu. $(document).ready(function(){ $('#menu').menu_toggle_adder(); }); Menu Toggle Adder SettingsThere are several settings that can be specified when invoking the menu toggle adder function. For example (don't forget to add the opening and closing script tags): $(document).ready(function(){ $('#menu').menu_toggle_adder( { animate_toggle: 'yes', /* 'yes' or' no'. Use "slide down" animation to show and hide nested lists. */ highlight_selected_link: 'yes', /* 'yes' or 'no'. Add "menu_selected" class to the link (and it's parent) that matches the current page name. */ toggle: 'images/toggle.gif', /* Path to the toggle image. This is the image that shows when nested ul is hidden. */ toggled: 'images/toggled.gif', /* Path to the toggled image. This is the image that shows when nested ul is visible. */ toggle_selected: 'images/toggle_selected.gif', /* Path to the selected, toggle image. This is the image that shows when nested ul is hidden and the link url matches the current page name. */ toggled_selected: 'images/toggled_selected.gif', /* Path to the selected, toggled image. This is the image that shows when nested ul is visible and the link url matches the current page name. */ } ); }); Why Use It?It is tedious for your website user to have to look at a long vertical menu containing, for example, category and sub category links. Collapsing your sub category links will allow your website user to find what she is looking for much easier. Giving the user the ability to expand and contract the menu using toggle images allows them to inspect the full menu without having to reload the page. Tested OnInternet Explorer 6 (PC) Internet Explorer 7 (PC) Fire Fox 2 (PC) What Does it Do?Finds All unordered lists (ul's) that have nested ul's and adds a toggle image. Finds the menu link that matches the current url's page name. On page load, all nested ul's are hidden, except for the one that contains the link that matches the current url's page name. If the menu link that matches the current url's page name is contained in a nested ul, then both the nested link and parent link get a class assigned of "menu_selected". If the menu link that matches the current url's page name is contained in a parent ul, then the link gets a class assigned of "menu_selected". Nested ul's appear and disappear when toggled using the JQuery "slideUp" and "slideDown" functions. [Less]

jquery-showhide

jquery-showhideA robust "toggle" plugin for jQuery. Features include the use of cookies, toggling of text and more. Remember the state of the target object in a cookie. Change the text of the toggle element (useful if you want the link text to change, e.g. "Show ... [More] form"/"Hide form"). Apply classes to the toggle element to give it plus/minus classes. Auto focus on a form element within the target element (useful if you are showing a hidden form). To see what you can do with this plugin, check out this short video (no audio) of a (very) simple example usage: This shows the showhide functionality as well as the "autofocusing" of the first text field in the form. Very useful if you have hidden forms in your page and you want to quickly enter content. You can also check out the blog post on jquery-showhide here: http://www.danawoodman.com/2009/11/introducing-jquery-showhide/ Check out some examples below to get started. Example 1A simple inline toggle using no options. By default showhide will toggle the next element (e.g. $(this).next()) and will default the target object to be visible. First add in the jQuery code to the of the page: $(function() { $('#example-1').showhide(); }); ... then add in the HTML: Toggle This can be toggled. The link tag is what we call the toggle element and the span tag is what we call the target element. The last thing that you will have to do is add in some styling for the "hidden" class (by default, a class of "hidden" is applied to the target element.) .hide { display: none; } This example will have the link toggle the visibility of the element. Now, of course this is not very interesting or useful but by using the available settings you can control a variety of functionality. Example 2This example is useful if you need to toggle elements that are not directly next to each other. This reference the toggle object (this) within the functions settings, making it easy to The JavaScript: $(function() { $('#example-2').showhide({ target_obj: '$(this).parent().next()'; }); }); The HTML: Toggle This can be toggled. For more information, check out the "demo" folder. I will be updating the docs and providing more examples when I have time :) If you would like to contribe to this project, please email me at wooman.dana at gmail.com. If you find a bug, please submit it using the "Issues" tab above. Thanks for visiting! [Less]