3

ASP.NET MVC アプリケーションで ul/li メニューを作成しようとしています。メニューには 4 ～ 5 個のトップ メニュー項目が必要であり、各トップメニュー項目にはいくつかのサブメニュー項目を含むホバー/ドロップダウン メニューが必要です。完成したメニュー構造は、ドロップダウンのある通常の ul/li メニューのようになります。

<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>

トップ メニュー項目には、「アクティブ」と「非アクティブ」のクラスが必要です。トップメニュー項目を生成するカスタム HtmlHelper を作成することで、この問題を解決しました。それは次のようになります。

 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());
    }

この関数を次のように呼び出します。

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

この機能は非常にうまく機能します。残念ながら、トップメニュー<li>項目全体が生成されています。したがって<ul>、サブメニューアイテムをトップメニュー<li>タグのどこかに配置する可能性はありません。

誰かがそのようなメニューを作る方法を知っていますか? または、<ul>トップメニュー<li>タグを取得する方法を教えてください。

4

1 に答える 1

7

Superfish menuのようなものを使用できます。私はそれを使用し、それはかなり良いです。必要なのは、ビューのどこかにあるメニューの構造だけです (_Layout.cshtmlたとえば)。この方法を選択した場合は、メニュー構造を (手動で) 作成し、Superfish jQuery プラグインを呼び出すだけです。メニューのネスト レベル (内部)<ul><li>)の数に関係なく、すぐに使用できる素晴らしいメニューが得られます。プラグインは、うまく処理してください。<ul><li>

サンプルコード:

<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>

次のような多くのオプションでメニューをカスタマイズできます。

<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>
于 2012-06-25T12:04:39.127 に答える