Question

我想创建一个导航菜单，其功能与此网站上的导航菜单完全相同：http://www.rex-ny.com/

我更愿意只使用HTML和CSS来做，但我整天都在尝试，但找不到解决方案。

当我选择一个菜单项时，我希望该页面在页面加载后保持打开状态。这可能吗？
我还希望主菜单项可以点击，以便加载新页面，当该页面加载时，该菜单已打开。

这是我到目前为止所做的：

这是jquery：

$(document).ready(function () {
    $('#menu > li > a').click(function(){
        if ($(this).attr('class') != 'active'){
            $('#menu li ul').hide();
            $(this).next().toggle();
            $('#menu li a').removeClass('active');
            $(this).addClass('active');
        }
    });
});

和CSS：

#menu {
    float: left;
}
#menu li a {
    display: block;
}
#menu li ul {
    display: none;
}

Answer 1

你可以这样做是纯HTML和CSS。假设你有这样的结构：

- site
  + css
  + js
    index.html
    about.html

您可以在每个页面的正文中添加一个类，index为index.php，about为about.php：

<body class="about">

然后在您的菜单中，为与页面对应的每个项目添加一个id（如果您计划在许多地方使用该菜单，则添加一个类）：

<ul id="menu">
  <li id="index" class="active"><a href="index.html"></li>
  <li id="about"><a href="about.html"></li>
</ul>

最后，使用CSS，您可以专门为每个页面设置菜单项的样式：

.index #index,
.about #about,
#menu .active {
  // styles for active item
}

记住重新加载菜单状态

1 个答案: