Using different colours for different menu items

(Steve Scamp) #1

Hi,


Sorry if this has already been covered on the forums somewhere - I've been unable to dig anything up.



For one of our sites we're looking at a primary navigation menu of about 8 or 9 text links. What we'd like to do is style these links, so some of them have blue backgrounds, a couple of them purple, another one green and another one white. All in the same menu, preferably, for ease of maintenance.



So far I've been unable to find anything in the Designs manual to cover this sort of thing. So I was wondering, is it possible to use a keyword within the menu's Design Area code somehow to bring in the contents of a metadata field associated with the pages being linked to? Then we could use a variety of class names as the content of the metadata field, and print that into the menu code to style each link appropriately.



Am I being overly complicated in my approach here? Or is there perhaps some other, better or easier way of doing this that I haven't thought of or have completely missed?



Thanks for any advice, folks. We're using MySource Matrix 3.22.



Steve

(Ryan Callaghan) #2

Hey Dude,


There is a XHTML fix you can use, its very fun :stuck_out_tongue: for example.



<ul>



<li class="red"> <a href="#">Menu Item 1</a> </li>

<li class="blue"> <a href="#">Menu Item 2</a> </li>

<li class="orange"> <a href="#">Menu Item 3</a> </li>

<li class="pink"> <a href="#">Menu Item 4</a> </li>

<li class="black"> <a href="#">Menu Item 5</a> </li>

<li class="red"> <a href="#">Menu Item 6</a> </li>

<li class="yellow"> <a href="#">Menu Item 7</a> </li>

<li class="blue"> <a href="#">Menu Item 8</a> </li>

<li class="orange"> <a href="#">Menu Item 9</a> </li>



</ul>



and then you can add some css styles for the colours you want, I'm not sure if you'll actually use 9, I'll do 5 for you copy paste this into your css file if you want/decide to do it this way.



#menu ul li.red {background-color:red;}

#menu ul li.blue{background-color:blue;}

#menu ul li.orange{background-color:orange;}

#menu ul li.pink{background-color:pink;}

#menu ul li.yellow{background-color:yellow;}



Then if you want, you can change the text-decoroation/font colour that you want too use.


[quote]

Hi,



Sorry if this has already been covered on the forums somewhere - I've been unable to dig anything up.



For one of our sites we're looking at a primary navigation menu of about 8 or 9 text links. What we'd like to do is style these links, so some of them have blue backgrounds, a couple of them purple, another one green and another one white. All in the same menu, preferably, for ease of maintenance.



So far I've been unable to find anything in the Designs manual to cover this sort of thing. So I was wondering, is it possible to use a keyword within the menu's Design Area code somehow to bring in the contents of a metadata field associated with the pages being linked to? Then we could use a variety of class names as the content of the metadata field, and print that into the menu code to style each link appropriately.



Am I being overly complicated in my approach here? Or is there perhaps some other, better or easier way of doing this that I haven't thought of or have completely missed?



Thanks for any advice, folks. We're using MySource Matrix 3.22.



Steve

[/quote]

(Ryan Callaghan) #3

If you want to hard code the navigation in use the above code.


Not sure if you can edit it in the parse file, which is what you MIGHT be after.



Ill ask around at work tomorrow.



/cant find the edit button.

(Nic Hubbard) #4

You can give each nav item its own unique ID if you would like. This is what I have done at PUC which does really help if I need to target specific nav items.
(Dave Letorey) #5

You can as you originally thought do something with metadata.
Set up an select field that allows you to choose the class/colour for each item in the menu

then in the Parse file:
  • ">" class="" href="">


    • You would of course need to make sure that the metadata was always filled in to get the colour so think about setting the default to the most common colour you use
    (Steve Scamp) #6

    [quote]
    You can as you originally thought do something with metadata.

    Set up an select field that allows you to choose the class/colour for each item in the menu

    then in the Parse file:
  • ">" class="" href="">


    • You would of course need to make sure that the metadata was always filled in to get the colour so think about setting the default to the most common colour you use
    [/quote]

    Hi Dave,

    Thanks to Nic and Ryan for their suggestions, but in this case it's Dave's advice that's exactly what I was looking for and hoping to hear. I had become more than half convinced that it wasn't possible to suck in metadata values for an asset through a MySource_print tag in a menu_normal design area. Very glad to find I was wrong.

    I think the use of metadata values in this way is something missing from Dan's Big List of MySource Matrix Keywords - guess I'll have to email him and suggest adding it.

    Again, my thanks to you all. Time to go and play with it and see what happens...

    Steve
    (Steve Scamp) #7

    Hi again, everybody,


    Just wanted to let you know that printing the class name from a metadata value within the menu's <li> tags works a treat and has given me exactly what I was after.



    Check out the page at http://summerreading.slq.qld.gov.au/archive/home_2009-10/level1 - well, when it's Live in a couple of weeks, anyway - to see how we used it.



    Again, my thanks to you all.



    Steve