schulze/schulzestudio
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

menu styling

Browse Source
This commit is contained in:
Thefeli73 2020-01-16 02:33:56 +01:00
parent 50af5e5fb4
commit 6cbde5a562
3 changed files with 51 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/css/layout/_nav.scss
View File

@ -25,9 +25,49 @@
opacity: 0;
position: fixed;
color: _palette(white);
bottom: 100%;
right: 100%;
margin: 0 -50% -50% 0;
bottom: 100vh;
right: 0;
left: 0;
margin: 0 auto -50vh;
li {
transform: translate3d(0,0,0);
margin: 0 40%;
&:before {
@include vendor('transition', (
'width #{_duration(transition)} ease',
));
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
background-color: _palette(white);
width: 0;
}
&:after {
opacity: 0;
content: attr(data-text);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
color: _palette(menu);
}
&:hover {
&:before {
left: 0;
right: auto;
width: 100%;
}
&:after {
opacity: 1;
}
}
}
}
> span {
@ -71,7 +111,9 @@
cursor: pointer;
height: 80px;
padding: 10px 23.1px;
left: calc(50% - 60px);
left: 0;
right: 0;
margin: auto;
&:hover {
@include vendor('filter', 'grayscale(0)');
@ -156,7 +198,6 @@
> a > #logo > img {
height: 60px;
padding: 7.5px 17.3px;
left: calc(50% - 45px);
}
> #menuToggle {

8
src/index.html
View File

@ -50,10 +50,10 @@
<div id="menu">
<span></span>
<ul>
<li>loll</li>
<li>xdd</li>
<li>loll</li>
<li>xdd</li>
<li data-text="Home">Home</li>
<li data-text="Websites">Websites</li>
<li data-text="Websites">Websites</li>
<li data-text="Websites">Websites</li>
</ul>
</div>