ASP.NET MVC ul/li menu

Je suis en train de faire une ul/li menu dans mon ASP.NET application MVC. Le menu doit avoir 4 à 5 éléments de menu et chaque topmenu élément doit avoir un hover/menu déroulant avec certains éléments de sous-menu. Le fini de la structure du menu devrait ressembler à une habitude ul/li menu déroulant:

<ul>

 <li class="active">
   <a>Topmenu 1</a>
   <ul>
   <li>Submenu1</li>
   <li>Submenu2</li>
   <li>Submenu3</li>
   </ul>
 </li>

  <li class="inactive">
   <a>Topmenu 2</a>
   <ul>
   <li>Submenu4</li>
   <li>Submenu5</li>
   <li>Submenu6</li>
   </ul>
 </li>
  And so on...
</ul>

Le menu du haut, les articles doivent avoir des classes avec "actif" et "inactif". J'ai résolu le problème en faisant un personnalisé HtmlHelper qui génère le topmenu éléments. Qui ressemble à ceci:

 public static MvcHtmlString MenuItem(
    this HtmlHelper htmlHelper,
    string text,
    string action,
    string controller
)
    {

        var li = new TagBuilder("li");
        var routeData = htmlHelper.ViewContext.RouteData;
        var currentAction = routeData.GetRequiredString("action");
        var currentController = routeData.GetRequiredString("controller");
        if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
        {
            li.AddCssClass("tab active");
        }
        else {
            li.AddCssClass("tab inactive");
        }
        li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
        return MvcHtmlString.Create(li.ToString());
    }

J'ai appeler la fonction comme ceci:

@Html.MenuItem("Katalog", "Index", "Katalog")

Cette fonction fonctionne très bien. Malheureusement, l'ensemble de la topmenu <li> élément est arriver généré. Je n'ai donc pas la possibilité de placer le <ul> pour la submenuitems quelque part dans le topmenu <li> tag.

Quelqu'un a une idée de comment faire un menu comme ça? Ou une idée de comment je peux obtenir mes <ul> dans le topmenu <li> tag?

OriginalL'auteur colosso | 2012-06-25

  1. 7

    Vous pouvez utiliser quelque chose comme Superfish menu. Je l'utilise et c'est très bon. La seule chose que vous devez avoir, c'est la structure de votre menu quelque part dans votre point de vue (_Layout.cshtml par exemple). Si vous choisissez d'aller dans cette voie, il suffit de créer la structure de menu (<ul><li>) par la main et appeler le plugin jQuery Superfish. Vous obtiendrez un impressionnant menu prêt à utiliser n'importe comment beaucoup de niveaux d'imbrication (<ul> à l'intérieur de <li>) votre menu peut avoir. Le plugin s'en occupera bien.

    Exemple de code:

    <script type="text/javascript" src="superfish.js"></script>

//Create the root <ul> with id = menu... <ul id="menu">
//Call superfish() on the containing ul element.

<script> 

    $(document).ready(function() { 
        $('ul#menu').superfish(); 
    }); 

</script>

    Vous pouvez personnaliser le menu avec beaucoup de options comme ceci:

    <script> 

    $(document).ready(function() { 
        $('ul#menu').superfish({ 
            delay:       1000,                            //one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  //fade-in and slide-down animation 
            speed:       'normal',                        //faster animation speed 
            autoArrows:  true,                            //enable generation of arrow mark-up 
            dropShadows: true                             //enable drop shadows 
        }); 
    }); 

</script>
    Merci pour ce grand exemple. Je n'ai jamais tohught sur la génération d'un menu en js ou jquery... Avez-vous déjà travaillé avec ce plugin? Ne pouvait pas causer des problèmes pour le RÉFÉRENCEMENT?
    Pas de problème! J'ai mis en place un menu à l'aide de ce plugin génial. C'est assez propre... La seule chose qu'il ajoute à l' <ul>s et <li>s est classes CSS pour le style du menu afin de vous obtenir un beau menu. Je ne vois aucun problème en ce qui concerne le RÉFÉRENCEMENT.
    J'espère que cela fonctionnera pour les menus statiques.Que faire si j'avais menus dynamiques? il peut aussi être parent - enfant avec des autorisations ?
    cela fonctionnera pour les menus dynamiques, aussi longtemps que votre <ul>s <li>s sont correctement généré.
    j'ai besoin de plus d'aide. permettez-moi de coup de pied hors de faire mon premier mvc (essayer avec mvc 4 rasoir) . merci 🙂

    OriginalL'auteur Leniel Maccaferri