views:

44

answers:

4

For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.

I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.

My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?

A: 

You could use Javascript within the skin.

We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.

Google does though :)

Jammin
A: 

I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.

Marcos Buarque
+1  A: 

My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want

As for where to place the markup there are a few places

  1. You can do it directly in the skin files (not suggested since you may have to edit a few files)
  2. in the skin .css files (much better place to do it and more maintainable and portable)
  3. in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)

Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons

codemypantsoff
I don't have any problem with changing current css. My issue is, for instance, Menu items 1, 2, 3 and 4 will use.mainMenu .root{background-color:Blue;}Menu items 5, 6, 7, 8 will use.mainMenu2 .root{background-color:Yellow;}How do I tell menu 5-8 to use .mainMenu2?I hope this also answers your first question of, "what menu are you implementing", not sure I understood that correctly.
Idealflip
Sorry didnt get back to you sooner --- yes the id tags are where you can do that at least in SolPart
codemypantsoff
A: 

Solved it, not as dynamic as I'd like, but it works.

The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.

Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!

Idealflip