jQuery实现精美的多级下拉菜单特效

2020-05-22 17:02:45易采站长站整理

            function(){ $(this).removeClass(‘ui-state-focus’).addClass(‘ui-state-default’); }
        );
        // MENUS       
        $(‘#flat’).menu({
            content: $(‘#flat’).next().html(), // grab content from this page
            showSpeed: 400
        });
        $(‘#hierarchy’).menu({
            content: $(‘#hierarchy’).next().html(),
            crumbDefaultText: ‘ ‘
        });
        $(‘#hierarchybreadcrumb’).menu({
            content: $(‘#hierarchybreadcrumb’).next().html(),
            backLink: false
        });
        // or from an external source
        $.get(‘menuContent.html’, function(data){ // grab content from another page
            $(‘#flyout’).menu({ content: data, flyOut: true });
        });
    });
    </script>
<!– theme switcher button –>
<script type=”text/javascript” src=”js/themeswitchertool”></script>
<script type=”text/javascript”> $(function(){ $(‘<div style=”position: absolute; top: 20px; right: 300px;” />’).appendTo(‘body’).themeswitcher(); }); </script>
</head>
<body>
<p id=”menuLog”>You chose: <span id=”menuSelection”></span></p>
<a tabindex=”0″ href=”#search-engines” class=”fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all” id=”flat”><span class=”ui-icon ui-icon-triangle-1-s”></span>flat menu</a>
<div id=”search-engines” class=”hidden”>
  <ul>
    <li><a href=”#”>Google</a></li>
    <li><a href=”#”>Yahoo</a></li>
    <li><a href=”#”>MSN</a></li>