0

我正在尝试制作一个拉出式导航，用户将鼠标悬停在“菜单”手柄上并拉出。我从顶部成功地这样做了，但我希望盒子水平堆叠并从左侧来，向右移动。

这是我的代码： 

<!DOCTYPE html>
<html>
    <head>
        <style>

            nav {
                position:absolute;
                top:-190px;
            }

            .menu:hover {
                -webkit-transform:translate(0px,190px);
                -moz-transform:translate(0px,190px);
                -o-transform:translate(0px,190px);
                -ms-transform:translate(0px,190px);
                transform:translate(0px,190px);
                -webkit-transition:ease-in-out;
                -moz-transition:ease-in-out;
                -o-transition:ease-in-out;
                -ms-transition:ease-in-out;
                transition:ease-in-out;
                -webkit-transition-duration: .5s;
                -moz-transition-duration: .5s;
                -o-transition-duration: .5s;
                -ms-transition-duration: .5s;
                transition-duration: .5s;
            }

            div {
                width:40px;
                height:40px;
                background-color:#999999;
                border:black solid 2px;
                padding:2px;
                font-family:Helvetica;
                font-size:.8em;
                color:white;
                text-align:center;
                margin:1px;
            }

            .handle {
                border-radius:0px 0px 10px 10px;
            }

            div:hover {
                background-color:#009999;
                border:black solid 2px;
                -webkit-transform: translateX(10px);
                -moz-transform: translateX(10px);
                -o-transform: translateX(10px);
                -ms-transform: translateX(10px);
                tranform: translateX(10px);
            }

            div:active {
                background-color:#006699;
                border:black solid 2px;
                -webkit-transform: translateX(-10px);
                -moz-transform: translateX(-10px);
                -o-transform: translateX(-10px);
                -ms-transform: translateX(-10px);
                tranform: translateX(-10px);
            }

        </style>
    </head>

    <body>
        <nav class="menu">
            <a href"http://www.lvc.edu/" target="_new"><div> <p>Link 1</p></div></a>
            <a href"http://www.lvc.edu/" target="_new"><div> <p>Link 2</p></div></a>
            <a href"http://www.lvc.edu/" target="_new"><div> <p>Link 3</p></div></a>
            <a href"http://www.lvc.edu/" target="_new"><div> <p>Link 4</p></div></a>
            <div class="handle"><p>Menu</p></div>
        </nav>
    </body>
</html>

我的主要问题不是实际的动画（我很确定我知道如何弄清楚），而更多的是盒子的位置以及我希望它们是水平的而不是堆叠的。

很抱歉，如果这很混乱，希望你们能理解！

4

1 回答 1

1

要获得水平菜单，请遵循网络上的无数教程之一，例如这个：

http://jamesowers.co.uk/css-tutorials/50/horizo​​ntal-css-list-menu/

（习惯上使用无序列表来替代菜单）

要使其从左侧滑入，您必须将起始位置偏移更改为左侧：

nav { position:absolute; left: [negative number corresponding to the width of the menu];}

对于滑动：

.menu:hover {
    ...
    transform:translate([width of menu],0);
    ...
}

请注意：Internet Explorer 8 及更早版本不支持 css 转换，这意味着菜单将无法访问（不包括在 Windows XP 下仍在使用 IE 的所有人）。也许您可以考虑改用 JavaScript/jQuery？

于 2013-04-08T23:55:36.187 回答