CODEWITHSUNDEEP
htmlcss
user2387298
user2387298

Reputation: 39

Highlight Active tab in Navigation

Below I am having the menu designed with css, what I could not find out is that when I go to rooms page or fnb page or any other page I want that page's menu to be active in simple words Highlighted. I have tried lots of combinations to make that work, but could not succeed.

Can anyone help me to make it fine?

here is the link for my Cascading style sheet for menu.

Cascading Style sheet

    <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>

Upvotes: 1

Views: 1780

Answers (2)

Sergio
Sergio

Reputation: 28837

Here is an example: jsfiddle.net/Q4Ckm/9/.

Your code in the fiddle has many errors, remove spaces between "" in url names and id's. The html tag in the code you pasted here: <a href="rooms...is not closed, you missed a ".

In the menu item of the page were you are you can add class="active" like I did on the jsfiddle. This has to be done in each page of each menu item.

If you want the same gradient effect add this to the new class:

.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));
}

Let me know if you have problems.

Upvotes: 1

outcoldman
outcoldman

Reputation: 11832

There are a lot of different approaches to achieve this, but in the case like you have: when you have a bunch of html pages and each navigation element has it is own page. You can create style like this:

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;
}

After this on the html pages you can include class for body element, like:

<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>

In this case the style from above will be apply only for this element <li id="rooms"><a href="rooms.html>Rooms</a></li>.

Upvotes: 1

Related Questions