RSS

Building a Database Driven Hierarchical Menu using ASP.NET and SooperFish Jquery Plugin

14 Sep

Click on the Image To see the Demo


Introduction

In this article I will show you how to build database driven hierarchical multi-column dropdown menus using SooperFish jquery Plugin. But why SooperFish Plugin ?
Feature of SooperFish PlugIn jquery
•  Automatic dual or triple columns based on number of child menu items
•  Optional delay before hiding menu on mouse-out
•  Optional automatic indicator arrows (in black or white)
•  Configurable show AND hide animations
•  Custom easing supported
•  Works with jQuery backlava plugin (optionally)
•  Works fine with Javascript disabled
•  Comes with several free themes to demonstrate styling
•  3.65kb uncompressed
•  2.01kb minified

To me the preceding feature very nice but why SooperFish

Because to build animated meun using SooperFish you need only three HTML Tags (ul,li and a), so that’s way I like very much SooperFish PlugIn .See  image 2

Steps to build a Database Driven Hierarchical Menu using ASP.NET and SooperFish Jquery Plug in

Note: Thanks to Michael Libby for his nice article Building a Database Driven Hierarchical Menu using ASP.NET 2.0

Step 1 – create self-join Table and fill it with some data


The simplest way to build hierarchical data is create  self-join table  which parent Menu and Child Menu in the same table .the child menu will use ParentID  to establish a relationship with MenuID in parent Row
Figure 3:  self-join Table

Self Join

Fill the table with some data see -Figure 4


Figure 4 : Parent, Child Relationships

Step 2 : retrieve Data and Create Nested Relationship using DataSet


The DataSet() is perfect  for  retrieve the  data and create relational data and convert it into xml format see the following code

public string GenerateXmlFormat()
    {
        string SqlCommand;
        DataSet DbMenu;
        DataRelation relation;

        using (SqlConnection conn = new SqlConnection(ConnectionString))
        {

            SqlCommand = "Select MenuID, Name,Url, ParentID from MenuTable";

            DbMenu = new DataSet();

            SqlDataAdapter Adapter = new SqlDataAdapter(SqlCommand, conn);

            Adapter.Fill(DbMenu);

            Adapter.Dispose();
        }

        DbMenu.DataSetName = "Menus";

        DbMenu.Tables[0].TableName = "Menu";

        //create Relation Parent and Child
        relation = new DataRelation("ParentChild", DbMenu.Tables["Menu"].Columns["MenuID"], DbMenu.Tables["Menu"].Columns["ParentID"], true);

        relation.Nested = true;

        DbMenu.Relations.Add(relation);

        return DbMenu.GetXml();
    }

The most important points in the previous code are
•  The DataRelation Class, which allow you to create relation between Parent and Child Column.
•  Nested property  ,which allow you to build Hierarchical data .
•  GetXml() function ,represent the retrieved  data as xml format.
The result after calling DbMenu.GetXml()  shown in the next Figure

Figure 5 : Hierarchical data in Xml Format after calling GetXml() method.

Step 3 – using XSLT to convert XML data to HTML format


After generating data as xml (Figure 5) we need to convert this XML or reformate it to HTML Markups .So we need an XSLT to convert xml format to HTML .
First of all create new XSLT file and then write this code

<!-- Find the root node called Menus then convert it to <UL> </UL> HTMLTags
       and call MenuListing for its children -->
  <xsl:template match="/Menus">
    <ul>
      <xsl:attribute name="class">
        <xsl:text>sf-menu</xsl:text>
      </xsl:attribute>
      <xsl:attribute name="id">
        <xsl:text>nav</xsl:text>
      </xsl:attribute>
      <xsl:call-template name="MenuListing" />
    </ul>
  </xsl:template>

  <!-- Allow for recusive child node processing -->
  <xsl:template name="MenuListing">
    <xsl:apply-templates select="Menu" />
  </xsl:template>

  <xsl:template match="Menu">
    <li>
      <a>
      <!-- Convert Menu child elements to <li> <a> html tags  and attributes inside a tag -->
      <xsl:attribute name="href">
        <xsl:value-of select="Url"/>
      </xsl:attribute>
        <xsl:value-of select="Name"/>
      </a>
      <!-- Recursively call MenuListing for child menu nodes -->

      <xsl:if test="count(Menu) > 0">
        <ul>
        <xsl:call-template name="MenuListing" />
        </ul>
      </xsl:if>
    </li>
  </xsl:template>
