Question

我试图复制像http://www.gk-films.com上的扩展onhover菜单，但是以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();
});

有关如何使用防弹的任何想法？或者，如果有更好的方法？

Answer 1

你可以使用它。

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; }

Answer 2

This 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;

悬停时的CSS元素转换

2 个答案: