Q:

How to make data trending attribute dynamically

I am using data-trending="abc" in menu href in html5. But now, I am moving website in wordpress and want to make menu in wp but same effect style. Here is the link reference website:- http://www.theladbible.com/. I want exact menu in wp. My problem is I do not know how to merge data trending with wp menu dynamically:
here is my code:
<section class="primary-nav">
    <ul>
    <li><a data-trending="trending-funny" href="<?php bloginfo('url'); ?>/category/funny">Funny</a></li>
    <li><a data-trending="trending-entertainment" href="<?php bloginfo('url');?>/category/entertainment">Entertainment</a></li>
    <li><a data-trending="trending-news" href="<?php bloginfo('url'); ?>/category/news">News</a></li>
    <li><a data-trending="trending-tech" href="<?php bloginfo('url'); ?>/category/technology">Technology</a></li>
    <li><a data-trending="trending-videos" href="<?php bloginfo('url'); ?>/category/videos">Videos</a></li>
    <li><a data-trending="trending-pictures" href="<?php bloginfo('url'); ?>/category/pictures">Pictures</a></li>
        <li><a data-trending="trending-summer" href="<?php bloginfo('url'); ?>/category/summer">TheSUMMERbible</a>
            <span style="margin-left: 0.2em; padding-left: 0.2em; border-left: 1px solid #eee;margin-top: 0;">
                <img src="http://www1.theladbible.com/images/content/55b680a5d9a22.png" style="max-height: 1em; vertical-align: top;">
            </span>
        </li>
    <li><a data-trending="trending-more" href="<?php bloginfo('url'); ?>/category/more">More</a></li>

    <li><a href="http://www.theoddsbible.com/?utm_source=theladbible.com&amp;utm_medium=channel&amp;utm_campaign=TheLadBible" target="_blank">TheOddsBible</a></li>

    <li><a href="<?php bloginfo('url'); ?>/submit-your-content/">Submit Your Content</a></li>
    </ul>
    </section>

    <section class="trending-nav">

    <div class="trending-content trending-funny">
    <section class="trending">content</section>
<div>
<script>
$('a[data-trending]', sixty520.nav).hover(function (e) {
      var el = $(e.target);
      var trendingList = el.data('trending');
      $('.trending-content', sixty520.nav).hide();
      $('.' + trendingList).show();
    });

  }
</script>

Now I want to convert this menu in wp menu I know how to make menu in wp but dnt know about how to merge data trending with wp menu.
Kindly advice me any solution.

A:

You can go to your menus page in wp-admin, click on the sreen options and check the "CSS styles" box(if not active already) and "Link Relationship (XFN)". After doing this you will be able to add specific class name for your menu's <li> elements and rel attribute for <a> elements where you can edit each element's properties.
if you change your jQuery code like the one below, it should work as you want.
<script>

$('li.trending a', sixty520.nav).hover(function (e) {
      var el = $(e.target);
      var trendingList = el.attr('rel');
      $('.trending-content', sixty520.nav).hide();
      $('.' + trendingList).show();
    });

  }
</script>

So you have to give .trending class to <li> elements from WP's "CSS style" field and enter the desired value(eg. trending-funny, trending-entertainment) to "Link Relationship (XFN)" field.

