Main menu items width

stormage · October 8th, 2010, 12:56 PM

Hey all!
I'm stuck with what seems to be not so difficult thing to do, but I'm keep on failing.
In the following code (I left the comment for a reason) from the book:

Code:

.MainMenu ul li
{
  /*
    Gives the four menu items in the main menu a width of 200px each
  */
  width: 200px;
}

Is there a way to give a different width value to each main menu item separately?
I've tried some CSS selectors, and msdn, but no luck.
Thank you

Imar · October 9th, 2010, 03:17 AM

Hi there,

It depends on the logic you use to determine an item's width. If you want just enough room for the text on the menu (meaning Home will be smaller than Reviews for example), simply drop the width from the CSS rule. You can then use padding-left and padding-right or margin-left and margin-right to create some room between the two items.

E.g.:

.MainMenu ul li
{
padding-right: 40px;
}

Hope this helps,

Imar

stormage · October 9th, 2010, 09:50 AM

Hi Imar and all!
Well, it helped and thank u for that.
I raised this question, because i thought on a scenario where you could have 10 menu items, that you try to squeeze in 844px width area, and 2 of the items could have long names, which can lead to "collisions" between the items if each of them will have an equal width., in oppose to the case in the book, where only 4 items are described (at least @ chapter 7).
So, I began searching methods to set each item's width separately, and the only thing came to my mind is that some how I need to set the ul and li HTML elements that used to render the menu, but I'm not sure if it's possible.

Your reply helped Imar, but I still wonder, if it's possible, and if it is not too much digging, I'll be happy to hear your opinion about it, or someone else's opinion.

Imar · October 10th, 2010, 03:38 AM

I don't think you can do it from server side code. The MenuItem class (http://msdn.microsoft.com/en-us/libr....menuitem.aspx) does not expose properties such as Width, CssClass or Attributes you typically use to change behavior at the client.

The only options I see is to use CSS 3 or JavaScript.

CSS3:
The following code changes the second menu to yellow:

Code:

 
#Menu1 ul.level1 li:nth-child(2)
{
  background-color: Yellow;
}

The downside is that CSS 3 is not very well supported yet.

JavaScript / jQuery:
You could use jQuery to cause a similar effect, like this code which changes the third menu to red:

Code:

<script type="text/javascript">
$(function ()
{
  $('#Menu1 ul.level1 li:nth-child(3)').addClass('Other');
});
</script>

combined with this CSS class:

Code:

 
.Other
{
  background-color: Red;
}

The jQuery solution works regardless of the browser and whether or not it supports CSS 3. The downside is that it requires JavaScript in order to function.

Hope this helps,

Imar