Question

我使用下面的代码制作了一个应该始终坚持左侧的菜单。

.menu {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    background-color: rgb(223, 223, 223);
    border-right: 1px solid rgb(200, 200, 200); 
}

现在我希望我的文字出现在菜单旁边。

还有一个问题的方法。 http://jsfiddle.net/7cpz80er/

Answer 1

与@Cayce K一样，您可以在内容上使用padding全宽。对于移动设备，您始终可以隐藏左侧的导航栏，并添加一个按钮以将其打开。

快速Mocup：JS Fiddle

调整窗口大小，您将看到效果。

#open {
    display: none;
    position: fixed;
    top: 0;
    right: 50px;
}
.test {
    padding-left: 220px;
    left: 0;
    right: 0;
    position: relative;
    height: 3000px;
}
@media only screen and (max-width: 30em) {
    .menu-wrapper {
        display: none;
    }
    .test {
        padding-left: 0;
    }
    #open {
        display: block;
    }
}
.showButton {
    display: block;
}

打开菜单按钮的JQuery示例：

$('#open').click(function () {
    $('.menu-wrapper').toggleClass('showButton');
});

位置固定 - 下一步是什么？

1 个答案: