grayson/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dropdown for portfolio

Browse Source
This commit is contained in:
Grayson Riffe 2023-08-27 22:53:34 -05:00
parent b74919bd39
commit a61b33eeba
4 changed files with 60 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
about/index.html
View File

@ -25,7 +25,11 @@
</div>
<nav>
<div><a href="/">Home</a></div>
<div><a href="/nf/">Nothin' Fancy</a></div>
<div class="dropdown-container"><a href="#">Portfolio</a>
<div class="dropdown">
<div><a href="/nf/">Nothin' Fancy</a></div>
</div>
</div>
<div><a href="/resume/" class="notransition">Resume</a></div>
<div class="selectedpage"><a href="#">About</a></div>
</nav>

6
index.html
View File

@ -25,7 +25,11 @@
</div>
<nav>
<div class="selectedpage"><a href="#">Home</a></div>
<div><a href="/nf/">Nothin' Fancy</a></div>
<div class="dropdown-container"><a href="#">Portfolio</a>
<div class="dropdown">
<div><a href="/nf/">Nothin' Fancy</a></div>
</div>
</div>
<div><a href="/resume/" class="notransition">Resume</a></div>
<div><a href="/about/">About</a></div>
</nav>

6
nf/index.html
View File

@ -25,7 +25,11 @@
</div>
<nav>
<div><a href="/">Home</a></div>
<div class="selectedpage"><a href="#">Nothin' Fancy</a></div>
<div class="dropdown-container"><a href="#">Portfolio</a>
<div class="dropdown">
<div class="selectedpage"><a href="#">Nothin' Fancy</a></div>
</div>
</div>
<div><a href="/resume/" class="notransition">Resume</a></div>
<div><a href="/about/">About</a></div>
</nav>

50
style.css
View File

@ -76,16 +76,16 @@ img {
nav {
background-color: #FFFFFF77;
border-radius: 1em;
margin: .5em 0;
margin: 0.5em 0;
display: flex;
}
nav div {
nav>div {
margin: 0.5em;
border-radius: 0.5em;
}
nav div a {
nav>div>a {
display: block;
padding: 0.5em;
font-weight: bold;
@ -99,10 +99,49 @@ nav div.selectedpage {
background-color: grey;
}
nav div:not(.selectedpage):hover {
nav>div:not(.selectedpage):hover,
div.dropdown div:not(.selectedpage):hover {
background-color: #FFFFFF44;
}
div.dropdown-container {
position: relative;
}
div.dropdown {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
background-color: var(--headercolor);
box-sizing: border-box;
border-radius: 0.5em;
border: 0.2em solid black;
flex-direction: column;
align-items: center;
}
div.dropdown div {
margin: 0.2em;
padding: 0.5em;
border-radius: 0.5em;
}
div.dropdown div a {
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
white-space: nowrap;
color: inherit;
}
div.dropdown-container:hover div.dropdown {
display: flex;
}
main {
margin: 0 auto;
margin-top: 7em;
@ -203,7 +242,8 @@ footer {
@media screen and (max-width: 750px) {
nav div a {
nav div a,
div.dropdown div a {
font-size: 3vw;
}