Hi guys,
I’m trying to implement 2-level recursive menu: 1st level is dropdown, and the 2nd level should drop to the right.
My current code produces the 2-nd level menu item, but it appears at the bottom of the dropdown items.
CSS for the dropdown items is located in the bootstrap.css. There should be some CSS for the 2nd level items - but it is missing. May be my boostrap.css file lacks some parts? Or should I just create some classes and add them to the style.css?
By the time I get to these recursive elements I’m nearly crazy, so maybe I have some errors there.
Here is the part of my Config.toml:
[[Languages.en.menu.header]]
weight = 3
name = "Desktop"
url = "/products"
[[Languages.en.menu.header]]
parent = "Desktop"
weight = 1
name = "Desktop 01"
url = "/desktop01"
[[Languages.en.menu.header]]
parent = "Desktop 01"
weight = 1
name = "Desktop 001"
url = "/desktop001"
Here is my the html:
<header>
<nav id="navbar" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ .Site.BaseURL }}">
<img src="{{ .Site.BaseURL }}img/logo.png" alt="{{ .Site.Title }} Logo">
</a>
<!-- Language List -->
<ul class="list-inline lang-list">
{{ range $.Site.Home.AllTranslations }}
<li class="list-inline-item"><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{ end }}
</ul>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="{{ .Site.BaseURL }}">{{ .Site.Params.home }}</a></li>
{{ range .Site.Menus.header }}
<li>
{{ if .HasChildren }}
<a href="{{ .URL }}">{{ .Name }}<span class="caret"></span></a>
<ul class="dropdown-menu">
{{ range .Children }}
<li>
{{ if .HasChildren }}
<a href="{{ .URL }}">{{ .Name }}<span class="right-arrow"></span></a>
<ul class="dropdown-menu multi-level">
{{ range .Children }}
<li class="dropdown-submenu"><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
{{ else }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</li>
</li>
{{ end }}
</ul>
{{ else }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</li>
{{ end }}
</ul>
</div>
</div>
</nav>
</header>
Here is CSS:
header {
position: sticky;
z-index: 1030;
width: 100%;
}
header .navbar {
margin-bottom: 0px;
border: 0px;
background: #1d2024;
padding: 0;
position: sticky;
z-index: 1030;
width: 100%;
}
header .navbar-brand {
padding-top: 5px;
}
header .navbar-brand img {
padding-top: 5px;
}
header .navbar-default {
background: #1d2024;
border: 0px;
position: sticky;
z-index: 1030;
width: 100%;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #fff;
background-color: #1d2024;
}
header .navbar-default .navbar-nav {
background: #1d2024;
padding-top: 10px;
}
header .navbar-default .navbar-nav li a {
color: #707d8f;
padding: 7px 20px;
font-family: Montserrat;
font-size: 16 px;
text-transform: uppercase;
}
header .navbar-default .navbar-nav li a:hover {
color: #fff;
background: #1d2024;
}
header .dropdown-menu {
background-color: #1d2024;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
top: 95%;
left: 0px;
z-index: 1030;
float: left;
font-size: 15 px;
min-width: 20rem;
padding: .5rem 0;
margin: .125rem 0 0;
text-align: left;
background-clip: padding-box;
}
/* multilevel */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
Thanks in advance!