xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

More navigation improvements

Browse Source
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2022-03-06 09:21:47 +01:00
parent 4e0ad981d8
commit 3aa37ea7cd
3 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/navigation.liquid
+4 -4
View File
@@ -1,10 +1,6 @@
<ul class="menu">
{% for entry in include.data %}
<li id="{{ entry[0] }}" class="entry {% if entry[1].entries != nil %}has-menu {% endif %}">
{% if entry[1].entries != nil %}
{% assign data=entry[1].entries %}
{% include navigation.liquid data=data %}
{% endif %}
{% if entry[1].url != nil %}
<a class="item" href="{{ entry[1].url | absolute_url }}" {% if entry[1].blank %}target="_blank"{% endif %}>
{% else %}
@@ -16,6 +12,10 @@
{% else %}
</span>
{% endif %}
{% if entry[1].entries != nil %}
{% assign data=entry[1].entries %}
{% include navigation.liquid data=data %}
{% endif %}
</li>
{% endfor %}
</ul>
_sass/_base.scss
+1
View File
@@ -8,6 +8,7 @@ $theme-header-logo-height: 90px;
$theme-header-background: hsl($theme-hue, 0%, 7.5%);
$theme-header-color: hsl($theme-hue, 100%, 99%);
$theme-menu-background: hsl($theme-hue, 0%, 6.5%);
$theme-menu-light-background: hsl($theme-hue, 33%, 13.0%);
$theme-menu-color: hsl($theme-hue, 0%, 85%);
$theme-menu-color-active: hsl($theme-hue, 0%, 100%);
$theme-article-background: hsl($theme-hue, 50%, 10%);
_sass/_header.scss
+32 -21
View File
@@ -92,6 +92,16 @@
#navigation .menu > .entry > .item:focus {
color: $theme-menu-color-active;
}
#navigation .menu > .entry > .item {
/* Menu - Entry Style */
display: block;
padding: .67em .67em;
white-space: nowrap;
cursor: pointer;
}
#navigation .menu > .entry > span.item {
cursor: default;
}
// Responsive Layout
@media (max-width: 767px), (hover: none), (hover: on-demand) {
@@ -129,11 +139,14 @@
background: $theme-menu-background;
box-shadow: 2px 2px 5px 0px black;
}
#navigation .menu .menu > .entry > .item:hover,
#navigation .menu .menu > .entry > .item:focus,
#navigation .menu .menu > .entry > .item:active {
/* Menu - Entry Style Hover/Active */
background: $theme-menu-light-background;
}
#navigation .item {
display: block;
padding: 1.0rem 0rem;
//border: 1px solid $theme-menu-background;
transition: color 250ms linear;
}
}
@@ -170,18 +183,11 @@
cursor: default;
}
#navigation .menu > .entry > span,
#navigation .menu > .entry > a {
/* Menu - Link Style */
display: block;
padding: .67em .67em;
white-space: nowrap;
cursor: pointer;
}
#navigation .menu > .entry > span {
cursor: default;
#navigation .menu > .entry:hover,
#navigation .menu > .entry:focus,
#navigation .menu > .entry:active {
/* Menu - Entry Style Hover/Active */
background: $theme-menu-light-background;
}
#navigation .has-menu > .menu {
@@ -203,6 +209,7 @@
#navigation .has-menu > .menu:focus,
#navigation .has-menu:active > .menu,
#navigation .has-menu > .menu:active {
/* Menu - Sub-menu Style (Active) */
display: block;
pointer-events: auto;
@@ -222,8 +229,7 @@
#navigation .has-menu > .menu > .has-menu > .menu {
/* Menu - Sub-Menu in Sub-Menu */
left: calc(100% - .5em);
//right: -200px;
margin-top: -2.75em;
z-index: 2;
}
@@ -239,13 +245,18 @@
display: inline-block;
padding: 0.25em 0;
margin: 0;
background: transparent;
}
#navigation > .menu > .entry:hover,
#navigation > .menu > .entry:active,
#navigation > .menu > .entry:focus {
background: transparent;
}
#navigation > .menu > .has-menu > .menu {
top: 1.50em;
top: 2.0em;
}
#navigation > .menu > .entry > span,
#navigation > .menu > .entry > a {
padding: 0 .5em 0 0;
#navigation > .menu > .entry > .item {
padding: .5em .25em;
}