Geek asks and answers

Customize your Orchard navigation menu

Sorry to ask such a general question. I create a site with Orchard CMS. Website design and interactivity are critical requirements. I have a navigation menu with a fixed size (900 px wide), but you should be able to customize as many menu items as possible (I do this manually by modifying css). I used a bit of jQuery to create animations on mouse courses, etc. For the menu. The problem is that the css and jQuery parameters are hardcoded. Therefore, if the user had to change in order to add a new menu item, they need to know in advance the number of menu items and sub-items, so for the average user it is not very simple to configure that everything points to the CMS. What is the best way to save this menu interactively (with jQuery animation) and soso that the user can add content pages to this menu (as well as the default navigation menu in the garden), and is also convenient for the user, so that a non-technical user will need to bother with jQuery and CSS menus?

What is the best way to do this, should I create a module (component of the navigation menu?) That will dynamically set css / jQuery values ​​(width, etc.).

UPDATE In addition, right now I have my HTML (my navigation menu, Unorderd list, etc.) and its jQuery script link built into mine Layout.cshtml, and the style for the navigation menu is in mine Site.cssin my theme, this is considered bad practice?

+1
source share
1 answer

orchard 1.5, Menu.cshtml, , , , . CSS Site.css, CSS, . Menu.cshtml ( "" ).

@
{

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

, CSS nav (ThreeItemNav, FourItemNav FiveItemNav), , 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

, , , , , Orchard - CSS jQuery. , . , . Orchard 1.5, .

Menu.cshtml MenuItem.cshtml , Orchard, , /.

+1

More articles:


All Articles