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.
- ArcText.js at http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3...
- CircleType.js at http://circletype.labwire.ca
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.
<li>NOT a link</li>
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.
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.
We need jQuery ... obviously. In this example, jQuery 1.11.1 is used.
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
When FitText is set to True the text does not fit within the containing element.