Projects/nettsiden
Projects
/
nettsiden
8
2
Fork 0
Code Issues 15 Pull Requests 2 Activity

Prevent strange jumping when opening menu, and add hover effects

This commit is contained in:
Yorin Anne De Jong 2018-02-13 18:17:41 +01:00
parent 528ea62f38
commit edde8b6927
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
www/css/style.css
View File

@ -22,10 +22,10 @@ h1, h2, h3, h4, h5, h6, li, a.btn, p.login{
} }
nav, #menu { nav, #menu {
background: #024;
padding: 0; padding: 0;
} }
nav { nav {
background: #024;
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0; top: 0;
@ -106,6 +106,7 @@ nav #usermenu:target {
nav #menu li.active { nav #menu li.active {
top: -3em; /* -3em for absolute, 0 for fixed.. huh? */ top: -3em; /* -3em for absolute, 0 for fixed.. huh? */
left: 0; left: 0;
background: transparent;
} }
nav { nav {
@ -124,15 +125,29 @@ nav #usermenu:target {
right: 0; right: 0;
padding: 0; padding: 0;
} }
nav #menu:target {
top: 0;
padding-top: 3em;
}
nav #menu li, nav #menu li a { nav #menu li, nav #menu li a {
margin-left: 0; margin-left: 0;
display: block; display: block;
} }
nav #menu, nav #menu li.active a { nav #menu li a {
padding-left: 1em; padding-left: 1em;
} }
nav #menu li { nav #menu li {
display: none; display: none;
background: #024;
}
nav #menu li:hover {
background: #1a3957;
}
nav #menu li.active:hover {
background: transparent;
}
nav #menu:target li.active:hover {
background: rgba(255,255,255,.1);
} }
nav #menu:target li, nav #menu li.active { nav #menu:target li, nav #menu li.active {
display: block; display: block;
@ -146,6 +161,7 @@ nav #usermenu:target {
} }
nav #menu:target li.active { nav #menu:target li.active {
right: 0; right: 0;
top: 0;
} }
nav #menu_toggle { nav #menu_toggle {
text-align: center; text-align: center;