Se tu hai un menu in html-css-javascript magari adattato tra i millemila belli che si trovano in giro puoi farti il componente da te.
1.Ti fai fare/trovi/crei/adatti un menu. Per esempio questo
2. provi una versione statica sull tua pagina cosi sei sicuro che va bene, i pezzi di jquery non litigano tra loro ecc.
3. Ti crei un componente Menu.ascx che si costruisce l'html del menu da se.
esempio (strettamente legato al menu di cui sopra e a dati inventati)
Mettiamo il caso di avere un elenco di città suddivise per provincie e di dover caricare una sezione del menu con questi dati.
Modello:
codice:
public class Provincia
{
public string ID { get; set; }
public string NomeProvincia { get; set; }
public List<Citta> ElencoCitta { get; set; }
}
public class Citta
{
public string NomeCitta { get; set; }
}
Poi mi serve una classe manager (o helper) che mi tira fuori dal DB questi dati. Questa qui sotto per comodità pesca i dati da liste in memoria ma tu dovrai farlo interrogando il DB:
codice:
public class MenuManager
{
//Elenco di tutte le provincie
public static List<Provincia> LeggiProvincie()
{
return provincie;
}
//Elenco delle citta data una provincia
public static List<Citta> LeggiCitta(string id)
{
var prov = provincie.FirstOrDefault(p => p.ID.Equals(id));
if (null == prov)
return null;
else
return prov.ElencoCitta;
}
}
Nel Menu.ascx mi genero l'html. Il menu che ho scelto è uno di quelli eterogenei e per automatizzarne la generazione dovremmo lavorarci un po su. Per questo le voci principali decido di metterle manualmente. I sotto menu invece (solo uno in questo esempio) li posso tutti automatizzare per esempio pescando dal db.
codice:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Menu.ascx.cs" Inherits="MegaMenu.Usercontrols.Menu" %>
<%@ Import Namespace=" MegaMenu.Usercontrols" %>
<ul id="ldd_menu" class="ldd_menu">[*]<span>Home</span>[*]<span>Catalogo (vuoto)</span>[*]
<span>Citta</span>
<div class="ldd_submenu">
<asp:Repeater ID="ProvincieRP" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li class="ldd_heading"><%# Eval("NomeProvincia") %>
<asp:Repeater ID="CittaRP" runat="server" DataSource='<%# MenuManager.LeggiCitta(Eval("ID").ToString()) %>' >
<ItemTemplate>[*]
<a href='<%# string.Format("/Citta.aspx?nome={0}",Eval("NomeCitta")) %>'>
<%# Eval("NomeCitta") %>
</a>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
<FooterTemplate>[/list]
</FooterTemplate>
</asp:Repeater>
</div>
[/list]
Qui sotto c'è il javascript del menu che non riporto perchè non è importante ai fini dell'esempio.
Le voci principali (home, catalogo e città) sono inserite in questo caso manualmente (se il menu fosse stato uno verticale su cui mettere direttamente le province il problema non ci sarebbe stato perche saremmo partiti direttamente con il repeater). L'elenco delle città invece lo genero utilizzando due Repeater innestati, il primo Itera le province e il secondo le città di ogni provincia. Se noti il Datasource del secondo viene creato dal metodo helper LeggiCitta al quale gli si passa l'id della provincia corrente. La direttiva import è il namespace della classe helper MenuManager, senza quella direttiva non posso chiamare l'helper dal markup.
Non resta che bindare il datasource del repeater esterno all'elenco delle province. Posso farlo nel markup o nel codebheind:
codice:
protected void Page_Load(object sender, EventArgs e)
{
ProvincieRP.DataSource = MenuManager.LeggiProvincie();
ProvincieRP.DataBind();
}
A questo punto basta trascinare l'usercontrol nella masterpage ed il menu è pronto:
Si. Si scrive del codice. Ma con questa flessibilità puoi avere tutti i menu che vuoi.