jQuery to extend the ActionLink

Think you have created a new asp.net mvc application.

In your master page your menu looks like this:

Make it look like this

Here is the code

 
 <div id="menu">
   <ul class="menu">
       <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
       <li><%: Html.ActionLink("About", "About", "Home")%></li>
  
.
.
.

 </ul>

You may wish to create a special menu for your application for the design sake.

Here is a quick tips how you can integrate a special jQuery menu in an ASP.NET MVC application. In fact it is not too complicated to use a jQuery plug in a basic (or even complex) mvc application. But in some cases, it’s a bit confusing and you’ll finally decide to change the original code provided with the plug in.

In this tip, we are going to choose a random plugin between diversified plugins that can be found around the World Wide Web. The randomly chosen plugin is this one http://apycom.com/menus/6-light-sea-green.html

You can follow the link if you want to download it, there you’ll find other many and diversified menus. If you have downloaded, extract it and you will find that the plug requires your menu to look like this

   
 <ul class="menu">
        <li><a href="#" class="parent"><span>Home</span></a></li>
.
.
.
</ul>

Instead of what we usually use :

 
<ul class="menu">
   <li><a href="#" class="parent">Home</a></li>
.
.
.
</ul>

Note the span element in bold.

If you try integrating this menu in our asp.net application, it will not work perfectly! You will not get the same result because the plugin uses the span element to regulate the position the menu. So that’s the problem. To solve this problem, you can try to generate this programaticaly, using html.ActionLink helper. This solution is not easy to handle. Until now, I don’t care how to do it Asp. Because jQuery can help me to wrap the a element. Have a look bellow to see I do it

<script type="text/javascript" language="javascript">
  $(document).ready(function () {
    $('.menu')
	.find('a')
	.each(function () {
    $(this).wrapInner($("<span/>"));
      });
        });
    </script>

Here you are and the problem is solved!

• We tell the browser to execute our script only when the document is loaded completely
• We grab the html element whose class name is ‘menu’
• We find a a element inside the html grabbed in 2
• We decide to do it for all similar elements (each a tag)
• Then we wrap the a element.
• ADD THIS CODE IN YOUR MASTER PAGE

Conclusion

JQuery is a powerful JavaScript framework that can help you to do more and write less! It this tips you learnt how you can change the look of your menu in an asp.net mvc application. You can also use other jquery functions(first(),after(),before(),animate(),last(), next(), …) to do complicated things at your wish.

Sincerely Yours!