</xsl:stylesheet>

The XSLT code will do the following
1.Find the root Node Called Menus and convert it to ul tags with 2 attributes class name and id (class will be used by SooperFish PlugIn and ID important for stylesheet).
2.Call MenuListing Template for nested or children Menu
3.Find the node Called Menu and convert it to li and a html tags with href attribute for a tag with Name or title (the value of href attribute come from Url node and same thing with title for a).
4.Recursively call MenuListing for child menu node but the most important thing we add <ul> tag before Calling MenuListing Template
Now the result will be as following

<ul class="sf-menu" id="nav">
      <li>
          <a href="#">Products</a>
            <ul>
             <li>
              <a href="#">Office</a>
            <ul>
                 <li>
                   <a href="#">Offiice2003</a>
                 </li>
                 <li>
                   <a href="#">Office2007</a>
                 </li>
                  <li>
                   <a href="#">Office2010</a>
                  </li>
           </ul>
     </li>
....
....
</ul>

Step 4 – Convert XML to HTML using XSLT in ASP.NET


To apply XSLT transformation we need an XML data returned by the  GenertateXmlFormat() Method also we need an XSLT file after that we will convert XML TO HTML Format and return the new format as string

public string ExecuteXSLTransformation()
    {
        string HtmlTags,XsltPath;
        MemoryStream DataStream = default(MemoryStream);
        StreamReader streamReader = default(StreamReader);

        try
        {
            //Path of XSLT file
            XsltPath = HttpContext.Current.Server.MapPath("XsltFormatFolder/TransformXSLT.xsl");

            //Encode all Xml format string to bytes
            byte[] bytes = Encoding.ASCII.GetBytes(GenerateXmlFormat());

            DataStream = new MemoryStream(bytes);

            //Create Xmlreader from memory stream

            XmlReader reader = XmlReader.Create(DataStream);

            // Load the XML
            XPathDocument document = new XPathDocument(reader);

            XslCompiledTransform XsltFormat = new XslCompiledTransform();

            // Load the style sheet.
            XsltFormat.Load(XsltPath);

            DataStream = new MemoryStream();

            XmlTextWriter writer = new XmlTextWriter(DataStream, Encoding.ASCII);

            //Apply transformation from xml format to html format and save it in xmltextwriter
            XsltFormat.Transform(document, writer);

            streamReader = new StreamReader(DataStream);

            DataStream.Position = 0;

            HtmlTags = streamReader.ReadToEnd();

            return HtmlTags;
        }
        catch (Exception ex)
        {
            ErrorMsg = ex.Message;
            return ErrorMsg;
        }
        finally
        {
            //Release the resources

            streamReader.Close();

            DataStream.Close();
        }

    }

Step 5 –Tied everything together


We are now in the last step ,we need just to add new aspx page and add the necessary jquery files including SooperFish Plugin  and style sheet  files as following

<link rel="stylesheet" type="text/css" href="Styles/sooperfish.css" media="screen"/>

<link rel="stylesheet" type="text/css" href="Styles/sooperfish-theme-large.css" media="screen"/>

<script type="text/javascript" src="Jquery/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="Jquery/jquery.easing-sooper.js"></script>

<script type="text/javascript" src="Jquery/jquery.sooperfish.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('ul.sf-menu').sooperfish();
        });
    </script>

