[PATCH 2 of 3] Responsive menu.
Liam Crilly
l.crilly at f5.com
Mon Jul 24 14:25:16 UTC 2023
# HG changeset patch
# User Liam Crilly <liam.crilly at nginx.com>
# Date 1690207285 -3600
# Mon Jul 24 15:01:25 2023 +0100
# Node ID c4018ab31dc52632f470298fcc7cece1fd8f57b9
# Parent df1cf98cf8f50eb1770d966aed583d21e481558b
Responsive menu.
Nav menu is now hidden on narrow displays, collapsing to a "hamburger"
menu icon in the banner. Menu items are now an unordered list instead of
simple text markup.
diff -r df1cf98cf8f5 -r c4018ab31dc5 css/style_en.css
--- a/css/style_en.css Mon Jul 24 14:59:57 2023 +0100
+++ b/css/style_en.css Mon Jul 24 15:01:25 2023 +0100
@@ -29,10 +29,22 @@
#menu {
float: right;
- width: 11em;
- padding: 0 .5em 1em .5em;
+ width: 13em;
+ padding: 0;
border-left: 2px solid #DDD;
}
+.nav ul{
+ margin:0;
+ padding:20px;
+}
+.nav h1{
+ padding:0 20px;
+}
+.nav ul li{
+ list-style-type:none;
+ padding:0;
+ margin:0;
+}
#content {
margin-right: 13.5em;
@@ -43,9 +55,7 @@
display: block;
font-size: 3em;
text-align: left;
- height: .7em;
- margin: 0;
- margin-bottom: .5em;
+ margin: 0.5rem 0 0 0;
}
h1 img {
@@ -205,3 +215,125 @@
width:100%;
height:100%;
}
+
+ at media screen and (max-width:768px) {
+ #main {
+ padding: 20px;
+ min-width: inherit;
+ }
+ #main #content {
+ width: 100%!important;
+ padding: 0;
+ border: none;
+ }
+
+ #banner-content {
+ max-width: 70vw;
+ }
+
+ #menu {
+ text-align: left;
+ }
+
+ /* Menu Mobile */
+ :root {
+ --white: #f9f9f9;
+ --black: #000;
+ --gray: #85888C;
+ --green: #b6d7a8;
+ color-scheme: light dark;
+ } /* variables*/
+
+ /* Nav menu */
+ .nav {
+ width: 15rem;
+ height: 100%;
+ max-height: 0;
+ position: fixed;
+ top: 50px;
+ right: 0;
+ border-left: 1px solid #909090;
+ background-color: var(--white);
+ overflow: hidden;
+ transition: .5s ease-in-out;
+ }
+ .nav ul {
+ margin: 0;
+ padding: 20px;
+ }
+ .nav h1 {
+ padding: 0 20px;
+ }
+ .nav ul li {
+ list-style-type: none;
+ padding:0;
+ margin:0;
+ }
+
+ .hamb {
+ cursor: pointer;
+ float: right;
+ position: absolute;
+ top: 0;
+ right: 20px;
+ height: 30px;
+ width: 70px;
+ padding-left: 20px;
+ padding-top: 20px;
+ z-index: 1100;
+ }
+ .hamb-line {
+ background: var(--green);
+ display: block;
+ height: 5px;
+ position: relative;
+ width: 44px;
+ border-radius:3px;
+
+ }
+ .hamb-line::before,.hamb-line::after {
+ background: var(--green);
+ content: '';
+ display: block;
+ height: 100%;
+ position: absolute;
+ transition: all .2s ease-in-out;
+ width: 100%;
+ border-radius:3px;
+ }
+ .hamb-line::before{
+ top: 10px;
+ }
+ .hamb-line::after{
+ top: -10px;
+ }
+ .side-menu {
+ display: none;
+ } /* Hide checkbox */
+ .side-menu:checked ~ .nav{
+ max-height: 100%;
+ top: 50px;
+
+ }
+ .side-menu:checked ~ .hamb .hamb-line {
+ background: transparent;
+ }
+ .side-menu:checked ~ .hamb .hamb-line::before {
+ transform: rotate(-45deg);
+ top: 0;
+ }
+ .side-menu:checked ~ .hamb .hamb-line::after {
+ transform: rotate(45deg);
+ top: 0;
+ }
+
+ code {
+ white-space: pre-line;
+ }
+}
+
+ at media screen and (min-width:768px){
+ .side-menu,.hamb-line {
+ display: none;
+ }
+}
diff -r df1cf98cf8f5 -r c4018ab31dc5 css/style_ru.css
--- a/css/style_ru.css Mon Jul 24 14:59:57 2023 +0100
+++ b/css/style_ru.css Mon Jul 24 15:01:25 2023 +0100
@@ -29,10 +29,22 @@
#menu {
float: right;
- width: 11em;
- padding: 0 .5em 1em .5em;
+ width: 13em;
+ padding: 0;
border-left: 2px solid #DDD;
}
+.nav ul{
+ margin:0;
+ padding:20px;
+}
+.nav h1{
+ padding:0 20px;
+}
+.nav ul li{
+ list-style-type:none;
+ padding:0;
+ margin:0;
+}
#content {
margin-right: 13.5em;
@@ -43,9 +55,7 @@
display: block;
font-size: 3em;
text-align: left;
- height: .7em;
- margin: 0;
- margin-bottom: .5em;
+ margin: 0.5rem 0 0 0;
}
h1 img {
@@ -205,3 +215,125 @@
width:100%;
height:100%;
}
+
+ at media screen and (max-width:768px) {
+ #main {
+ padding: 20px;
+ min-width: inherit;
+ }
+ #main #content {
+ width: 100%!important;
+ padding: 0;
+ border: none;
+ }
+
+ #banner-content {
+ max-width: 70vw;
+ }
+
+ #menu {
+ text-align: left;
+ }
+
+ /* Menu Mobile */
+ :root {
+ --white: #f9f9f9;
+ --black: #000;
+ --gray: #85888C;
+ --green: #b6d7a8;
+ color-scheme: light dark;
+ } /* variables*/
+
+ /* Nav menu */
+ .nav {
+ width: 15rem;
+ height: 100%;
+ max-height: 0;
+ position: fixed;
+ top: 50px;
+ right: 0;
+ border-left: 1px solid #909090;
+ background-color: var(--white);
+ overflow: hidden;
+ transition: .5s ease-in-out;
+ }
+ .nav ul {
+ margin: 0;
+ padding: 20px;
+ }
+ .nav h1 {
+ padding: 0 20px;
+ }
+ .nav ul li {
+ list-style-type: none;
+ padding:0;
+ margin:0;
+ }
+
+ .hamb {
+ cursor: pointer;
+ float: right;
+ position: absolute;
+ top: 0;
+ right: 20px;
+ height: 30px;
+ width: 70px;
+ padding-left: 20px;
+ padding-top: 20px;
+ z-index: 1100;
+ }
+ .hamb-line {
+ background: var(--green);
+ display: block;
+ height: 5px;
+ position: relative;
+ width: 44px;
+ border-radius:3px;
+
+ }
+ .hamb-line::before,.hamb-line::after {
+ background: var(--green);
+ content: '';
+ display: block;
+ height: 100%;
+ position: absolute;
+ transition: all .2s ease-in-out;
+ width: 100%;
+ border-radius:3px;
+ }
+ .hamb-line::before{
+ top: 10px;
+ }
+ .hamb-line::after{
+ top: -10px;
+ }
+ .side-menu {
+ display: none;
+ } /* Hide checkbox */
+ .side-menu:checked ~ .nav{
+ max-height: 100%;
+ top: 50px;
+
+ }
+ .side-menu:checked ~ .hamb .hamb-line {
+ background: transparent;
+ }
+ .side-menu:checked ~ .hamb .hamb-line::before {
+ transform: rotate(-45deg);
+ top: 0;
+ }
+ .side-menu:checked ~ .hamb .hamb-line::after {
+ transform: rotate(45deg);
+ top: 0;
+ }
+
+ code {
+ white-space: pre-line;
+ }
+}
+
+ at media screen and (min-width:768px){
+ .side-menu,.hamb-line {
+ display: none;
+ }
+}
diff -r df1cf98cf8f5 -r c4018ab31dc5 xsls/banner.xsls
--- a/xsls/banner.xsls Mon Jul 24 14:59:57 2023 +0100
+++ b/xsls/banner.xsls Mon Jul 24 15:01:25 2023 +0100
@@ -21,7 +21,7 @@
fetch("!banner_link ()")
.then((response) => response.text())
.then((resp) => \{
- document.getElementById("banner").innerHTML = resp;
+ document.getElementById("banner-content").innerHTML = resp;
\})
.catch((error) => \{
console.warn(error);
diff -r df1cf98cf8f5 -r c4018ab31dc5 xsls/body.xsls
--- a/xsls/body.xsls Mon Jul 24 14:59:57 2023 +0100
+++ b/xsls/body.xsls Mon Jul 24 15:01:25 2023 +0100
@@ -18,20 +18,27 @@
<body>
<div id="banner">
+ <div id="banner-content"></div>
</div>
<div id="main">
- <div id="menu">
+ <div id="menu" >
+ <input class="side-menu" type="checkbox" id="side-menu"/>
+ <label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
+ <nav class="nav">
<h1>
X:if "@lang = 'he'" { X:attribute "align" { X:text{left} } }
<a href="/">
- <img src="/nginx.png" alt="nginx" />
+ <img src="/nginx.png" alt="nginx"/>
</a>
</h1>
<div>
- !! "document(concat($XML, '/menu.xml'))
+ <ul class="mobilemenu">
+ !! "document(concat($XML, '/menu.xml'))
/menus/menu[@lang = $lang]/item";
+ </ul>
</div>
+ </nav>
</div>
<div id="content">
diff -r df1cf98cf8f5 -r c4018ab31dc5 xsls/menu.xsls
--- a/xsls/menu.xsls Mon Jul 24 14:59:57 2023 +0100
+++ b/xsls/menu.xsls Mon Jul 24 15:01:25 2023 +0100
@@ -13,6 +13,8 @@
-- "menu/item[@href = $LINK]", etc.
-->
+ <li>
+
X:if "@href = $LINK" {
X:if "$YEAR and @href='/'" {
<a href="./"> news </a> <br/>
@@ -21,7 +23,6 @@
}
} else {
-
<!--
-- If a menu item has the switchlang attribute, then it will point
-- to the same document in the specified language.
@@ -66,33 +67,34 @@
X:if "@lang" { X:text { [} !{@lang} X:text {]}}
}
-
- <br/>
}
+ </li>
}
X:template = "menu/item[@year]" {
X:if "$YEAR or $LINK='/'" {
+ <li>
X:if "$YEAR=@year" {
- !{@year} <br/>
+ !{@year}
} else {
X:if "@href" { <a href="{@href}"> !{@year} </a> }
- <br/>
}
+ </li>
}
}
X:template = "menu/item[starts-with(@href, 'http://') or starts-with(@href, 'https://')]" {
+ <li>
<a href="{@href}"> !{ normalize-space(text()) } </a>
X:if "@lang" { X:text { [} !{@lang} X:text {]}}
- <br/>
+ </li>
}
X:template = "menu/item[not(@href) and not(@year)]" {
- !{ normalize-space(text()) } <br/>
+ <li>!{ normalize-space(text()) } <br/></li>
}
}
diff -r df1cf98cf8f5 -r c4018ab31dc5 xsls/style.xsls
--- a/xsls/style.xsls Mon Jul 24 14:59:57 2023 +0100
+++ b/xsls/style.xsls Mon Jul 24 15:01:25 2023 +0100
@@ -7,6 +7,7 @@
X:template style (lang) {
+ <meta name="viewport" content="width=device-width,initial-scale=1"></meta>
<link rel="stylesheet" href="/css/style_{$lang}.css"></link>
}
More information about the nginx-devel
mailing list