用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實現水平子菜單

回答

相關問題