Dynamic css class attribute?

Question

I have a navigation bar whose elements are rendered using Struts2 iterator tag like below:

<ul>
    <li><a href="#">Home</a></li>

<s:iterator var="row" value="#session.PrivMenu.children" status="stat">         
    <li>
        <a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
            <s:property value="#row.moduleName"/>
        </a>
    </li>
</s:iterator>  

</ul>

Now I have to apply an icon with each <a> element. Since the icon is going to be different for each navbar element, a different styling will be required for each <a> tag.

How can I achieve this in struts2 ??

I thought of dynamic cssClass attribute.

cssClass = '<s:property value="#row.moduleName"/>' + icon

But I think like this later if module name changes, I will have to edit my css too. Am I going wrong??? Any better idea?

The question is misasked. WHY and HOW the moduleName will eventually change the name ? Will it be the same module with a different name ? Will it be a new Module ? The number of modules will never change ? Are the images inside the war or stored externally ? Are the CSS inside the war or stored externally ? And so on... please clarify your question to get a better help — Andrea Ligios
– Andrea Ligios, Commented Apr 30, 2014 at 8:56

d1m5n · Accepted Answer · 2014-04-30 06:32:50Z

If you would like to work with nth-child, it's not working for browsers like ie8 or less. Another possibilty (if the menu structure does not change) is using a unique class with a counter on the li.

Then use correct css to design the menu

If you have a possibilty of using a counter you can use is like this:

<ul>
  <li class="menu-1"><a href="#">Home</a></li>
  <s:iterator var="row" value="#session.PrivMenu.children" status="stat">
    <li class="menu-2"><a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
      <s:property value="#row.moduleName"/></a>
    </li>                       
  </s:iterator>
  <s:iterator var="row" value="#session.PrivMenu.children" status="stat">
    <li class="menu-3"><a href="#" rel="ddsubmenu<s:property value="#stat.index+1"/>">
      <s:property value="#row.moduleName"/></a>
    </li>                       
  </s:iterator>    
</ul>

Thor · Accepted Answer · 2014-04-30 06:24:51Z

0

You could just add a class to it and then use css to add an icon. In your css you can use the 'nth-child' selector to add different icons to each a tag.

See: w3schools.com/cssref/sel_nth-child.asp for more info on that.

Using the selector you can set the background for each a tag. Example: if you have 7 links and want to set the 5th background use:

.MyNavBar a:nth-child(7n+5) {width: 50px;background-image:url('MyImageurl');}

answered Apr 30, 2014 at 6:24

Thor

2912 silver badges8 bronze badges

Collectives™ on Stack Overflow

Dynamic css class attribute?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related