Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ben 1 post 50 karma points
    Jul 29, 2014 @ 21:38
    Ben
    0

    TXT Starter Kit Questions

    Hello,

    New Umbraco user here. Having some trouble with creating dropdown menus in the starter theme. They're present on the theme that you can download here, but they don't seem to be in the Umbraco CSS. I tried to make the CSS as identical as possible to the CSS in the download file, but now I don't know what to do in order to make a dropdown menu from there. Within the umbTopNavigation.cshtml file, there is a variable defined as:

    menuItems = hopePage.Children.Where("UmbracoNaviHide == false");

    and a loop:

    @foreach (var item in menuItems)

    <li class ="@CurrentPage.Id == item.Id ? "current_page_item" : null)"<a href="@item.Url">@item.Name</a></li>

    The thing I don't know how to do is modify the file so that a dropdown menu would display. Is there a way?

  • Bendik Engebretsen 105 posts 202 karma points
    Jan 26, 2015 @ 09:54
    Bendik Engebretsen
    0

    BUMP

    Hi,

    I'm facing the same issue. Did you manage to fix this?

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Jan 26, 2015 @ 10:35
    Dennis Aaen
    0

    Hi Ben and Bendik,

    I think if you extend your umbTopNavigation with this you will get the subpages for each page.

    Then you just need to make some CSS to hide and show it.

    @inherits UmbracoTemplatePage
    @{
        // Model.Content is the current page that we're on
        // AncestorsOrSelf is all of the ancestors this page has in the tree
        // (1) means: go up to level 1 and stop looking for more ancestors when you get there
        // First() gets the first ancestor found (the home page, on level 1)
        var homePage = CurrentPage.AncestorsOrSelf(1).First();

        // The menu items we want are all of the children of the homepage
        // We also check if "Hide in navigation" is on in the menu, we shouldn't show hidden items
        var menuItems = homePage.Children.Where("UmbracoNaviHide == false");
    }
    <!-- Nav -->
    <nav id="nav" class="skel-panels-fixed">
        <ul>
            @* If the Url of the current page is "/" then we want to add the class "current_page_item" *@
            @* Otherwise, we set the class to null, that way it will not even be added to the <li> element *@
            <li class="@(CurrentPage.Url == "/" ? "current_page_item" : null)"><a href="/">Home</a></li>

                @foreach (var item in menuItems)
            {
                @* If the Id of the item is the same as the Id of the current page then we want to add the class "current_page_item" *@
                @* Otherwise, we set the class to null, that way it will not even be added to the <li> element *@
                <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">
                    <a href="@item.Url">@item.Name</a>
                      @if (item.Children.Where("Visible").Any()){                   
                        @* Call our helper to display the children *@
                          <ul>
                          @foreach(var childItem in item.Children.Where("Visible")){
                              <a href="@childItem.Url">
                              <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">@childItem.Name</li>
                            </a>
                          }
                          </ul>
                      }
                </li>
                   
                   
            }
        </ul>
    </nav>
    <!-- /Nav -->

    Hope this helps,

    /Dennis

  • Bendik Engebretsen 105 posts 202 karma points
    Feb 02, 2015 @ 16:41
    Bendik Engebretsen
    0

    Thanks Dennis!

    I actually came up with the same solution myself just a while ago, only I included support for the "Hide in navigation" flag also for child pages. Here's my code:

    @inherits UmbracoTemplatePage
    @{
        var homePage = CurrentPage.AncestorOrSelf(1);
    
        // The menu items we want are all visible children of the homepage
        var menuItems = homePage.Children.Where("UmbracoNaviHide == false");
    }
    <!-- Nav -->
    <nav id="nav" class="skel-panels-fixed">
        <ul>
            @* Add the home page to the menu, highlight if it's the current page *@
            <li class="@(CurrentPage.Id == homePage.Id ? "current_page_item" : null)"><a href="/">@homePage.Name</a></li>
    
            @* Add the child pages of the home page to the menu, highlight the one that is the current page *@
            @foreach (var item in menuItems)
            {
                <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">
                    <a href="@item.Url">@item.Name</a>
                    @{
    
                        // Child pages that should be visible in menu
                        var subMenuItems = item.Children.Where("Visible").Where("UmbracoNaviHide == false");
                        if (subMenuItems.Any())
                        {
                            // Show child pages as a dropdown (popup menu)
                            <ul>
                                @foreach (var subItem in subMenuItems)
                                {
                                    <li><a href="@subItem.Url">@subItem.Name</a></li>
                                }
                            </ul>
                        }
                    }
                </li>
            }
        </ul>
    </nav>
    <!-- /Nav -->

     

    The CSS styling

    What I wanted - and probably expected - from the start, was that the menus of the Umbraco TXT starter kit would look like and function like the menus in HTML5UP's original theme. Hence, after solving the codebehind challenge, I set out to clone his CSS for the dropdown menus. And it turned out to be quite simple, because he has used a jQuery component called droprotron. So basically, I downloaded the original TXT Theme here, and copied over the javascript and css needed for dropotron from it. Here's what you need to do:

    1. Copy jquery.dropotron.min.js to the js folder in your Umbraco site

    2. Also create a new file called init.js in the js folder, and paste in the following code:

    $(function() {
    
    // Dropotron submenus
        $('#nav > ul').dropotron({
            mode: 'fade',
            noOpenerFade: true,
            speed: 300,
            alignment: 'center'
        });
    });
    
    3. Insert the following lines in the head section of your master template (umbLayout.cshtml):
    <script src="/js/jquery.dropotron.min.js"></script>
    <script src="/js/init.js"></script>
    

    4. Add something like the following CSS to your style-desktop.css (change colors etc. to your liking):

    .dropotron {
        background: #b4a792;
        color: #fff;
        border-radius: 6px;
        line-height: 2.75em;
        text-align: center;
        font-family: 'Open Sans Condensed', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        padding: 1em 0;
        text-align: left;
        min-width: 14em;
        margin-top: -1em;
        box-shadow: 0 1em 2em 0 rgba(0,0,0,0.1);
    }
    
        .dropotron li {
        }
    
            .dropotron li > a,
            .dropotron li > span {
                display: block;
                color: #f1f0ee;
                text-decoration: none;
                padding: 0 1.25em;
            }
    
            .dropotron li:hover > a,
            .dropotron li:hover > span,
            .dropotron li.active > a,
            .dropotron li.active > span {
                color: #fff;
                background: #c9c0b2;
            }
    
            .dropotron li:first-child {
                border-top: 0;
            }
    
            .dropotron.level-0 {
                margin-top: 1em;
                font-size: 0.9em;
            }
    
                .dropotron.level-0:before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    margin-left: -1em;
                    top: -0.65em;
                    border-bottom: solid 1em #b4a792;
                    border-left: solid 1em transparent;
                    border-right: solid 1em transparent;
                }   
    

    That's about it, I hope I didn't forget anything. Feel free to comment and elaborate...

    Best,

    Bendik

Please Sign in or register to post replies

Write your reply to:

Draft