1

下面我有用css设计的菜单，我找不到的是，当我进入房间页面或fnb页面或任何其他页面时，我希望该页面的菜单以简单的单词突出显示。我已经尝试了很多组合来完成这项工作，但未能成功。

谁能帮我把它弄好？

这是我的菜单级联样式表的链接。

层叠样式表

    <nav class="clearfix">
        <ul id="left" class="fancyNav">
            <li id="fnb"><a href="fnb.html">Eat &amp; Drink</a></li>
            <li id="rooms"><a href="rooms.html>Rooms</a></li>
            <li id="activities"><a href="activity.html">Activities</a></li>
            <li id="spa"><a href="spa.html">Spa</a></li>
        </ul>
            <div id="logo">
                <a href="home.html"><img src="fnb/assets/img/home.png" alt="logo" /></a>
            </div>
        <ul id="right" class="fancyNav">
            <li id="booking"><a href="booking.html">Booking</a></li>
            <li id="home"><a href="home.html">Home</a></li>
            <li id="boats"><a href="boats.html">Boats</a></li>
            <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>

    </nav>
4

2 回答 2

1

这是一个示例：jsfiddle.net/Q4Ckm/9/。

您在小提琴中的代码有很多错误，请删除""url 名称和 id 之间的空格。您在此处粘贴的代码中的 html 标记：<a href="rooms...未关闭，您错过了".

在页面的菜单项中，您可以class="active"像我在 jsfiddle 上所做的那样添加。这必须在每个菜单项的每一页中完成。

如果您想要相同的渐变效果，请将其添加到新类中：

.active {
background-color: -webkit-gradient(linear, left top, left bottom, from(#fefefe), color-stop(0.5, #f0f0f0), color-stop(0.51, #e6e6e6));
background-image:-webkit-gradient(linear, left top, right top, from(rgba(168, 168, 168, 0.5)), color-stop(0.5, rgba(168, 168, 168, 0)), to(rgba(168, 168, 168, 0.5)));
background-image:-moz-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
background-image:-o-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
background-image:-ms-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
background-image:linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
}

如果您有问题，请告诉我。

于 2013-06-02T22:21:53.593 回答
1

有很多不同的方法可以实现这一点，但在你所拥有的情况下：当你有一堆 html 页面并且每个导航元素都有它自己的页面时。您可以像这样创建样式：

body.fnb #fnb, body.rooms #rooms, body.activities #activities, body.spa #spa
 /* ... include all other navigation/pages in the same way */ {
   /* Add special css style for active items */
   color: white;
}

在 html 页面上之后，您可以包含 body 元素的类，例如：

<body class="fnb">
   <nav class="clearfix">
        <ul id="left" class="fancyNav">
            <li id="fnb"><a href="fnb.html">Eat &amp; Drink</a></li>
            <li id="rooms"><a href="rooms.html>Rooms</a></li>
            <li id="activities"><a href="activity.html">Activities</a></li>
            <li id="spa"><a href="spa.html">Spa</a></li>
        </ul>
            <div id="logo">
                <a href="home.html"><img src="fnb/assets/img/home.png" alt="logo" /></a>
            </div>
        <ul id="right" class="fancyNav">
            <li id="booking"><a href="booking.html">Booking</a></li>
            <li id="home"><a href="home.html">Home</a></li>
            <li id="boats"><a href="boats.html">Boats</a></li>
            <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>

    </nav>
</body>

在这种情况下，上面的样式将仅适用于该元素<li id="rooms"><a href="rooms.html>Rooms</a></li>。

于 2013-06-02T22:29:50.890 回答