Alt-Web Design & Publishing

Arched Menu with CSS Transform

Method:

Using CSS transform:rotate we can get some interesting design effects. Supporting browsers as of this writing:
Safari 3+, Chrome 1+, Firefox 3.5+

Live Example

Fig. 1 - as seen in Safari 3+, Chrome 1+, Firefox 3.5

Arched Menu in Safari, Chrome, FF3.5

Fig. 2 - as seen in Internet Explorer and other browsers that don't support transform:rotate

non-arched menu in IE6

CSS Code:

#container {
width: 800px;
margin:0 auto; /**centered on screen**/
border:1px solid red;}

#navbarLft ul, #navbarMid ul, #navbarRt ul{
list-style-type:none;
width: 150px; /**width in pixels or percentages**/
border: 2px solid silver;
font-size:18px;
line-height: 2;
/**following is for IE6**/
overflow: hidden;
word-wrap: break-word;
}

#navbarLft {
float:left;
margin-top:40px;
-webkit-transform: rotate(-15deg); /**safari, chrome**/
-moz-transform: rotate(-15deg); /**firefox**/
transform: rotate(-15deg); /**other browsers**/ }

#navbarMid {
float:left;
margin-top:0px;
margin-left:112px; }

#navbarRt {
float:right;
margin-top:40px;
-webkit-transform: rotate(15deg); /**safari, chrome**/
-moz-transform: rotate(15deg); /**firefox**/
transform: rotate(15deg); /**other browsers**/ }

/**clear floats**/

.clear {
clear: both;
line-height: 1px;
visibility: hidden }

 

XHTML Code:

<div id="container">

<div id="navbarLft">

<ul>
<li>NavbarLft </li>
<li><a href="#">another link</a></li>
<li><a href="#">some other link</a></li>

</ul>

</div> <!--end navbarLft -->

<div id="navbarMid">

<ul>
<li>navbarMid </li>
<li><a href="#">another link</a></li>
<li><a href="#">some other link</a></li>

</ul>

</div> <!--end navbarMid -->

<div id="navbarRt">

<ul>
<li>navbarRt</li>
<li><a href="#">another link</a></li>
<li><a href="#">some other link</a></li>

</ul>

</div> <!--end navbarRt -->

<!--clear floats with a <p> <hr> or <br> class-->
<br class="clear" />

</div> <!--end container -->

 

    bookmarks