I'm trying to use a checkbox dropdown style menu to house all my site content on one page. The basic idea is that the dropdown submenus will contain the content related to it's label (about, links, etc) for a light site. I'm trying to achieve this all with CSS only.
The first submenu (ABOUT) displays nicely, but the submenu that follows it aligns all the content with it's related label, which makes sense obviously.
However, the effect I would like to achieve is have each submenu's positioning take up the entire width of the viewport and always align with the left of the screen, as it does when ABOUT is clicked.
Here is my codepen.
https://codepen.io/maxineheadroom/pen/gxPzpE
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: \201C \201D \2018 \2019;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
button,
html input[type=button],
/* 1 */
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
padding: 0;
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body,
figure {
margin: 0;
}
legend,
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
header,
footer,
section {
overflow: hidden;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
}
/*////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////*/
header {
/* background-color: blue;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;*/
overflow: hidden;
height: 100vh;
max-width: 2000px;
}
.navigation {
background: #161616;
height: 10vh;
display: flex;
align-content: flex-end;
color: white;
}
a {
color: white;
}
.menuNav {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 250px;
color: white;
list-style-type: none;
}
/* shout out to Andrea Tondo for the incredible drop down effect sans JS ===> https://codepen.io/Tont/
Style for the first level menu bar*/
ul#menu {
position: fixed;
top: 0;
width: 100%;
height: 10vh;
margin: 0;
color: #eee;
}
ul {
display: flex;
align-items: flex-end;
}
ul#menu > li {
float: left;
list-style-type: none;
position: relative;
}
label {
position: relative;
padding: 0 18px 0 12px;
cursor: pointer;
}
label:after {
content: "";
position: absolute;
display: block;
top: 50%;
right: 5px;
width: 0;
height: 0;
}
/*hide the inputs*/
input {
display: none;
}
/*show the second level menu of the selected voice*/
input:checked ~ div.submenu {
max-height: 100vh;
transition: max-height 0.8s ease-in;
}
/*style for the second level menu*/
.submenu {
height: 100vh;
}
div.submenu {
max-height: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
background: rgba(0, 0, 0, 0.83);
transition: max-height 0.2s ease-out;
position: absolute;
width: 100vw;
}
div.submenu li a {
display: block;
padding: 12px;
color: #ddd;
text-decoration: none;
box-shadow: 0 -1px rgba(0, 0, 0, .5) inset;
transition: background .3s;
white-space: nowrap;
}
@keyframes delay {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="navigation">
<ul id="menu">
<li class="about">
<input id="check01" type="radio" name="menu" />
<label for="check01">ABOUT</label>
<div class="submenu">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nam, autem eligendi tempora non dicta ullam! Deserunt similique cum et impedit dolorem dignissimos necessitatibus ducimus, fuga beatae nemo ipsam quidem.</div>
</div>
</li>
<li class="link">
<input id="check02" type="radio" name="menu" />
<label for="check02">LINK</label>
<div class="submenu">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nam, autem eligendi tempora non dicta ullam! Deserunt similique cum et impedit dolorem dignissimos necessitatibus ducimus, fuga beatae nemo ipsam quidem.</div>
</div>
</li>
</ul>
</div>You were almost there in your codepen, your sub-menu was already utilising position: absolute;, which then just needed a left:0;.
The above fix however was hindered by the position:relative; on your menu li elements. Once you removed these, it works perfectly.
Here's an adjusted version of your codepen, the code I changed was:
ul#menu > li{
float:left;
list-style-type:none;
/*position: relative;*/
}
and
div.submenu{
max-height:0;
padding:0;
overflow:hidden;
list-style-type:none;
background: rgba(0, 0, 0, 0.83);
transition:max-height 0.2s ease-out;
position:absolute;
width:100vw;
left: 0; /*this was added*/
}
Here's a full working example:
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
*{margin:0; padding:0;
}
header,
footer,
section {
overflow: hidden;
}
html{
font-size: 62.5%;
}
body{
font-size: 1.6rem;
}
img{
max-width: 100%;
display: block;
}
a{
text-decoration: none;
}
/*////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////*/
header{
/* background-color: blue;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;*/
overflow: hidden;
height: 100vh;
max-width: 2000px;
}
.navigation{
background: #161616;
height: 10vh;
display: flex;
align-content: flex-end;
color: white;
}
a{
color: white;
}
.menuNav{
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 250px;
color: white;
list-style-type: none;
}
/* shout out to Andrea Tondo for the incredible drop down effect sans JS ===> https://codepen.io/Tont/
Style for the first level menu bar*/
ul#menu{
position:fixed;
top:0;
width:100%;
height: 10vh;
margin:0;
color:#eee;
}
ul{
display: flex;
align-items: flex-end;
}
ul#menu > li{
float:left;
list-style-type:none;
}
label{
position:relative;
padding:0 18px 0 12px;
cursor:pointer;
}
label:after{
content:"";
position:absolute;
display:block;
top:50%;
right:5px;
width:0;
height:0;
}
/*hide the inputs*/
input{display:none}
/*show the second level menu of the selected voice*/
input:checked ~ div.submenu{
max-height:100vh;
transition:max-height 0.8s ease-in;
}
/*style for the second level menu*/
.submenu{
height: 100vh;
}
div.submenu{
max-height:0;
padding:0;
overflow:hidden;
list-style-type:none;
background: rgba(0, 0, 0, 0.83);
transition:max-height 0.2s ease-out;
position:absolute;
width:100vw;
left: 0;
}
div.submenu li a{
display:block;
padding:12px;
color:#ddd;
text-decoration:none;
box-shadow:0 -1px rgba(0,0,0,.5) inset;
transition:background .3s;
white-space:nowrap;
}
@keyframes delay{
0%{opacity: 0;}
60%{opacity: 0;}
99%{opacity: 0;}
100%{opacity:1;}
}*/<div class="navigation">
<ul id="menu">
<li class="about">
<input id="check01" type="checkbox" name="menu"/>
<label for="check01">ABOUT</label>
<div class="submenu">
<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nam, autem eligendi tempora non dicta ullam! Deserunt similique cum et impedit dolorem dignissimos necessitatibus ducimus, fuga beatae nemo ipsam quidem.</div>
</div>
</li>
<li class="LINK">
<input id="check02" type="checkbox" name="menu"/>
<label for="check02">LINK</label>
<div class="submenu">
<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nam, autem eligendi tempora non dicta ullam! Deserunt similique cum et impedit dolorem dignissimos necessitatibus ducimus, fuga beatae nemo ipsam quidem.</div>
</div>
</li>
</ul>
</div>