Anpassen der Orchard navigation Menü

Schließlich bekam ich dies in der orchard 1.5 durch überschreiben der Menu.cshtml Ansicht, Codierung etwas Logik, um zu überprüfen, die Anzahl der Menüpunkte und dann Rendern Navigations-Menüs mit verschiedenen ID ' s, basierend auf der Anzahl der Menüpunkte, die Sie enthalten. Ich habe dann Hinzugefügt, verschiedene CSS-Selektoren in meinem Site.css jeder mit CSS-geeignet für Navigations-Menüs in verschiedenen Größen. Hier ist, was mein Menu.cshtml landete auf der Suche wie (das geht auch in den Views-Ordner des momentan aktiven Thema).

@
{

    Script.Require("jQuery");
    var tag = Tag(Model , "ul");
    var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);

}
@{//if the menu contains 3 items, render a nav called 'ThreeItemNav'
if(items.Count == 3){
<nav id="ThreeItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>
}
else if(items.Count == 4){
<nav id="FourItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>

}
else if(items.Count == 5){
<nav id="FiveItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>


}
}

//Include the jQuery to add animations to the navigation menu
@using (Script.Foot())
{
    <script type ="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
       //Add your script here
            $(" #FiveItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });


            $(" #FourItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });

            $(" #ThreeItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });
        });


    //]]>
    </script>
}

Beachten Sie, dass Sie müssen hinzufügen von CSS-Selektoren in Ihr Thema für jedes nav-element (ThreeItemNav, FourItemNav und FiveItemNav), zum Beispiel in Ihren aktuellen Themen Site.css:

/*Style the Three Item Navigation menu*/
#ThreeItemNav li
{    
background-color:#263A79;
}

#ThreeItemNav a:hover
{
border-right:1px solid #333;
border-left:1px solid #333;
}


#ThreeItemNav > ul li.current 
{
       background:#5882FA;
}

/*Style the Four Item Navigation menu*/

#FourItemNav li
{
       background:#Purple;
}

#FourItemNav a:hover
{
       background:Orange;
}

.........more styles

Das sicher scheint wie eine langatmige Ansatz, aber es ist die beste, die ich denken konnte, so dass ich halten kann die Funktionalität der Orchard navigation im Menü und noch style es mit CSS und fügen Sie jQuery-Animationen. Ich dachte, eine anfängliche Entwicklung der Kosten war es Wert hinzufügen einige mächtige Funktionen zur navigation im Menü im langen Lauf. Ich würde gerne Anregungen zu hören, wie dies in ordentlicher Art und Weise. Auch ich würde definitiv empfehlen die Verwendung von Orchard 1.5, da hat es eingebaute Unterstützung für das erstellen von hierarchischen Navigationsmenüs.

Check-out, die innere Funktionsweise von Menu.cshtml und MenuItem.cshtml Ansichten helfen, eine Menge bei dem Versuch, zu verstehen, wie die Navigations-Menüs gerendert werden, im Obstgarten, sowie das inspizieren, wie das default-Theme-Machine-Stile für die navigation im Menü und den verschiedenen Ebenen/sub-Menüs.

InformationsquelleAutor Mohammad Sepahvand