Menu Toggle Adder

码农软件 · 软件分类 · 其他jQuery插件 · 2020-01-12 17:58:56

软件介绍

Menu Toggle Adder - JQuery Plugin

JQuery plugin that automatically adds "toggle triangles" to your menu. Includes ability to automatically highlight selected links.

Examples

  • Example One: Highlight Selected Link, Animation occurs when toggling.
  • Example Two: Don't highlight Selected Link, No animation occurs when toggling.

Download

Download the JQuery Menu Toggle Adder plugin and related files!

How To Use

  1. Download the latest version of JQuery and the Menu Toggle Adder files.
  2. 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. Use conditional comments to call "ie6_menu_toggle_adder.css" in IE6 only.
  • 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 before your close body tag.
  • 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 Settings

    There 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 On

    • Internet 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.

    本文地址:https://codercto.com/soft/d/23236.html

    网页配色实用手册

    网页配色实用手册

    温鑫工作室 / 科学 / 2011-9 / 59.00元

    《网页配色实用手册》在日常生活中,色彩早已广泛地深入到人们的精神生活和物质生活中,它是一种能够激发情感、刺激感官的重要元素。《网页配色实用手册》 从色彩的应用范围和网页设计行业需求出发而编写。全书共分为9章,第1章~第2章主要介绍色彩的基础知识、网页与多媒体的相关知识,帮助读者掌握最基本的理论;第3章主要介绍明度、纯度以及色彩感觉的配色,引领读者深入学习;第4章~第8章分别根据网站的属性、网站的地......一起来看看 《网页配色实用手册》 这本书的介绍吧!

    HTML 编码/解码
    HTML 编码/解码

    HTML 编码/解码

    SHA 加密
    SHA 加密

    SHA 加密工具

    UNIX 时间戳转换
    UNIX 时间戳转换

    UNIX 时间戳转换