mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-10 10:56:49 +00:00
Add navigation sub-menu (#16520)
This commit is contained in:
Franck Nijhof
GitHub
parent
99a444cdb5
commit
000412f776
@ -7,23 +7,70 @@
|
|||||||
Functional Styles (Required)
|
Functional Styles (Required)
|
||||||
---------------------------------*/
|
---------------------------------*/
|
||||||
/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
|
/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
|
||||||
body{ -webkit-animation: bugfix infinite 1s; }
|
body {
|
||||||
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
|
-webkit-animation: bugfix infinite 1s;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes bugfix {
|
||||||
|
from {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.header { position: relative; }
|
.header {
|
||||||
#toggle, .toggle { display: none; }
|
position: relative;
|
||||||
.menu li { list-style: none; float:left; }
|
}
|
||||||
|
#toggle,
|
||||||
|
.toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.menu li {
|
||||||
|
list-style: none;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
$menu-collapse: 944px;
|
$menu-collapse: 944px;
|
||||||
|
|
||||||
// @media only screen and (max-width: $lap-end){
|
// @media only screen and (max-width: $lap-end){
|
||||||
@media only screen and (max-width: $menu-collapse){
|
@media only screen and (max-width: $menu-collapse) {
|
||||||
.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
|
.menu {
|
||||||
.menu li { display: block; width: 100%; margin: 0; }
|
display: none;
|
||||||
.menu li a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
opacity: 0;
|
||||||
.menu li a .icon { display: none; }
|
width: 100%;
|
||||||
.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
|
position: absolute;
|
||||||
#toggle:checked ~ .menu { display: block; opacity: 1; z-index: 999; }
|
right: 0;
|
||||||
|
}
|
||||||
|
.menu li {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.menu li a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.menu li a .icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.toggle {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
#toggle:checked ~ .menu {
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* support for submenus */
|
/* support for submenus */
|
||||||
@ -51,8 +98,10 @@ ul.menu li {
|
|||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 20px 10px;
|
padding: 20px 10px;
|
||||||
|
min-width: 150px;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
background: $grayLighter;
|
background: $grayLighter;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -72,7 +121,7 @@ header .grid {
|
|||||||
top: 138px;
|
top: 138px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu li a{
|
.menu li a {
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
@include transition(all 0.25s linear);
|
@include transition(all 0.25s linear);
|
||||||
display: block;
|
display: block;
|
||||||
@ -83,7 +132,8 @@ header .grid {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu > li > a:hover, .menu > li > a:focus{
|
.menu > li > a:hover,
|
||||||
|
.menu > li > a:focus {
|
||||||
background: $site-background;
|
background: $site-background;
|
||||||
box-shadow: inset 0px 5px $navigation-color;
|
box-shadow: inset 0px 5px $navigation-color;
|
||||||
color: $navigation-color;
|
color: $navigation-color;
|
||||||
@ -91,26 +141,29 @@ header .grid {
|
|||||||
padding-bottom: 24px;
|
padding-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle{
|
.toggle {
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: $menu-collapse){
|
@media only screen and (max-width: $menu-collapse) {
|
||||||
.menu{
|
.menu {
|
||||||
background: $white;
|
background: $white;
|
||||||
border-top: 1px solid $navigation-color;
|
border-top: 1px solid $navigation-color;
|
||||||
border-bottom: 4px solid $navigation-color;
|
border-bottom: 4px solid $navigation-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu, .menu li, .menu li a{
|
.menu,
|
||||||
|
.menu li,
|
||||||
|
.menu li a {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu li a{
|
.menu li a {
|
||||||
padding: 15px 15px !important;
|
padding: 15px 15px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu li a:hover, .menu li a:focus{
|
.menu li a:hover,
|
||||||
|
.menu li a:focus {
|
||||||
background: $grayLighter;
|
background: $grayLighter;
|
||||||
box-shadow: inset 5px 0px $navigation-color;
|
box-shadow: inset 5px 0px $navigation-color;
|
||||||
padding: 15px 15px 15px 25px;
|
padding: 15px 15px 15px 25px;
|
||||||
@ -146,11 +199,11 @@ header .grid {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle:hover::after{
|
.toggle:hover::after {
|
||||||
background: darken($navigation-color, 7%);
|
background: darken($navigation-color, 7%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#toggle:checked + .toggle::after{
|
#toggle:checked + .toggle::after {
|
||||||
content: attr(data-close);
|
content: attr(data-close);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,41 +2,62 @@
|
|||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
|
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
|
||||||
<a href="/" class="site-title">
|
<a href="/" class="site-title">
|
||||||
<img src="/images/home-assistant-logo.svg" width="36" height="36" alt="Home Assistant">
|
<img
|
||||||
|
src="/images/home-assistant-logo.svg"
|
||||||
|
width="36"
|
||||||
|
height="36"
|
||||||
|
alt="Home Assistant"
|
||||||
|
/>
|
||||||
<span>{{ site.title }}</span>
|
<span>{{ site.title }}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
|
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
|
||||||
<nav>
|
<nav>
|
||||||
<input type="checkbox" id="toggle">
|
<input type="checkbox" id="toggle" />
|
||||||
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
|
<label
|
||||||
|
for="toggle"
|
||||||
|
class="toggle"
|
||||||
|
data-open="Main Menu"
|
||||||
|
data-close="Close Menu"
|
||||||
|
></label>
|
||||||
<ul class="menu pull-right">
|
<ul class="menu pull-right">
|
||||||
{% comment %}
|
<li><a href="/getting-started/">Getting started</a></li>
|
||||||
Example dropdown menu
|
<li>
|
||||||
|
<a href="/docs/"
|
||||||
|
>Documentation <i class="icon icon-caret-down"></i
|
||||||
|
></a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/installation/">Installation</a></li>
|
||||||
<li>
|
<li>
|
||||||
<a>Getting started <i class="icon icon-caret-down"></i></a>
|
<a href="/docs/configuration/">Configuration</a>
|
||||||
<ul>
|
|
||||||
<li><a href="/getting-started/">Installing Home Assistant</a></li>
|
|
||||||
<li><a href="/getting-started/configuration/">Configuration Basics</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
</li>
|
||||||
{% endcomment %}
|
<li>
|
||||||
<li><a href="/getting-started/">Getting started</a></li>
|
<a href="/docs/automation/">Automation</a>
|
||||||
<li><a href="/integrations/">Integrations</a></li>
|
</li>
|
||||||
<li><a href="/docs/">Documentation</a></li>
|
<li>
|
||||||
<li><a href="/cookbook/">Examples</a></li>
|
<a href="/docs/scripts/">Scripting</a>
|
||||||
<li><a href="/blog/">Blog</a></li>
|
</li>
|
||||||
<li><a href="/help/">Need help?</a></li>
|
<li>
|
||||||
<li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
|
<a href="/lovelace/">User Interface</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="/integrations/">Integrations</a></li>
|
||||||
|
<li><a href="/cookbook/">Examples</a></li>
|
||||||
|
<li><a href="/blog/">Blog</a></li>
|
||||||
|
<li><a href="/help/">Need help?</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="show-search"><i class="icon-search"></i></a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class='search-container' style='display: none'>
|
<div class="search-container" style="display: none">
|
||||||
<div class='search'>
|
<div class="search">
|
||||||
<i class="icon-search"></i>
|
<i class="icon-search"></i>
|
||||||
<input id='search' placeholder='Search the documentation…'>
|
<input id="search" placeholder="Search the documentation…" />
|
||||||
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
|
<a href="#" class="close"><i class="icon-remove-sign"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user