Support sub-menu navigation (#72)

This commit is contained in:
George Cushen 2016-12-31 14:05:29 +00:00
commit 59116be74e
3 changed files with 87 additions and 9 deletions

View file

@ -95,6 +95,8 @@ It is possible to carry out many customizations without touching any files in `t
The `[[menu.main]]` entries towards the bottom of `config.toml` define the navigation links at the top of the website. They can be added or removed as desired.
To create a dropdown sub-menu, add `identifier = "something"` to the parent item and `parent = "something"` to the child item.
### Website icon
Save your main icon and mobile icon as square PNG images named `icon.png` and `apple-touch-icon.png`, respectively. Place them in your root `static/img/` folder.

View file

@ -19,11 +19,35 @@
<!-- Left Nav Bar -->
<ul class="nav navbar-nav navbar-right">
{{ range .Site.Menus.main }}
<li class="nav-item">
<a href="{{ .URL | relURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
{{ if .HasChildren }}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
{{ .Name }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
{{ range .Children }}
<li>
<a href="{{ .URL | relURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{end}}
</ul>
</li>
{{ else }}
<li>
<a href="{{ .URL | relURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
{{ end }}
</ul>

View file

@ -493,7 +493,7 @@ article {
/*************************************************
* Talks
* Talks
**************************************************/
.talk-event {
@ -823,6 +823,25 @@ nav#navbar-main li {
padding-bottom: 10px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #34495e;
white-space: nowrap;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
color: #fff;
text-decoration: none;
background-color: #0095eb;
outline: 0;
}
.navbar-default .navbar-brand {
text-transform: uppercase;
font-weight: bold;
@ -863,12 +882,6 @@ nav#navbar-main li {
display: block;
}
.navbar-collapse {
background-color: rgba(0,0,0,0.1);
border-radius: 5px;
margin-bottom: 5px;
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
@ -893,6 +906,45 @@ nav#navbar-main li {
line-height: normal;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #34495e;
white-space: nowrap;
}
.navbar-default .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
padding: 5px 15px 5px 25px;
line-height: 20px;
color: #34495e;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
color: inherit;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover {
color: #0095eb;
background-color: transparent;
}
.collapse.in {
display: block !important;
}