jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-10 10:56:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add navigation sub-menu (#16520)

Browse Source
This commit is contained in:
Franck Nijhof 2021-02-12 11:03:23 +01:00 committed by GitHub
parent 99a444cdb5
commit 000412f776
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 120 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
sass/oscailte/base/_navigation.scss
View File

@ -7,23 +7,70 @@
Functional Styles (Required)
---------------------------------*/
/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
.header { position: relative; }
#toggle, .toggle { display: none; }
.menu li { list-style: none; float:left; }
.header {
position: relative;
}
#toggle,
.toggle {
display: none;
}
.menu li {
list-style: none;
float: left;
}
$menu-collapse: 944px;
// @media only screen and (max-width: $lap-end){
@media only screen and (max-width: $menu-collapse) {
.menu { display: none; opacity: 0; width: 100%; position: absolute; 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; }
.menu {
display: none;
opacity: 0;
width: 100%;
position: absolute;
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 */
@ -51,8 +98,10 @@ ul.menu li {
a {
display: block;
padding: 20px 10px;
min-width: 150px;
&:hover, &:focus {
&:hover,
&:focus {
background: $grayLighter;
}
}
@ -83,7 +132,8 @@ header .grid {
line-height: 1;
}
.menu > li > a:hover, .menu > li > a:focus{
.menu > li > a:hover,
.menu > li > a:focus {
background: $site-background;
box-shadow: inset 0px 5px $navigation-color;
color: $navigation-color;
@ -102,7 +152,9 @@ header .grid {
border-bottom: 4px solid $navigation-color;
}
.menu, .menu li, .menu li a{
.menu,
.menu li,
.menu li a {
height: auto;
}
@ -110,7 +162,8 @@ header .grid {
padding: 15px 15px !important;
}
.menu li a:hover, .menu li a:focus{
.menu li a:hover,
.menu li a:focus {
background: $grayLighter;
box-shadow: inset 5px 0px $navigation-color;
padding: 15px 15px 15px 25px;

53
source/_includes/site/header.html
View File

@ -2,41 +2,62 @@
<div class="grid">
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-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>
</a>
</div>
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
<nav>
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
<input type="checkbox" id="toggle" />
<label
for="toggle"
class="toggle"
data-open="Main Menu"
data-close="Close Menu"
></label>
<ul class="menu pull-right">
{% comment %}
Example dropdown menu
<li><a href="/getting-started/">Getting started</a></li>
<li>
<a>Getting started <i class="icon icon-caret-down"></i></a>
<a href="/docs/"
>Documentation <i class="icon icon-caret-down"></i
></a>
<ul>
<li><a href="/getting-started/">Installing Home Assistant</a></li>
<li><a href="/getting-started/configuration/">Configuration Basics</a></li>
<li><a href="/installation/">Installation</a></li>
<li>
<a href="/docs/configuration/">Configuration</a>
</li>
<li>
<a href="/docs/automation/">Automation</a>
</li>
<li>
<a href="/docs/scripts/">Scripting</a>
</li>
<li>
<a href="/lovelace/">User Interface</a>
</li>
</ul>
</li>
{% endcomment %}
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/integrations/">Integrations</a></li>
<li><a href="/docs/">Documentation</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>
<li>
<a href="#" class="show-search"><i class="icon-search"></i></a>
</li>
</ul>
</nav>
<div class='search-container' style='display: none'>
<div class='search'>
<div class="search-container" style="display: none">
<div class="search">
<i class="icon-search"></i>
<input id='search' placeholder='Search the documentation…'>
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
<input id="search" placeholder="Search the documentation…" />
<a href="#" class="close"><i class="icon-remove-sign"></i></a>
</div>
</div>
</div>