Reputation: 2954

Create a dynamic menu?

I searched SO and Google for answers so please don't be upset that I didn't find what I'm looking for! :)

In a HTML page (using ASP .NET 4.5) what type should I be using for a link menu? Basically, I want to have a "Menu" down the left of the page which is populated by a List<string,string> (href,text or something similar), and I don't know what types to be using in the HTML to allow this.

I've found things online which tell me about looping (lol) and other things which are quite obvious, but I can find nothing which tells me "put a <li> tag down and leave it blank, you will put links in it in your pageload" or something similar. I just need to know the frontend type, if you have links with more info then GREAT! But my immediate need is the HTML type to use and the structure it should sit within.

Thanks

Upvotes: 1

Answers (4)

Arun Prasad E S

Reputation: 10115

DYNAMIC LEFT MENU -SIMPLE

      C# CLASS FILES
        public class url_details
        {
            public string url;
            public string page_name;
            public string icon;
        }

        C# inside login page            
        List<url_details> url_list = new List<url_details>();            
        foreach (DataRow dr in dataTable.Rows)
        {
            url_details url_item = new url_details();
            url_item.url = dr["url"].ToString();
            url_item.page_name = dr["page_name"].ToString();
            url_item.icon = dr["icon"].ToString();
            url_list.Add(url_item);
        }           
        Session["urls"] = url_list;


        C#-HTML MENU FORM
         <%
            var uruls = (List<url_details>)Session["urls"];
            foreach (var url in uruls)
            {%>
                <li><a href="..<%=url.url %>"><%=url.icon %><span><%=url.page_name %></span></a></li>

            <% }                

        %>

Upvotes: 0

Jupaol

Reputation: 21355

Option 1

Since you are using ASP.NET WebForms, you have access to the Menu control.

I wrote an article about writing a dynamic SiteMapDataSource, you can take the concepts there and apply them to create a menu. (A menu can be data-bound using a SiteMapDataSource)

If you use ASP.NET 4.5 and WebForms, you can configure the Menu control to render <ul> <li> elements:

Example In (web.config file):

<pages controlRenderingCompatibilityVersion="4.5">

The above line will render a Menu control using <ul> and <li> elements

Option 2

Use the BulletedList control. This control renders automatically <ul> lists:

<asp:BulletedList runat="server"  DisplayMode="HyperLink" BulletStyle="LowerAlpha">

</asp:BulletedList>

Option 3

An alternative approach is to use HTML lists using <ul> and <li>

And then just use CSS styles to create the effect you want

References

NOTE: In any case, I strongly recommend you to read my blog about dynamic SiteMapProviders

Take a look by yourself:

Upvotes: 2

ChrisLively

Reputation: 88044

Well, you only have a limited set of html items as choices. A HREF, INPUT TYPE="BUTTON" or INPUT TYPE="SUBMIT".

Usually menus are implemented with a A tag.

Of course, some sites simply apply a little onclick javascript goodness to pretty much anything to cause a postback/page load.

Although you are probably much better served by simply pulling up a site you like and inspecting it's html.

Simple output:

<ul>
  <li><a href="home.aspx">Home</a></li>
  <li><a href="Accounts.aspx">Accounts</a></li>
  <li><a href="Logout.aspx">Log Off</a></li>
</ul>

In your menu control:

<asp:Repeater id="MenuRepeater">
  <headertemplate>
    <ul>
  </headertemplate>
  <itemtemplate>
    <li><a href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'><%# ((DataRowView)Container.DataItem["DisplayName"]%></a></li>
  </itemtemplate>
  <footertemplate>
    </ul>
  </footertemplate>
 </asp:Repeater>

Code Behind:

protected void Page_Load(object sender, EventArgs e) {
  // have something load a datatable with your page file and display name references  

  MenuRepeater.DataSource = GetMenu();
  MenuRepeater.DataBind();
}

protected void DataTable GetMenu() {
  // you would normally pull this from a database, this is here
  // only to show the idea.
  DataTable menu = new DataTable();
  menu.Columns.Add("PageFile", typeof(String));
  menu.Columns.Add("DisplayName", typeof(String));

  DataRow row = menu.NewRow();
  row["PageFile"] = "home.aspx";
  row["DisplayName"] = "Home";
  menu.Rows.Add(row);

  row = menu.NewRow();
  row["PageFile"] = "Accounts.aspx";
  row["DisplayName"] = "Accounts";
  menu.Rows.Add(row);

  row = menu.NewRow();
  row["PageFile"] = "Logout.aspx";
  row["DisplayName"] = "Logout";
  menu.Rows.Add(row);

  return menu;
}

Upvotes: 3

Jake Bellacera

Reputation: 874

As far as the generic HTML structure is concerned, there isn't a specific way as to how you set up a navigation, but I personally put navigations into a <ul> like this:

<ul id="navigation">
  <li>
    <a href="#">Homepage</a>
  </li>
  <li>
    <a href="#">Second Page</a>
  </li>
  <li>
    <a href="#">Third Page</a>
  </li>
</ul>

Bonus: Dropdowns

Dropdowns obviously add a little more complexity to the mix. When you want to add a child navigation (dropdowns), you'd typically add another <ul> tag inside of an <li> tag to create a second-level list. Here's an example:

<ul id="navigation">
  <li>
    <a href="#">Homepage</a>
  </li>
  <li>
    <a href="#">Second Page</a>
    <ul>
      <li>
        <a href="#">Child Link #1</a>
      </li>
      <li>
        <a href="#">Child Link #2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Third Page</a>
  </li>
</ul>

If you need to hide/show the dropdown on hover, you'd add just a bit of CSS:

#navigation ul {
  display: none;
}
#navigation li:hover > ul {
  display: block;
}

It really doesn't matter how you get the links out there, as long as it's simple to use for the user. I like the <ul> approach becuase it's readable without any CSS and it makes sense syntactically. IMO, lists are HTML's best way to explain this type of hiearchy.