Working on Horizontal menu tab

Hello,
I am new to modx and i am just trying to work around modxhost template and i am working on horizontal menu tab and i wanted to know whether we can set different widths for each of the menu items and if it is possible, then how can it be accomplished? Can someone help me out in this regard? Thanks in advance

You would need to work with the CSS in your site’s template. Margins and or padding will help position the menu overall and padding for each menu item will determine how close each one is to each other.

Make a copy of you work first in case you need to get back to where you were before you started changing the CSS code...

Max

I wanted to know if we can set the layout an overall menu tab in such a way that all menu items will be placed appropriately ( since it is a dynamic menu tab, each item may take different widths and we may not know the widths in advance ). Please help me out.

Yes you can but it’s a CSS issue not a MODx issue. If you are using wayfinder to create your menu it will output the menu as an unordered list by default. You can then use CSS to style the menu as you please.

Try this article as a good example of how to create CSS tabs http://www.alistapart.com/articles/slidingdoors/. By floating the <li>’s, they shrink/grow to fit the contents.

Creating a horizontal menu within a dynamic system takes a little more planning than you would if you ran the menu vertically down a column. If you keep adding menu items/categories you might run out of room horizontally. If the menu list is text based you will also need to account for end user text size increases: your design should survive at least two increases before your design "suffers."

Getting the Wayfinder menu snippet to function is documented in the MODx system. But your question is more to do with CSS than MODx. Perhaps posting the site or code involved might help others understand the issue(s) you are experiencing...

Max

In MODxHost template the menu width is controlled in the css with this command:

#ajaxmenu ul li {
position: relative;
float: left;
width:111px;
display: block;
text-decoration: none;
text-align: center;
font-weight: normal;
}

To have individual widths, and still use display:block, you could set custom styles for each menu and set a width and setup wayfinder to assign a unique id to the rowTpl output.

Add id="menu_[+wf.docid+]" to the rowTpl and edit the css to include the custom width for each id. For example if the menu is for ID 15 you can add this to make the width 210 pixels:

#ajaxmenu ul li#menu_15 {width:210px;}

You may need adjust other style elements as well. This is just one idea, there are other ways as well.