I need to take the top menu and make it stack vertically based on screen size.
I can detect the screen size, just cannot get jQuery to co operate with me.
<table class="topMenu" cellspacing="0" cellpadding="0" style="width:1200px">
<tbody>
<tr>
<td class="top" title="">
<td class="top" title="">
<td class="top" title="">
<td class="top" title="">
<td class="top" title="">
<td class="top" title="">
<td class="top" title="">
<td id="tm_active" class="top" title="">
</tr>
</tbody>
</table>
The reason?
I want to stack them menu vertically when someone is using a mobile device.
I tried jquery myself but ended up with this...
<table class="topMenu" cellspacing="0" cellpadding="0" style="width:1200px">
<tbody>
<tr>
<td class="top" title="">
<tr></tr>
<td class="top" title="">
<tr></tr>
<td class="top" title="">
<tr></tr>
<td class="top" title="">
<tr></tr>
<td class="top" title="">
<tr></tr>
<td class="top" title="">
<tr></tr>
<td class="top" title="">
<tr></tr>
<td id="tm_active" class="top" title="">
</tr>
</tbody>
</table>
The <tr></tr> are dimmed inside firebug which means the browser is ignoring the tags.
I tried this...
$('.topMenu td:not(first)').each(function(){
$(this).before("<tr>");
$(this).after("</tr>");
});
$(this).before("<tr>");
$(this).after("</tr>");
});
Any help is appreciated!
