0

http://www.gk-films.comの拡張オンホバーメニューのようなものをHTML5/CSS3の方法で複製しようとしています。それらには、ウィンドウの右側に絶対的に配置された小さな要素があり、ホバーすると、オプション付きの全幅メニューに展開されます。

これまで、jQueryとブラウザー固有の遷移効果の両方を試しましたが、確実に機能するソリューションを思い付くことができません。

私の基本的な仕事は今そのようなものです：http： //jsfiddle.net/z64vX/

<nav>
    <ul>
        <li><a href="#main">Main</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>


body { background: #bbb; }
nav { display: block }

nav { 
    position: absolute; 
    top: 0; 
    right: 30%; 
    width: 300px; 
    height: 40px; 
    z-index: 950; 
    background: rgba(255,255,255,0.9); 
    -webkit-transition: left 0.5s ease, right 0.5s ease;
}
nav:hover { 
    right: 0; 
    left: 0; 
    width: auto; 
    height: auto;
}
nav ul { display: none; width: 100%; }
nav:hover ul { display: block; }

問題は、遷移がナビゲーションコンテナの位置と幅に対して適切に機能していないことです（最後の「左」の値にジャンプするだけです）。

理想的には、展開が完了した後にメニュー要素がフェードインするので、その部分も入れれば素晴らしいでしょう。

おそらく、jQueryのanimate関数を介して行う方がよいでしょうが、ここでさまざまなコードバリエーションを使用して混乱を作成したくありませんでした。

少しいじった後、私は実際にjQueryアニメーションでどこかに到達しています：http：//jsfiddle.net/z64vX/6/ 

$(function(){
    var nav = $("nav"),
    navHeight = nav.height();

    nav.hover(
        function() {
            navOn();
        }, function() {
            navOff();
        }
    );

    var navOn = function(){
        nav.stop().animate({right: '0%', width: '100%', height: navHeight}, 1000, function() {
            $(this).find("ul").fadeIn('slow');
        });
    };

    var navOff = function(){
        nav.animate({right: '10%', width: '200px', height: '20px'}, 500).find("ul").fadeOut(100);
    };

    navOff();
});

これを使用するのがどれほど防弾であるかについて何か考えはありますか？または、より良い方法がある場合はどうなりますか？

4

2 に答える 2

0

このjsfiddleはあなたを助けるはずです。

body { background: #bbb; }
nav { display: block }

nav {
    position: absolute;
    top: 0;
    right: 30%;
    width: 30%;
    height: 40px;
    z-index: 950;
    background: rgba(255,255,255,0.9);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    overflow:hidden;
}
nav:hover {

    width: 100%;
    right:0;
    height: 90px;
}
nav ul { display: none; width: 100%; padding:5px;}
nav:hover ul { display: block; }

しかし、あなたは設定することはできませんheight:auto;

于 2012-06-16T06:41:15.503 に答える
0

これを使用できます。

body { background: #bbb;text-align:center; }
nav { display: inline-block; }

nav { 
    top: 0; 
    text-align:left; 
    width: 40%; 
    height: 40px; 
    z-index: 950; 
    background: rgba(255,255,255,0.9); 
    -webkit-transition: width 0.5s ease;
}
nav:hover { 
    width: 100%; 
    height: auto;
}
nav ul { display: none; width: 100%; }
nav:hover ul { display: block; }
​
于 2012-06-15T22:49:20.883 に答える