固定菜单和徽标固定在屏幕顶部答案

【问题标题】：Fixing menu and logo fixed at top of the screen固定菜单和徽标固定在屏幕顶部
【发布时间】：2013-05-27 20:30:51
【问题描述】：

我正在尝试获取一个徽标和一个菜单栏，它们将在内容分页上固定在屏幕顶部，然后在鼠标悬停时您会得到一个简短的水平菜单，其中一个上还有一个下拉子菜单项目。

我正在尝试使用这样的一些 JavaScript，但发现它不适用于超过一定宽度的页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<style type="text/css">
<!--
  /* set the menu style */
   #menu1 {position: absolute;left:0px;;width: 745px;}
  .menuHead { font-weight: bold; font-size: larger;  background-color: #A9A9A9;height:40px;padding-top:10px; text-align:center;
   background-image: -webkit-linear-gradient(left, #b4872a, #ffe792, #b4872a); 
   background-image: -moz-linear-gradient(left, #b4872a, #ffe792, #b4872a); 
   background-image: -ms-linear-gradient(left, #b4872a, #ffe792, #b4872a); 
   background-image: -o-linear-gradient(left, #b4872a, #ffe792, #b4872a);}
  .menuChoices { background-color: #000; /*opacity:0.4;filter:alpha(opacity=40);*/height:70px;padding-top:35px;}
  .menu a {color: #e3c96b; text-decoration: none;margin:0px 25px;}
  .menu a:hover {text-decoration: underline;} 
  /* position your menus */
-->
</style>
<script type="text/javascript">
<!--
/* we'll only allow DOM browsers to simplify things*/
(document.getElementById ? DOMCapable = true : DOMCapable = false);
function hide(menuName)
{
 if (DOMCapable)
  {
    var theMenu = document.getElementById(menuName+"choices");
    theMenu.style.visibility = 'hidden';
  }
}
function show(menuName)
{
 if (DOMCapable)
  {
    var theMenu = document.getElementById(menuName+"choices");
    theMenu.style.visibility = 'visible';
  }
}
//-->

</script>
</head>
<body>
<div id="menu1" class="menu" onmouseover="show('menu1');" onmouseout="hide('menu1');">
   <div class="menuHead">M E N U</div>
      <div id="menu1choices" class="menuChoices">
        <a href="http://www.google.com">menu1</a>
        <a href="http://www.yahoo.com">menu2</a>
        <a href="http://www.teoma.com">menu3</a>
        <a href="http://www.msn.com">menu4</a>
        <a href="http://www.altavista.com">Country Selector</a>
      </div>
</div>
<script type="text/javascript">
<!--
/* Don't hide menus for JS off and older browsers */
if (DOMCapable)
 {
  hide("menu1");
 }
//-->
</script>
</body>
</html>

所以想试试<ul><li>，看看我能不能用它来代替它。

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以探索开源替代方案，例如 Twitter Bootstrap，而不是从头开始编写 Javascript。你甚至可以试试JQuery UI。这些是可以满足您要求的一些快速替代方案。

您可以参考他们的源代码以更好地理解。我在 Twitter Bootstrap 中看到了您所指的完全相同的功能。那就试试吧。

【讨论】：

哦，太棒了，我去看看，谢谢。我正在将它用于 Joomla，并且我知道 Bootstrap 以某种方式集成。干杯。