css - 在悬停时显示新内容或单击

我希望我的<nav>菜单在页面上显示新内容。例如，我的菜单在页面中心下方，该页面包含一个大的.png设计。我希望当您单击链接时，它不会加载其他页面，但会在页面上显示新内容并带有基本动画。就像单击链接一样，将新内容从<nav>中拉出。

仅使用HTML5和CSS可以做到这一点吗？

最佳答案

使用jQuery钩住导航链接的click事件将非常容易。因此，如果您有：

<a id="navigationLink1" > Some Navigation Item </a>

您可以像这样链接一个点击处理程序：

$(document).ready(function() {
    var linkClickHandler = function() {
        // your code with the animation and etc
    };

    $('#navigationLink1').hover(linkClickHandler);
    $('#navigationLink1').click(linkClickHandler);
});