Html 如何创建滚动或静态侧边栏菜单
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7180188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a scrolling or static sidebar menu
提问by Kevin
I am looking for programming help on how to do a sidebar menu like the one shown at this URL:
我正在寻找有关如何制作侧边栏菜单的编程帮助,例如此 URL 所示的菜单:
I would like my sidebar to function just like the sidebar on the website, with my own look and feel applied to it. I would like the sidebar to scroll with the page fixed at its own location just as it functions on Nettuts
website. How would I program this?
我希望我的侧边栏的功能就像网站上的侧边栏一样,并应用我自己的外观和感觉。我希望侧边栏随着页面固定在其自己的位置滚动,就像它在Nettuts
网站上的功能一样。我将如何编程?
回答by vascowhite
It is a div
with the css statement position: fixed;
in the css class declaration.
它是在 css 类声明中div
带有 css 语句position: fixed;
的。
Give any div in your html this CSS styling and you should see it working.
给你的 html 中的任何 div 这个 CSS 样式,你应该看到它工作。
position: fixed;
height: 132px;
left: 0;
top: 185px;
width: 24px;
回答by Kevin B
that side bar is nothing more than a div with a fixed position.
那个侧边栏只不过是一个固定位置的div。
<style>
.sidebar {
width: 45px;
height: 90px;
position: fixed;
left: 0px;
top: 300px;
border: 1px solid black;
}
</style>
<div class='sidebar'>I'm a sidebar</div>
At that point you add elements to the sidebar with whatever functionality you want.
那时,您可以使用您想要的任何功能将元素添加到侧边栏。
回答by Vidhi
Create a style class like..
创建一个样式类,如..
.class{
overflow:auto;
height:100%;
width:354px;
top:185px;
}