17488 Posts in 4473 Topics by 1978 members
| Go to End | Next > | |
| Author | Topic: | 4081 Views |
-
Menu improvement
11 April 2007 at 11:32pm
Hello to all!
I need your help!
I use menu with such html:
<td class="MenuTd" id="$LinkName">
<td class="MenuDividerTd"> </td>
<td class="MenuTd" id="$LinkName">
<td class="MenuDividerTd"> </td>I use following code in template
<td class="MenuTd" id="$LinkName">
<% if LinkOrSection = link %>
<td class="MenuDividerTd"> </td>
<% end_if %>The aim is when some item selected then divider on the left and on the right should not appear. I'm not showing right divider, but how to get rid of left divider?
Sample code highly appreciated.
-
Re: Menu improvement
12 April 2007 at 6:13pm
We do a similar thing for the very website you are on.
The www.SilverStripe.com menu code is:
<ul id="Menu1">
<% control Menu1 %>
<li class="$LinkingMode $FirstLast">
<a href="$Link" title="Go to the "{$Title.XML}" page">$MenuTitle.XML</a>
</li><% end_control %>
</ul>You will see by doing a view-source of this page, that $FirstLast allows us to have "first" and "last" classes which can either add or remove CSS, for the borders or other graphical elements that separate menu items.
I would suggest that you change your menu system to not use table-based layouts, by the way
-
Re: Menu improvement
14 April 2007 at 5:13am
I think you didn't got my idea right. I do not need different styles on the first and last menu item, but I need specific styles for item before selected and after selected... Any idea?
BTW, menu on tables is not very awful when you use fixed layout and graphical buttons -
Re: Menu improvement
14 April 2007 at 7:43pm
Can you give an example of the the sort of menu you mean? Just want to be sure I know exactly what your after before i give you some code
-
Re: Menu improvement
14 April 2007 at 8:15pm
hm, seems to be a quite specific case that we don't cover generically in the underlying class (sapphire/core/model/DataObjectSet.php).
as your "divider" just seems to be a presentational element, i would suggest using CSS, in combination with the pagecontrols already in silverstripe (http://doc.silverstripe.com/doku.php?id=built-in-page-controls).you can e.g. use <% if LinkOrCurrent = current %> to find out the current page, and apply different classes (or different markup) to this node.
-
Re: Menu improvement
14 April 2007 at 8:49pm
I'll try to type what menu I have (menu is in graphic)...
When no item selected:
News | Firm Profile | Contact Us | News
"|" - is a divider
When some item selected it will look like:
News Firm Profile Contact Us | News
"Firm profile" is selected item - it has no divider on the left and on the right - it only have different look.
Any ideas? I know that this style is not common, but I don't know what to do execpt using javascript for deleting unnecessary dividers...
-
Re: Menu improvement
15 April 2007 at 7:02pm
What I suggest you is get rid of the "divider" cell and have a another class for menu cell to add left and right borders depending on the state of $LinkOrSection.
So the resulting code would look like this :
<td class="MenuTd $LinkOrCurrent" id="$LinkName"></td>so in your CSS you can define two classes like this;
.link {
border-left : 1px solid #000;
border-right : 1px solid #000;
}.current {
border : none;
}Anyway I also recommend you to use Semantically correct code, if you do so you could have all your presentational items maintained inside CSS and avoid extra markup, which would make your code complex.
-
Re: Menu improvement
16 April 2007 at 10:09am Last edited: 16 April 2007 10:57am
Hmm.. where did u guys found $LinkName? Is this built in or something?
Any ideas how to achive 3(+3 on click or in section) case css menu. I'm using tree different classes for menu (because I use color pictures) and don't know how to differ menu links?
So: Link01 Link02 Link03
Every link is styled differently with custom background picture. So any ideas how could I iterate that?
EDIT 01:
I found solution...since I have same css classes names in different .css files, all I had to do is<% control Page(company) %>
<li class="podjetje"><a href="$Link" class="apodjetje">$MenuTitle</a></li>
<% end_control %>So I have 3 .css files. In all three I have .podjetje and .apodjetje declared with different values, so when file changes(different page type or .ss template if u like) my visual apperance changes ;)
I could investigate it further with current or section if I'd like, but I don't need that right now(css does everything).
| 4081 Views | ||
| Go to Top | Next > |
