You must Sign In to post a response.
  • Category: HTML

    Responsive menu for mobile using css

    i have list of menu item that i retrieve from database using datasource. how do i make it responsive mobile menu using css.. do u have any example?..
  • #751060
    Hello A'zlina,

    I suggst you to do that using AJAX,
    with the help of ajax you can retrive ata from database successfully and you can append it to menu classes.
    It doesn't arise postback so there is no pageload during binding and it is client side binding using jQuery so it is much faster than codebehind code.

    There are thousands of solutions available in google , you can find css and jQuery for mobile menu there are huge range of style and UI for responsive menu.
    You should search in google for that
    You should take a look.
    http://responsivemobilemenu.com/en/

    suppose here is your responsive menu code

    <!DOCTYPE html>
    <html>
    <head>
    <title>Responsive Mobile Menu</title>
    <link rel="stylesheet" href="rmm-css/responsivemobilemenu.css" type="text/css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="rmm-js/responsivemobilemenu.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    </head>
    <body>
    <div class="rmm">
    <ul id="ulMenu">

    </ul>
    </div>
    </body>
    </html>

    Than you can bind it using AJAX like this.

    $.ajax({
    type: "POST",
    url: "pageName.aspx/functionName",
    data: {},
    contentType: "application/json",
    success: function (data) {

    $("#ulMenu").empty();
    if (data.d.length > 0) {
    for (var i = 0; i < data.d.length; i++) {
    $("#ulMenu").append("<li><a href='#home'>Home</a></li><li><a href='#about-me'>About me</a></li><li><a href='#gallery'>Gallery</a></li>");
    }
    }

    },
    error: function (result) {
    alert("error");
    }

    });

    I hope you got my point, if still you have an issue than i'll getback to you.

    Regards,
    Nirav Prabtani (Senior Web Developer)
    Email : niravjprabtani@gmail.com
    blog : niravprabtani.blogspot.in

  • #751092
    Hi,

    If you are using a responsive site then the whole website can work fine in any environment.
    For the responsive menu for mobile website, check the below link. Here source code with all the details and explanation has been provided.
    http://responsivemobilemenu.com/en/
    Hope this will help you !

    Thanks,
    Ashutosh Jha
    http://tricksroad.com

  • #751116
    for further info. below are my code for the menu. please help. i don't know how to search for <ul>,<li> markup by using those code. somebody else did the code. TQ. please help

    aspx file :

    <td bgcolor="White" valign="top" class="sitemap" style="border:none">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server" style="text-align: left" SiteMapProvider="PerformanceSiteMap">
    </asp:SiteMapPath>
    <asp:SiteMapDataSource ID="PerformanceSiteMap" runat="server" />

    </td>
    </tr>
    <tr>
    <td bgcolor="White">
    <div>
    <asp:Menu ID="menuBar" CssClass="menuBar" runat="server"
    Orientation="Horizontal" MaximumDynamicDisplayLevels="2">
    <StaticMenuItemStyle CssClass="StaticMenuItemStyle" VerticalPadding="2px" />
    <StaticMenuStyle CssClass="StaticMenuItem" VerticalPadding="1px"/>
    <StaticHoverStyle CssClass="StaticHoverStyle" />
    <DynamicMenuStyle CssClass="DynamicMenuStyle" />
    <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
    <DynamicHoverStyle CssClass="DynamicHoverStyle" />
    </asp:Menu>


    aspx.cs code :

    #region Function for getting data for parent menu
    /// <summary>
    /// Get's the data from database for menu
    /// </summary>
    /// <returns>Datatable of menu items</returns>
    public DataTable GetMenuData()
    {
    // int userid = Int32.Parse(Session["nopkj"].ToString());
    string userid = Convert.ToString(Session["nopkj"]);
    try
    {
    using (SqlConnection con = ClassConn.GetPortalCon())
    {
    SqlCommand cmd = new SqlCommand("parentmenu", con);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@userID", userid);
    //cmd.Parameters.Add("@userID", AseDbType.Integer).Value = userid;
    cmd.Parameters.AddWithValue("@systemID", 3);
    DataTable dtMenuItems = new DataTable();
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    sda.Fill(dtMenuItems);
    cmd.Dispose();
    sda.Dispose();
    return dtMenuItems;
    }
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    return null;
    }
    #endregion

    #region Function for getting data for child menu
    /// <summary>
    /// Get's the data from database for menu
    /// </summary>
    /// <returns>Datatable of menu items</returns>
    public DataTable GetChildMenu()
    {
    // int userid = Int32.Parse(Session["nopkj"].ToString());
    string userid = Convert.ToString(Session["nopkj"]);
    try
    {
    using (SqlConnection con = ClassConn.GetPortalCon())
    {
    SqlCommand cmd = new SqlCommand("childmenu", con);
    cmd.CommandType = CommandType.StoredProcedure;
    //cmd.ExecuteNonQuery();
    cmd.Parameters.AddWithValue("@userID", userid);
    DataTable dtMenuItems = new DataTable();
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    sda.Fill(dtMenuItems);
    cmd.Dispose();
    sda.Dispose();
    return dtMenuItems;
    }
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    return null;
    }
    #endregion

    #region Function for getting data for child submenu
    /// <summary>
    /// Get's the data from database for menu
    /// </summary>
    /// <returns>Datatable of menu items</returns>
    public DataTable GetChildSubMenu()
    {
    // int userid = Int32.Parse(Session["nopkj"].ToString());
    string userid = Convert.ToString(Session["nopkj"]);
    try
    {
    using (SqlConnection con = ClassConn.GetPortalCon())
    {
    SqlCommand cmd = new SqlCommand("childsubmenu", con);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@userID", userid);
    DataTable dtMenuItems = new DataTable();
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    sda.Fill(dtMenuItems);
    cmd.Dispose();
    sda.Dispose();
    return dtMenuItems;
    }
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    return null;
    }
    #endregion
    #region Function for adding top menu items
    /// <summary>
    /// Adds the top/parent menu items for the menu
    /// </summary>
    /// <param name="menuData"></param>
    public void AddTopMenuItems()
    {
    DataView view = null;
    DataTable menuData = GetMenuData();
    DataTable childmenu = GetChildMenu();
    try
    {
    view = new DataView(menuData);

    //view.RowFilter = "moduleID > " + 0 ;

    foreach (DataRowView row in view)
    {
    //Adding the menu item
    MenuItem newMenuItem = new MenuItem(row["moduleDesc"].ToString(), row["moduleID"].ToString());
    newMenuItem.NavigateUrl = row["modulePath"].ToString();
    menuBar.Items.Add(newMenuItem);
    AddChildMenuItems(childmenu, newMenuItem);
    }

    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    finally
    {
    view = null;
    }
    }


    #endregion

    #region Function for adding child menu items from database
    /// <summary>
    /// This code is used to recursively add child menu items by filtering by ParentID
    /// </summary>
    /// <param name="menuData"></param>
    /// <param name="parentMenuIem"></param>
    private void AddChildMenuItems(DataTable childmenu, MenuItem parentMenuItem)
    {
    DataView view = null;
    DataTable childsubmenu = GetChildSubMenu();
    try
    {
    view = new DataView(childmenu);
    view.RowFilter = "moduleID=" + parentMenuItem.Value;
    foreach (DataRowView row in view)
    {
    MenuItem newMenuItem = new MenuItem(row["menuDesc"].ToString(), row["menuID"].ToString(), row["statusSubMenu"].ToString());
    newMenuItem.NavigateUrl = row["menuPath"].ToString();
    parentMenuItem.ChildItems.Add(newMenuItem);
    AddSubMenuItems(childsubmenu, newMenuItem);
    }
    }



    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    finally
    {
    view = null;
    }
    }
    #endregion

    private void AddSubMenuItems(DataTable childsubmenu, MenuItem menuItem)
    {
    DataView view = null;
    try
    {
    view = new DataView(childsubmenu);
    view.RowFilter = "menuID =" + menuItem.Value;
    foreach (DataRowView row in view)
    {
    MenuItem newMenuItem = new MenuItem(row["subMenuDesc"].ToString(), row["subMenuID"].ToString());
    newMenuItem.NavigateUrl = row["subMenuPath"].ToString();
    menuItem.ChildItems.Add(newMenuItem);
    }
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    finally
    {
    view = null;
    }
    }


  • Sign In to post your comments