0

http://www.threecell.com/demoにデモ サイトをセットアップしました。現在、メニューのフェードイン ロールオーバー状態は CSS3 を使用して設定されています。Jquery を使用してアニメーション効果を複製し、サイトを IE9 で表示できるようにする方法を教えてください。

正直に言うと、このように単純に見えるものに使用する最も単純で最適な Jquery スクリプトについて確信が持てません。これは私が使用しようとしたコードですが、最終的には既存の WordPress テーマと統合するための助けが必要でした. この分野での助けをいただければ幸いです。

var hoverColour = "green";

$(function(){
    $("a.hoverBtn").show("fast", function() {
        $(this).wrap("<div class=\"hoverBtn\">");
        $(this).attr("class", "");
    });

    //display the hover div
    $("div.hoverBtn").show("fast", function() {
        //append the background div
        $(this).append("<div></div>");

        //get link's size
        var wid = $(this).children("a").width();
        var hei = $(this).children("a").height();

        //set div's size
        $(this).width(wid);
        $(this).height(hei);
        $(this).children("div").width(wid);
        $(this).children("div").height(hei);

        //on link hover
        $(this).children("a").hover(function(){
            //store initial link colour
            if ($(this).attr("rel") == "") {
                $(this).attr("rel", $(this).css("color"));
            }
            //fade in the background
            $(this).parent().children("div")
                .stop()
                .css({"display": "none", "opacity": "1"})
                .fadeIn("slow");
            //fade the colour
            $(this) .stop()
                .css({"color": $(this).attr("rel")})
                .animate({"color": hoverColour}, 350);
        },function(){
            //fade out the background
            $(this).parent().children("div")
                .stop()
                .fadeOut("slow");
            //fade the colour
            $(this) .stop()
                .animate({"color": $(this).attr("rel")}, 250);
        });
    });
});

このスクリプトのスタイルは次のとおりです。

.hoverBtn {
    position:       relative;
    float:          left;
    background:     black url(images/navBG.png) repeat-x 0 0 scroll;
}
.hoverBtn a {   
    position:       relative;
    z-index:        2;
    display:        block;
    width:          100px;
    height:         30px;
    line-height:    30px;
    text-align:     center;
    font-size:      1.1em;
    text-decoration:    none;
    color:          blue;
    background:     transparent none repeat-x 0 0 scroll;
}
.hoverBtn div {
    display:        none;
    position:       absolute;
    z-index:        1;
    top:            0px;
    background:     white url(images/navHover.png) repeat-x 0 0 scroll;
    color: black;
}

繰り返しますが、機能するスクリプトなら何でも使用できます。上記のスクリプトは 2009 年に投稿されたものなので、まだ機能するかもしれませんが、最新のものを使用してもかまいません。ありがとう、

4

1 に答える 1

0

WordPressサイトのメニューにこの機能を使用できます。

function home_top_menu()
{
    var currentParent = '';
    var pos = '';
    jQuery("#.menu ul").css({display: "none"}); // Opera Fix
    jQuery(".menu li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
            },function(){
            jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
    jQuery(".menu .sub-menu").hover(function(){
        currentParent = $(this).parent('li').attr('class');
        pos = currentParent.indexOf('current-menu-parent',0);
        $(this).parent('li').addClass('current-menu-parent');
    },function(){
        if(pos == '-1')
        $(this).parent('li').removeClass('current-menu-parent');
    });
    jQuery('#accessMenu ul.menu li a').hover(function(){
        jQuery(this).css('background','none');
        jQuery(this).find('span').css('background','none');                 
    });
}
于 2013-08-24T10:24:18.123 に答える