如何在不使用Javascript的情況下在HTML中創建菜單？

由於多年以來，如果您單擊或懸停菜單欄中的條目，GUI標準就是彈出菜單的應用程序菜單欄。據我所知，一些網站也實現了這個功能，但他們正在使用Javascript。由於不同的原因，JavaScript可能是一個問題，所以問題：這是可能實現沒有JavaScript，只使用HTML和CSS？如何在不使用Javascript的情況下在HTML中創建菜單？

來源

2008-10-24 Mnementh

我之前做過類似的事情，它是通過將菜單項放置在錨標記中，並將子菜單放置在隱藏的div內部的這些錨標記中。 CSS技巧是讓內部div在a：hover事件中出現。

它看起來是這樣的：

<style> 
    A DIV { display: none; } 
    A:hover DIV { display: block; } 
</style> 
<a href="blah.htm"> 
    Top Level Menu Text 
    <div><ul> 
     <li><a href="sub1.htm">Sub Item 1</a></li> 
     <li><a href="sub2.htm">Sub Item 2</a></li> 
     <li><a href="sub3.htm">Sub Item 3</a></li> 
    </ul></div> 
</a>

您的里程可能會有所不同...

編輯：Internet Explorer 6中，下不支持：上除了A.在其他元素hover僞類更多的'現代'瀏覽器，它被接受能夠使用LI，TD，DIV，SPAN和大多數標籤中的這個技巧。

來源

2008-10-24 12:21:32

非常感謝您提供的幫助，甚至提到了IE6。當我使用Linux時，我甚至不會測試IE6。或者我應該故意爲了IE6而破壞網站，讓人們有動力切換到現代瀏覽器？ ;-) – Mnementh 2008-10-24 15:21:18

您可以使用僞類：懸停來獲得懸停效果。

a:link { 
color: blue; 
} 

a:hover { 
    color: red; 
}

我可以給一個更廣泛的例子，但不是現在（需要讓孩子去看牙醫）。

來源

2008-10-24 12:20:13

等待......讓我直接說出這個故事。你有一個兒童牙醫任命即將進行，十月下旬秋季寒冷的孩子們，並與手中的鑰匙，決定「等等，我更好地檢查堆棧溢出之前，我們去...可能有一個CSS問題，我可以回答！」這讓我感到有趣... – 2008-10-24 13:45:51

@Yadyn：我知道，這很荒謬。 ......把孩子送出去而沒有外套讓他們變硬的......發生了什麼？ – Shog9 2008-10-24 14:36:35

看看CSS Menu Maker。

來源

2008-10-24 12:22:42 extraneon

最着名的技術是suckerfish menus。搜索這將導致很多有趣的菜單。它只需要IE6以下的javascript。

Here's a list of the sons of the suckerfish menus.

來源

2008-10-24 12:29:57

考慮使用CSS方法爲JavaScript時不可用的備份。 JavaScript可以爲下拉菜單提供更好的用戶體驗，因爲您可以添加一些延遲因素，以在鼠標暫時離開其懸停區域時立即消失。純CSS菜單有時可能有點挑剔，特別是如果懸停目標很小。

*：當然，並不是所有的菜單腳本實際上是不屑做這種...

來源

2008-10-24 13:25:06 bobince

還有Eric Meyer的上pure CSS menus原創文章。

這裏肯定會有更強大和更現代的東西，現在被別人提到，但我想我會提到它的後代。 :)

來源

2008-10-24 13:41:55

如何在不使用Javascript的情況下在HTML中創建菜單？

回答

相關問題