Melany: Menu Item Title Attribute Issue

melany-bug-report

Today, tweaking the Bootstrap_Walker class used by Melany for another project, I discovered an interesting issue with the title attribute.

Melany allows you to prepend a menu item with an icon coming from the Glyphicon set included in Twitter Bootstrap in a very easy way: just put the glyphicon name in the menu item’s title attribute field and let the Melany do the rest. See an example in the following image:

How to prepend icons to menu items

How to prepend icons to menu items

So, what’s the problem? Well, if you try to define a true title attribute, it won’t work, because the Bootstrap_Walker handles this attribute as if it were an icon. Let me do an example. If you want to set the title attribute to “This link opens in a new tab”, the resulting markup is:

<a href="[menu_item_url]"><span class="glyphicon This link opens in a new tab"></span>&nbsp;[navigation_label]</a>

Of course, you wanted something like this:

<a href="[menu_item_url]" title="This link opens in a new tab">[navigation_label]</a>

I solved this issue with a simple check to see if the word glyphicon is in the title attribute, so you can now use this real attribute without problems. The fix is already in the 1.1.0-dev version, but will soon be released in the 1.0.5 series too.

I hope this has not caused you too many hassles.

Oh, do you know Melany 1.1.0 Alpha2 has been released? Check it out!

CC BY-SA 4.0 Melany: Menu Item Title Attribute Issue by Mattia Migliorini is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

deshack

Web Designer freelance, Ubuntu Member, Linux evangelist. Loves working on clear and minimal designs and wants to create beautiful things for different devices.

deshack wrote 82 posts

Post navigation


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>