Question

在搜索Jquery / CSS菜单时，我遇到了这个网站：

http://www.freshdesignweb.com/css-drop-down-navigation-menu.html

如果你看第一张照片有一个倾斜的菜单，就像它悬挂在铰链上一样，看起来非常棒，所以我点击了那个链接去了网站但我找不到任何地方那个倾斜的菜单，不在网站上，不在演示中:(

虽然我觉得有人会非常恼火，但是我想知道是否真的可以使用CSS制作那种倾斜的菜单？＆＃34;

Answer 1

当然可能，虽然我认为这将是糟糕的用户体验

编辑 - 您甚至可以将子菜单向后旋转 - JSfiddle

＆＃13;

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul {
    margin: 25px 0 0  25px;
    padding: 0;
    width:250px;
    border:1px solid grey;
    list-style:none;
        
    transform:rotate(-35deg);
    transform-origin:top  right;
}

li {
    margin-bottom: 5px;
    padding:0.25em
}

＆＃13;

<nav>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Filve</li>
    </ul>
</nav>

＆＃13;

Answer 2

您可以随时尝试使用CSS transform。查看我创建的以下JSFiddle。

HTML

<div class="slanted">
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</div>

CSS

.slanted {
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
    margin-top: 40px;
}

CSS倾斜的菜单

2 个答案: