I tried to use this code on my web site, and basically does what I need. There are lot of implementation on the web but none get the solution I'm looking. My issue is with IE7 where I'm getting the box painted like the picture below. Any Ideas??
Quote:
Originally Posted by Zaja
Try this:
1. open skin/menu.tpl and replace existing content with following code:
Code:
<div id="angleMenu">
<b class="rtop"><b class="r1">[/b]<b class="r2">[/b]<b class="r3">[/b]<b class="r4">[/b][/b]
<h1>{$menu_title}</h1>
{$menu_content}</p>
<b class="rbottom"><b class="r4">[/b]<b class="r3">[/b]<b class="r2">[/b]<b class="r1">[/b][/b]
</div>
1. open skin/skin1.css and add this code:
Code:
h1,h2,p {margin: 0 8px}
h1 {font-size:13px; color:#B70000}
p {padding-bottom:1em}
#angleMenu {background:#FFE595}
b.rtop, b.rbottom {display:block; background:#FFF6DB}
b.rtop b, b.rbottom b {display:block; height:1px; overflow:hidden; background:#FFE595}
b.r1 {margin: 0 5px}
b.r2 {margin: 0 3px}
b.r3 {margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4 {margin: 0 1px; height: 2px}
|