用Javascript实现水平子菜单

我正在寻找一些我可以用来在Javascript（而不是JQuery）中实现水平子菜单的例子。我想要一个菜单，将搜索引擎优化友好。下面是我所期待的一个例子：用Javascript实现水平子菜单

opt1  opt2  opt3  opt4 
opt1a opt1b opt1c opt1d 

opt1  opt2  opt3  opt4 
    opt2a opt2b opt2c opt2d

因此，当用户在顶级悬停在OPT1那么opt1a，opt1b，opt1c和opt1d选择出现在它下面的二级菜单上。当用户将鼠标悬停在顶层的opt2上时，则会显示在SECOND级别上的opt2a，opt2b，opt2c和opt2d选项。

有没有人看过这个代码示例？我想到的是为二级菜单设置四个不同的DIV，然后在用户将鼠标悬停在不同的顶层时可以使这些DIV可见。这听起来很容易，但我猜这不是那么容易。

来源

2011-09-02 Susan

制作具有最小跨浏览器麻烦的水平菜单的一种好方法是使用以下模式。关键是要对<LI>的内部进行设计，而不是<LI>本身。

<div class="menu"> 
<ul> 
    <li>SOME TITLE</li> 
    <li><a href="...">link1</a></li> 
    <li><a href="...">2</a></li> 
    <li><input type="text" .../></li> 
    <li><input type="submit" class="submit" value="Submit"></li> 
</ul> 
</div>

CSS：

.menu ul, .menu li { 
    list-style=type:none; 
    padding:0; 
    margin:0  
} 


.menu li { 
    display:inline-block 
} 

.menu a { 
    display:block; 
    ....other styles.... 

}

然后你窝他们：在UL李，相对位置：在UL UL等绝对

<div class="menu"> 
<ul> 
    <li>SOME TITLE</li> 
    <li><a href="...">link1</a> 
     <ul><li><a href="...">sub1</a></li></ul></li> 
    <li><a href="...">2</a></li> 
    <li><input type="text" .../></li> 
    <li><input type="submit" class="submit" value="Submit"></li> 
</ul> 
</div>

你是对的，然后使用位置..你在正确的轨道上，但使用列表，而不是DIV。

来源

2011-09-02 02:54:09

谢谢，但这是如何解决我想要出现在顶层以下的第二层？我需要一个只有两个级别的菜单。可能是顶部的10个项目，每个顶部项目可能在第二个层次上有一个或多个项目。 – Susan

这不就是第二个菜单吗？我不确定我明白。 –

这是一个子菜单。底部项目的选择取决于我在顶部选择的项目。 – Susan

<html> 
    <head> 
     <style type="text/css"> 


      #menu, #menu li ul{ 
       display:inline; 
       list-style:none; 
       margin:0px; 
       padding:0px; 
       background-color:black; 
       color:white; 
       padding:5px; 

      } 

      #menu li ul { 
       position: absolute; 
       background-color:black; 
       color:white; 
       padding:5px; 
       display:none; 

      } 
      #menu li, #menu li ul li { 

       display:inline; 
       list-style:none; 
       margin:0px; 
       padding:0px; 
      } 


      #menu li:hover { 
       background-color:red; 
      } 
      #menu li:hover ul { 
       display:block; 
      } 

     </style> 
    </head> 
    <body> 
     <ul id="menu" > 
      <li>Menu 1 
       <ul> 
        <li> 
         Hello world 
        </li> 
        <li> 
         Hello world 
        </li> 
        <li> 
         Hello world 
        </li> 
       </ul> 
      </li> 
      <li>Menu 2 
       <ul> 
        <li> 
         Hello world 
        </li> 
        <li> 
         Hello world 
        </li> 
        <li> 
         Hello world 
        </li> 
       </ul> 
      </li> 
      <li>Menu 3</li> 
      <li>Menu 4</li> 
     </ul> 
    </body> 

</html>

此代码可能与上面相同，但第二个级别低于顶级。希望这个帮助！

来源

2011-09-02 03:36:39 user555742

用Javascript实现水平子菜单

回答

相关问题