CSS based submenu, selected item to be highlighted

HTML & CSS
1

Greetings all,
I’m stuck while coding a website and hoping someone can help me out. Thanks in advance.
Please take a look at the image

captured from http://www.ilogistixs.com/phoenix-arizona-interactive-marketing.aspx

I would like to have same kind of effect for the submenu items ie When a menu item is selected(clicked) it should be highlighted.

Now the catch is, for my website when a item of submenu is clicked the main url at address bar will not change. anchor links will be placed within the content of the same page. As a click on item should bring up the content as well as highlight the item.

for example: url bar may look like this. http://abc.com/aboutus.html#mission

I have attached a basic framework of HTML and CSS (test.zip)to demonastrate how my webpage will be.

If it can be done in HTML/CSS will be great. Not much aware of PHP or ASPX.
However if it cannot be done trough purely HTML & CSS, I will really appreciate if some one can provide the other solution.

Thanks

2

You should use javascript to add a class to the clicked link, and remove that class from all other links.

Using jQuery, assuming all sub menu links have a class submenu, it would be


$(".submenu").click( function() {
  $(".submenu").removeClass("submenuActive");
  $(this).addClass("submenuActive");
});
3

Thank you ScallioXTX.

I understand your logic, however I’m not much familiar with JavaScript/jquery. Tried to implement the idea however not been able to get the result. It would be very kind to have a look at the files again i have attached. i must be be doing some silly mistake which I’m unable to determine. Thanks for your help.

Best Regards,

4

Please have a look at the attached files. done as per the reply i received. But still can’t see the item is highlighted when it is clicked. Must be some silly mistake at my side. However I’m not able to figure out. Thank you for your help.

Regards

PS: i figured that last zip attached is wrong(dont know if i can delete that)

5

This is prob better done with jquery as previously showed. But if you can’t figure that out here is a nice old school js method.

6

Thanks you EricWatson, you saved my life .The Old type Js looks simple, easy to execute and working.

As a learner just curious to know what is wrong with the code for jquery one.

Thank you all for your valuable time.

Regards

7

Nothing wrong with it, it’s just that the jQuery library is 24KB, which is kind of overkill if you’re only going to use it for menu highlighting.
Using plain ol’ javascript is better for that.
So, purely for the sake of bandwith usage I’d say.

8

Thanks. please correct my understanding if wrong, as the code size is so less it is unable to execute?

Regards

9

Oh no the code will execute alright.
All I’m saying is that using jQuery to highlight the menu is like using a tank to shoot a bug. You could do it, but it’s really overkill.

10

The jquery one wasn’t working because you omitted the link to the jquery library in your html. :slight_smile:


[B]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>[/B]
<script type="text/javascript">
$(document).ready(function() {
  $(".buttons a").click(function() {
    $(".buttons a").removeClass("selected");
    $(this).addClass("selected"); 
  });
});

</script>

You were also styling only :link which mean that :visited wouldn’t get styled.

Just use a.selected.


[B]a.selected[/B] {
    color:#000;
    text-decoration: none;
    background:#ff0000;
}

Anchors aren’t self closing and you need to to do it like so:


<a name="tier1"></a>

However you would be better of removing the named anchors and using an id on the headings instead for the same effect.
e.g.


<h4 [B]id="tier2"[/B]>Tier 2</h4>

The jquery method avoids having onclick attributes in your html as it handles this unobtrusively and keeps the html clean although as mentioned it is rather overkill for that one small job.

11

That doesn’t work correctly in some older versions of IE. To make sure it works correctly in all browser you need to use


a.selected, a.selected:link, a.selected:active, a.selected:visited, a.selected:hover {
    color:#000;
    text-decoration: none;
    background:#ff0000;
}
12

Only needed if you have previously defined the pseudo link classes and there are conflicts to resolve.

In the original code there was no conflict and would work fine in Ie6 upwards.


a:link, a:visited {
    color:#000;
}
a.selected {
    color:#000;
    text-decoration: none;
    background:#ff0000;
}

The color is the same and background was not defined previously so there will be no conflict and it will work fine :slight_smile:

However you are right to be careful as IE6 does give more weight to the pseudo classes than it should.

13

Also this is one of those cases where I might be tempted to use !important instead.

e.g.


a.selected {
    color:#000[B]!important[/B];
    text-decoration: none;
   [B] background:#ff0000!important;[/B]
}

Rather than using all this:


[B]a.selected, a.selected:link, a.selected:active, a.selected:visited, a.selected:hover [/B]{
 etc..

However !important needs to be used with great care as it can cause more problems than it solves.

14

[QUOTE=Paul O’B;4581207]The jquery one wasn’t working because you omitted the link to the jquery library in your html. :slight_smile:

Oh no. That was very silly of me. I din’t realize i missed the important link.

Thank you.

It’s working good now. Thank you all for your valuable time.

15

Glad that you have something working now but I have to ask if you are going about this the best way.:slight_smile:

It’s not generally a good idea to have your whole site as one page for many reasons. If you are just flipping through a few short sentences then a hide and show effect is ok but if you are displaying a page of content each time then you would be better off with a proper site and call up a different page each time and avoid the need for any JS at all.

This would improve accessibility and also aid seo at the same time. Having a one page site is akin to using “Frames” and we all know what happened to them :slight_smile:

I may have got the wrong impression from the short amount of code you posted but I thought (was prompted) that I should say something.

Also in the code you posted there was not a correct page structure and no doctype etc but I guess that wasn’t the full code - just a snippet. Make sure you use all the html elements that you are supposed to including the doctype or you will run into problems with IE.:wink:

16

Thank you Paul O’B;4582004 for pointing this out. I shouldn’t have said “Website” rather appropriate might be a html 'Page". Yes you are right, this will be for a page for the website, there will be few paragraph of content. A click on left side will get the right paragraph up for the user.

Yes, I do have doctype in the actual page. I thought just to create prototype snippet rather that pasting the entire actual code.

It’s great to get this kind of feedbacks.

Have a Happy Weekend.

17

Thank you for putting that WAY more politely than I was likely going to.