是否有可能使這個導航工作只在CSS和刪除jQuery的？

這裏的一幫人在幫助我順利地下載這個導航系統的子類別3時非常有幫助，但是在看完它之後，我很好奇我是否可以只使用css來獲取相同的效果並刪除所有的jquery。它將使用的網站是用純CSS製作的，這是jquery的唯一需求，所以我想看看是否可以完全消除這種需求。這是小提琴頁。我認爲如果使用緩動功能，但不知道如何修改。此外，使用「角色」的HTML不會驗證，因爲我的網站不是HTML5。是否有可能使這個導航工作只在CSS和刪除jQuery的？

<div id="trigger"><a href="#menu" class="menu-link">Menu</a></div> 
</div> 
<nav id="menu" role="navigation"> 
<ul> 
<li><a href="#">Category 1</a></li> 
<li><a href="#">Category 2</a></li> 
<li id="Category3"><a href="#">Category 3</a> 
    <ul id="extraOptions"> 
     <li><a href="#">Extra Option 1</a></li> 
     <li><a href="#">Extra Option 2</a></li> 
     <li><a href="#">Extra Option 3</a></li> 
    </ul></li> 
<li><a href="#">Category 4</a></li> 
<li><a href="#">Category 5</a></li> 
<li><a href="#">Category 6</a></li> 
</ul> 
</nav>

查閱FIDDLE FILE

http://jsfiddle.net/ApNhK/1/

來源

2013-01-08 DC1

你的問題，就其本身而言，是真的特定於你。嘗試並在你的問題中封裝一般的想法，這樣對其他用戶可能會有用。 – OneChillDude

感謝您的反饋。將來生病時會採取這種方法。我可以以不同的方式表達這個問題 – DC1

這是可能的，或多或少。您需要願意放棄點擊事件來支持懸停事件。這需要一些工作，而且不太可能有人爲你提供完整的解決方案。嘗試通過使用'：hover'僞類來編寫一些新的CSS來實現它。如果遇到特定問題，請回過頭來提出一個新問題。 –

我不認爲你可以在CSS模擬onclick()。如果它是:hover這是可能的，爲什麼不呢？

編輯：我覺得跟:focus它可能工作，我會檢查出來，堅持

EDIT2：我想這是不可能的。你可以讓:focus使它看起來像一個點擊，但它是非常有限的，你不能使用沒有JavaScript的:focus複雜的嵌套子菜單。

來源

2013-01-08 15:00:52

你可以使用目標僞類或：檢查輸入，但並不顯着支持所有瀏覽器（即低於9） – Loris

是的，懸停與純CSS的菜單是可能的，但可點擊可能不是。至於：重點，是不是隻爲輸入元素？ – Trax72

謝謝。任何非jQuery解決方案都會很棒。 – DC1

對不起，點擊處理程序需要JS，我不認爲它圍繞它。

即使是「onclick」html屬性，也只是將JavaScript內聯的懶惰方式。

您可以有一個懸停菜單，用戶需要懸停才能看到頁面，但那不是很好的用戶體驗。我會保持jquery。我認爲它看起來不錯，和jQuery是一個偉大的圖書館，以熟悉

來源

2013-01-08 15:02:28 OneChillDude

以便我理解正確，爲了點擊一個鏈接來激活像這樣的平滑下拉菜單，jquery是必須的正確的？ – DC1

JavaScript是必須的，jQuery是一種方便。但是，是的，你會想使用jQuery。 – OneChillDude

製作菜單（DIS）出現在一個點擊可以:target做到：jsFiddle

製作一個個子菜單行爲像你如果可以完成的話，想要需要巧妙地使用相鄰/兄弟/後代選擇器。

來源

2013-01-08 22:40:45 woestijnrog

是否有可能使這個導航工作只在CSS和刪除jQuery的？

回答

相關問題