tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove extra divs for hamburger nav

Browse Source
This commit is contained in:
Arthur Lu 2023-05-11 06:13:00 +00:00
parent 6b08ca1df7
commit 4124b88b42
5 changed files with 32 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
account.html
View File

@ -13,14 +13,12 @@
<body> <body>
<header> <header>
<h1>tronnet</h1> <h1>tronnet</h1>
<nav id="hamnav"> <label for="navtoggle">&#9776;</label>
<label for="hamburger">&#9776;</label> <input type="checkbox" id="navtoggle">
<input type="checkbox" id="hamburger"> <nav>
<div id="hamitems"> <a href="index.html">Instances</a>
<a href="index.html">Instances</a> <a href="account.html" aria-current="true">Account</a>
<a href="account.html" aria-current="true">Account</a> <a href="login.html">Logout</a>
<a href="login.html">Logout</a>
</div>
</nav> </nav>
</header> </header>
<main> <main>

14
config.html
View File

@ -14,14 +14,12 @@
<body> <body>
<header> <header>
<h1>tronnet</h1> <h1>tronnet</h1>
<nav id="hamnav"> <label for="navtoggle">&#9776;</label>
<label for="hamburger">&#9776;</label> <input type="checkbox" id="navtoggle">
<input type="checkbox" id="hamburger"> <nav>
<div id="hamitems"> <a href="index.html" aria-current="true">Instances</a>
<a href="index.html" aria-current="true">Instances</a> <a href="account.html">Account</a>
<a href="account.html">Account</a> <a href="login.html">Logout</a>
<a href="login.html">Logout</a>
</div>
</nav> </nav>
</header> </header>
<main> <main>

20
css/nav.css
View File

@ -39,23 +39,23 @@ nav {
font-size: larger; font-size: larger;
} }
nav a, header h1, nav label { nav a, header h1, label[for="navtoggle"] {
text-align: left; text-align: left;
padding: 8px 10px; padding: 8px 10px;
text-decoration: none; text-decoration: none;
} }
#hamnav label, #hamburger { label[for="navtoggle"], #navtoggle {
display: none; display: none;
} }
@media screen and (min-width: 600px){ @media screen and (min-width: 600px){
#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover { nav a:hover, nav a[aria-current="true"], nav:hover a[aria-current="true"]:hover {
color: var(--nav-link-active-text-color); color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color); background-color: var(--nav-link-active-bg-color);
} }
#hamitems:hover a[aria-current="true"] { nav:hover a[aria-current="true"] {
color: var(--nav-text-color); color: var(--nav-text-color);
background-color: var(--nav-bg-color); background-color: var(--nav-bg-color);
} }
@ -65,7 +65,7 @@ nav a, header h1, nav label {
align-items: center; align-items: center;
} }
#hamitems { nav {
display: flex; display: flex;
} }
} }
@ -76,7 +76,7 @@ nav a, header h1, nav label {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }
#hamitems { nav {
display: block; display: block;
position: absolute; position: absolute;
top: 43px; top: 43px;
@ -84,18 +84,18 @@ nav a, header h1, nav label {
background-color: var(--nav-bg-color); background-color: var(--nav-bg-color);
} }
#hamitems a { nav a {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
#hamnav label { label[for="navtoggle"] {
display: inline-block; display: inline-block;
} }
#hamburger ~ #hamitems a { #navtoggle ~ nav a {
height: 0; height: 0;
padding: 0 0.5em; padding: 0 0.5em;
border: 0; border: 0;
@ -103,7 +103,7 @@ nav a, header h1, nav label {
visibility: hidden; visibility: hidden;
} }
#hamburger:checked ~ #hamitems a { #navtoggle:checked ~ nav a {
height: 2.5em; height: 2.5em;
padding: 0.5em; padding: 0.5em;
transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1); transition: height 250ms cubic-bezier(0.23, 1, 0.32, 1);

14
index.html
View File

@ -15,14 +15,12 @@
<body> <body>
<header> <header>
<h1>tronnet</h1> <h1>tronnet</h1>
<nav id="hamnav"> <label for="navtoggle">&#9776;</label>
<label for="hamburger">&#9776;</label> <input type="checkbox" id="navtoggle">
<input type="checkbox" id="hamburger"> <nav>
<div id="hamitems"> <a href="index.html" aria-current="true">Instances</a>
<a href="index.html" aria-current="true">Instances</a> <a href="account.html">Account</a>
<a href="account.html">Account</a> <a href="login.html">Logout</a>
<a href="login.html">Logout</a>
</div>
</nav> </nav>
</header> </header>
<main> <main>

10
login.html
View File

@ -13,12 +13,10 @@
<body> <body>
<header> <header>
<h1>tronnet</h1> <h1>tronnet</h1>
<nav id="hamnav"> <label for="navtoggle">&#9776;</label>
<label for="hamburger">&#9776;</label> <input type="checkbox" id="navtoggle">
<input type="checkbox" id="hamburger"> <nav>
<div id="hamitems"> <a href="login.html" aria-current="true">Login</a>
<a href="login.html" aria-current="true">Login</a>
</div>
</nav> </nav>
</header> </header>
<main class="flex" style="justify-content: center; align-items: center;"> <main class="flex" style="justify-content: center; align-items: center;">