Curved Text: Text on an Arc for a Menu

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.

Updated on October 1, 2014.

Javascript jQuery libraries required

We need jQuery ... obviously. In this example, jQuery 1.11.1 is used.

Lettering.js

Optional Javascript jQuery library

FitText.js

What we modify in CircleType

We modify the CircleType.js with variables:

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.

Other cool things on an Arc

http://stackoverflow.com/questions/13132864/creating-a-radial-menu-in-css

http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javas...

http://raphaeljs.com

http://stackoverflow.com/questions/13132864/creating-a-radial-menu-in-css