After that add Literal control in your page and assign html format programmatically Page_Load as following

if (!IsPostBack)
 {
 SooperFish spoorfishMenu = new SooperFish();
 Literal1.Text = spoorfishMenu.ExecuteXSLTransformation();
 }

Advance SooperFish effects


SooperFish Allow you to animate your menu in many different ways see the following code

<script type="text/javascript">
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish({
    dualColumn  : 6, //if a submenu has at least this many items it will be divided in 2 columns
    tripleColumn  : 8, //if a submenu has at least this many items it will be divided in 3 columns
    hoverClass  : 'sfHover',
    delay    : 500, //make sure menus only disappear when intended, 500ms is advised by Jacob Nielsen
    animationShow  : {width:'show',height:'show',opacity:'show'},
    speedShow    : 750,
    easingShow      : 'easeOutBounce',
    animationHide  : {width:'hide',height:'hide',opacity:'hide'},
    speedHide    : 300,
    easingHide      : 'easeInOvershoot',
    autoArrows  : true
      });
    });
    </script>

aslo when you download the plugin files you will find two more stylsheet with some html pages show you some other effects

Note : you can know more about SooperFish here SooperFish Multi-Column Animated Drop-down

Download

AspSooperFish

Summary

This article show you how to build nice menus using SooperFish Jequery Plugin instead of using normal asp.net menu which generate table tags .All you have to do is create self-join table and generate xml using DataSet() after that convert it to html (ul,li and a) tags using XSLT.

Fill free to tell me about  AspSooperFishMenu

References

Building a Database Driven Hierarchical Menu using ASP.NET 2.0

What Is XSLT?

About these ads
 
34 Comments

Posted by on September 14, 2010 in ASP.NET

 

Tags: , , , , , , ,

