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 animate：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 回答