jquery - Alternating Background Color of Menu Items Generated from query -
i'm working on putting finishing touches on jquery menu dynamically generated. menu holds reports assigned employees based on login. employees have menu 2 items while other employees can have list 20 reports long.
i've seen how posts implement css3 based on list fixed number of items. question how can same thing menu given no 2 employees have same number of items in menu? below current code of menu.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <!---<link rel="stylesheet" href="/resources/demos/style.css" />---> <script> $(function() { $("#menu" ).menu(); }); $(function() { $(document ).tooltip(); }); function refresh() { child.location.reload(true); } </script> <style> a{ font-family:arial; } #mainmenu { background-color:"#58b0eb"; } .ui-menu { width: 270px; font: arial; font-size: small; } .ui-tooltip { background-image: none; background-color: #f7f792; display: inline-block; font: verdana; font-size:x-small; } </style> </head> <body> <cfset user_id=session.ft_user_id> <cfinvoke component="cfc.mainmenu" method="getmenuhead" returnvariable="getmenuheadret"> <cfinvokeargument name="user_id" value="#user_id#"/> </cfinvoke> <ul id="menu"> <li> <a id="mainmenu" href="#">reports , tools</a> <ul> <cfloop query="getmenuheadret"> <cfif getmenuheadret.recordcount gt 0> <li style="background-color:#e6e6e6;"> <cfoutput><a href="##">#description#</a></cfoutput> <cfinvoke component="cfc.mainmenu" method="getmenuitem" returnvariable="getmenuitemret"> <cfinvokeargument name="menukey" value="#id#"/> <cfinvokeargument name="user_id" value="#user_id#"/> </cfinvoke> <ul> <cfif getmenuitemret.recordcount gt 0> <cfloop query="getmenuitemret"> <cfoutput><li><a title="#report_desc#" onclick="refresh();" href="#url#?uid="#user_id# target="_blank">#report_name#</a></li></cfoutput> </cfloop> </cfif> </ul> </li> </cfif> </cfloop> </ul> </li> </ul> </body> </html>
you can use simple css3; use 2 rules similar these:
ul li:nth-child(2n) { background-color: #aa5555; } ul li:nth-child(2n+1) { background-color: #5555aa; }
here's (ugly :p) example: http://jsfiddle.net/ryebmym7/1/
Comments
Post a Comment