34 responses to “Building a Database Driven Hierarchical Menu using ASP.NET and SooperFish Jquery Plugin

  1. dutchers insurance

    October 5, 2010 at 8:08 pm

    Great post! I wish you could follow up to this topic?!?

    My regards,
    Mauricio

     
  2. Choukri Mechernene

    November 10, 2010 at 8:58 am

    Hi ahmad,

    Greet post! thank you,

    i use yr solution to build a dynamic menu from http://www.dynamicdrive.com accordion one

    but i’m stuck with the XSL template, can u help me?

     
  3. Ahmed Naji

    November 10, 2010 at 2:00 pm

    Of course ,but can you give me more details?

    Regards Ahmed Naji

     
    • bhargav

      March 18, 2011 at 12:12 pm

      ahmed where and how exactly u have used the ispostback i got stuk over there…need help asap

       
  4. Ashish

    July 6, 2011 at 7:05 am

    Hi Ahmad,

    Can we add arrow button at the right most side of menu, if main menu items exceeds menu length. Or we can say menu bar should not divide into multiple rows.

    Can you suggest me, how to achieve this?

    Thanks in advance.

     
  5. Ahmed Naji

    July 6, 2011 at 10:38 am

    Hi Ashish
    What you can do is using some of horizontal slider jqeruy plug in,so when your menu items exceed it will not break it into multiple rows.Instead it will display it as a slide.
    Take a look to the following page and try to use it with my code.
    http://www.rgdesign.org/portfolio/2009/jquery.ease.slide.menu.v1/index.html
    I hope that help.
    Ahmed Naji

     
  6. Ilario

    November 12, 2011 at 7:26 pm

    Hi Ahmed! Great post, thank you so much!
    Can i ask you if there’s the possibility to set it as a vertical menu?

    Ilario

     
  7. Ilario

    November 14, 2011 at 5:59 pm

    Hi Ahmed! I’m still trying to rotate it… :D
    I’ll let you know if i achieve it! Can i also ask you if is possible to make the subvoices be visible only on click on the parent voice? Thanks in advance!

    Ilario

     
  8. Naeem

    December 23, 2011 at 12:42 pm

    good

     
  9. Wamiq Rehman

    January 6, 2012 at 4:41 am

    Great post :) Helped alot

     
  10. rahul

    April 24, 2012 at 5:58 am

    Great post i use your post and make my site with dynamic menu…
    http://www.dreamywebsolutions.com

     
    • Ahmed Naji

      April 24, 2012 at 7:30 am

      wow
      That’s great
      Thank you very much

       
  11. Naresh Chand

    April 26, 2012 at 8:24 am

    HI Ahmed
    Thank you for this great post…
    But I have a query…..

    “I want to change the ‘href’ attribute of 1st anchor tag to ‘#’ i.e.

    Products

    abc


    —-

    means I want to make Products non-navigatable…

    Thanks(in advance ) :-)

     
  12. NS

    May 22, 2012 at 2:47 pm

    Hi Ahmed Naji,
    great post….

    but, im stuck when i implement in sharepoint site.. literal display the navigation as static.. but not flexible(collapse / expand).. can any idea.. or any other way… to get flexible navigation.. using jquery..

    Thanks in Advance..

     
  13. Prasad

    June 11, 2012 at 11:56 am

    Hi, I am not able to get Menu_click event..
    Can you help me out?

     
  14. Ramu

    June 15, 2012 at 11:39 pm

    Thank you very much, interesting post!! :)

     
  15. Rashid N Khan

    October 14, 2012 at 10:43 am

    MashaAllah nice nd easy to learn post.

    Try to change it. I want virtically., if any one or Bhai Naji you have idea abt it please send me the detail. want badly
    ZakarAllah

     
    • Ahmed Naji

      October 15, 2012 at 5:50 am

      Hi Rashid N Khan
      Take a look to the following link
      http://users.tpg.com.au/j_birch/plugins/superfish/#sample3
      Regards,

       
      • Rashid N Khan

        October 15, 2012 at 10:07 am

        As salamu alekum
        Thanks for the reply. I was trying on this code. but only manage to draw a vertical menu. i need you help. right now in this code mouse hover is working when move cursor moves then sub cat open in pan. but i want is on mouse click when use click on the category. then is it has sub cat then it show under it i have the jquery but enbale to manuplate with this code.
        http://livedemo00.template-help.com/prestashop_40367/ check this template i need my menu bar like this(in this template they fill menu values statically i want dynamically) if you can help meout in this topic it will be great help for me.
        ZakarAllah.

         
  16. Rashid N Khan

    October 15, 2012 at 10:47 am

    Alhumdolillah. I done it.
    tell me now to show the code so that others also get benifit
    Thank you Mr Naji
    Allah Hafiz

     
    • Ahmed Naji

      October 16, 2012 at 7:02 am

      Hi Rashid N Khan
      Yest of course you can show the code.
      Thank a lot Mr Rashid
      Allah Hafiz

       
  17. Tamer Masri

    January 27, 2013 at 6:06 pm

    Hi Ahmed Naji can you send me thw sample to my email please???
    here is my email
    masritamer@gmail.com

     
  18. Alvin Milagrosa

    February 15, 2013 at 1:21 am

    Thank you for this wonderfull menu

    i just want to share if u want to make the menu

    to vertical you can see this page. just convert all the things that u already know to this page.
    http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

     
  19. ali

    March 5, 2013 at 12:01 pm

    could you attach project again , download link is unavailable or could u email to me my email address is aliziveie@gmail.com
    thanks in advance

     
  20. ali

    March 5, 2013 at 12:44 pm

    exactly i want to generate hierarchical menu from database I have seen many websites but they used xml file to read menu item but ineed to read them from tables . please help me what can I do .
    thanks & regards
    my email address :aliziveie@gmail.com

     
  21. ali

    March 5, 2013 at 12:47 pm

    finally i need a text file or string text something like this:
    testtest2
    thanks again .

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: