Curved Text: Text on an Arc for a Menu

Jeremy · 21st September, 2014 · 3:12pm

It would be cool to have a menu that had curved menu links without using image replacement! I have a project in which the design has a curved header element I'd love to create it with just text. So I can't be the only person looking to create an arched menu.

Googling around, I found the following Javascript libraries:

CSS3 & Javascript

CircleType Library Test

The CircleType library appears to be created from the ArcText.js library. The CircleType.js library isn't built for handling links just simple text. I'd like to change the CircleType library to have a link parser prior to the stripping out just the text. It would count the Start and End points of the text that should be wrapped by an anchor.

Example

<nav>

<ul>

<li><a href="http://drupal.com">Drupal</a></li>

<li><a href="http://google.com">Google</a></li> <li>NOT a link</li>

<li><a href="http://php.com">PHP</a></li>

<li><a href="http://zend.com">Zend</a></li> </ul></nav>

Javascript would

In August 2014 I made the simple statement of "Check for anchors and place them in an array". Well, of course that was too simple of what Javascript would do.

Stripping out the Tags in the example results in the text string:

Drupal Google PHP Zend

Carriage Returns and Spaces in the layout of your HTML are converted to spaces and are not stripped out. This is to preserve the text spacing but something that may be an option.

Lets play

Disclaimer: There may be a better way to do this in jQuery and if you have a way please leave a comment.

As planned, I modified the circletype.js library to handle links / anchors.

Javascript jQuery libraries required

Optional Javascript jQuery library

What we modify in CircleType

In the return this.each(function() we add the variable anchors = $(elem).find('a'),

var iLength = 0,

aAnchors = new Array();

and before the close of the function definition, we place a call to a new function placeAnchors();

New function placeAnchors()

Since the Lettering.js wraps each letter in a SPAN then we have to contain those SPANs in the correct Anchors. We step through the text of each item in the anchors array and match it with the contents of the letters array.

Curved Menu Demo

coming soon

When FitText is set to True the text does not fit within the containing element.