0

I want to create a navigation menu with the exact same functionality as the one on this site: http://www.rex-ny.com/

I would prefer to do it only using HTML and CSS, but I tried all day and couldn't find a solution.

  1. When I select a menu item, I want that menu to stay open after the page loads. Is this possible?

  2. I want to also make the Main menu items clickable, so that they load a new page AND when that page loads that menu is open.

Here is what I have so far:

http://jsfiddle.net/MEL9d/

Here is the 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');
        }
    });
});

And CSS:

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

1 回答 1

1

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

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

您可以在每个页面的正文中添加一个类，因此indexforindex.php和aboutfor 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
}
于 2013-08-30T02:27:48.467 回答