downdown menu

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Mike Dorst 53 posts 215 karma points

Nov 08, 2017 @ 12:06

I made a menu for umbraco but I can't get the dropdown to work! Below is my code:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

                    <div class="NavDigiCampuz">
                        <div>
                            <div class="nav nav-list tree">
                                @{                                  
                                    var documentRootNodeId = Model.Content.GetPropertyValue("documentRoot", true); // Fetch recursive document root id.
                                    var selection = Umbraco.TypedContent(documentRootNodeId).Children.Where("Visible"); // Select all nodes below the document root.
                                }

                                @foreach(var item in Model.Content.Ancestor(1).Descendants("menu")){
                                    foreach (var Menus in @item.Descendants("menuItem")){
                                        <li class="MenuItems">@Menus.Name</li>  
                                            foreach (var MenuItems in @Menus.Children){
                                                if(MenuItems.GetPropertyValue("hoofdstukIcoon") != "") {
                                                <li><a class="NormalA" href="@MenuItems.Url"><i class="fa fa-@(MenuItems.GetPropertyValue("hoofdstukIcoon")) fa-fw"></i> @MenuItems.Name</a></li>
                                                    }else {
                                                            <li><a class="NormalA"href="@MenuItems.Url">@MenuItems.Name</a></li>



                                                var childIsActive = false;

                                                    foreach(var sub in @MenuItems.Children){
                                                    if (CurrentPage.Url == sub.Url) {
                                                        childIsActive = true;
                                                    }



                                            <ul class="nav subnav nav-list tree @(childIsActive ? "" : "collapse")">
                                                @foreach(var sub2 in @MenuItems.Children){
                                                    <li @(CurrentPage.Url == sub.Url ? "class=active" : "")>
                                                        <a onclick="parent.resizeParent();" href="@sub.Url">@(sub.GetPropertyValue("hoofdstukMenuTitel") != "" ? sub.GetPropertyValue("hoofdstukMenuTitel") : sub.GetPropertyValue("hoofdstukTitel"))</a>
                                                    </li>
                                                }
                                            </ul>
                                            }
                                        }
                                    }
                                }
                                }
                            </ul>
                            </div>
                        </div>
                    </div>

The dropdown code should start at <ul class="nav subnav nav-list tree @(childIsActive ? "" : "collapse")"> but that doesn't seem to work.

Below is a quick structure of how I want my page to be:

Help item 3 should have a dropdown which it doesn't have right now. What am I missing?+

Copy Link

Steve Morgan 1349 posts 4458 karma points c-trib

Nov 08, 2017 @ 16:03
0
Careful with your razor @ tags...

I think you need to correct
```
@foreach(var sub2 in @MenuItems.Children){
```
To
```
@foreach(var sub2 in MenuItems.Children){
```
Also
```
foreach (var Menus in @item.Descendants("menuItem")){
```
should probably be
```
@foreach (var Menus in item.Descendants("menuItem")){
```
The general rule of thumb is you need only an '@' when you are "out" of what I call "razor mode". This is usually when you're not in a @{ } block or when you have opened some HTML tag.. then razor is only expecting more HTML until you say @[HEREISSOMERAZOR] either with a @ { } block or as you're doign with inline @(somevariable.GetPropertyValue<...)

If you're already in "razor mode" then you don't need @ signs in fact it just tends to cause weird bugs e.g. for variables and the like.

I hope that makes sense.

Steve
Copy Link
Mike Dorst 53 posts 215 karma points

Nov 08, 2017 @ 16:23

0

Thanks for the answer! Both unfortunately did not give me a dropdown box. The second foreach should be without the @ because it errors on that. Thanks for trying to help out though!

Copy Link
Steve Morgan 1349 posts 4458 karma points c-trib

Nov 08, 2017 @ 17:19
0
hi,

Rereading your post - you expect a dropdown why? You're outputting html for a list so unless you have some JS that runs on the page or some CSS that styles it heavily it's always going to look like a sublist?!?

To make a dropdown you need to output some markup like:
```
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
```
Copy Link
is working on a reply...

Please Sign in or register to post replies