Question

我想在我的网站上放置一个稳定的菜单。在网站中，即使我们向下移动页面，我也希望始终在顶部显示菜单。

示例：iplex.co.in ...请访问此网站进行演示。

Answer 1

您可以将<div>与positions : fixed放在样本

中来实现

#navigationMenu {
position: fixed;
margin-left: 1086px;
z-index: 10000;
}

Answer 2

您应该使用position: fixed以便在页面中修复一些元素。

HTML：

<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>

CSS：

#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

有关具体用途，请查看此页：http://www.w3.org/Style/Examples/007/menus.en.html

Answer 3

使用position:fixed，您可以设置元素相对于浏览器窗口的位置。

<强> HTML：

<div id="main">
<div id="menu">
    <ul>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
        <li><a href="#">Menu4</a></li>
    </ul>
</div>
</div>

<强> CSS：

#main
{
height:1200px;
width:auto;
border:1px solid Red;   
}

#menu
{
height:50px;
width:auto;
background-color:#DDD;
position:fixed;
top:20px;
left:60px;
}



#menu ul li
{
display:inline;
float:left;
margin:5px 10px;

}

<强> See working sample

Answer 4

在菜单position:fixed;中使用id属性。

如何获得稳定的菜单？

4 个答案: