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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:14:27  来源:igfitidea点击:

How to create a scrolling or static sidebar menu

htmlcsssidebar

提问by Kevin

I am looking for programming help on how to do a sidebar menu like the one shown at this URL:

我正在寻找有关如何制作侧边栏菜单的编程帮助,例如此 URL 所示的菜单:

Nettuts Website Link

Nettuts 网站链接

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 Nettutswebsite. How would I program this?

我希望我的侧边栏的功能就像网站上的侧边栏一样,并应用我自己的外观和感觉。我希望侧边栏随着页面固定在其自己的位置滚动,就像它在Nettuts网站上的功能一样。我将如何编程?

回答by vascowhite

It is a divwith 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>

http://jsfiddle.net/p8dFM/

http://jsfiddle.net/p8dFM/

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;
}