maggicl/theshell.ch
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

css-team: add dropdowns to nav menu

Browse source 
git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@38 a672b425-5310-4d7a-af5c-997e18724b81
This commit is contained in:
terehm 2018-11-06 08:27:15 +00:00
parent 011e4aa00f
commit aa347a33f6
2 changed files with 64 additions and 14 deletions
site
_includes
header.html
_sass
_header.scss

17
site/_includes/header.html
View file

@ -1,11 +1,18 @@
<div class="menuDesktop">
<span class="boxTitle">
<a href="/index.html"><img src="/assets/style/logo_white.png" height="50"></a>
</span>
<span class="boxItem">
<a href="">Learn</a>
<code>|</code>
<a href="">About</a>
</span>
<nav class="boxItem">
<div>Learn
<ul>
<li>Basic commands</li>
<li>Intermediate commands</li>
<li>Filesystem</li>
<li>Scripting</li>
</ul>
</div>
<code>|</code>
<div>About</div>
</nav>
</div>

61
site/_sass/_header.scss
View file

@ -33,12 +33,55 @@ span {
display: inline-table;
}
.boxItem a, .boxItem code {
display: table-cell;
vertical-align: middle;
color: #6a6;
font-weight: bold;
text-decoration: none;
font-size: 2.3vh;
padding: 0 5px;
}
.boxItem {
div, code {
display: table-cell;
vertical-align: middle;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-size: 20px;
padding: 0 5px;
ul {
/* TODO: if possible, insert a padding-top to move the submenu down such that
the text of the first element starts at the bottom border of the .menuDesktop
*/
display: none;
position: absolute;
list-style: none;
margin-left: -10px;
background-color: #131313;
width: CALC(100% + 20px);
li {
color: #FFFFFF;
margin: 10px;
}
li:hover {
color: #66aa66;
}
}
ul:hover {
display: block;
}
}
code{
cursor: default;
}
div{
cursor: pointer;
}
div:hover{
color: #66aa66;
ul {
display: block;
}
}
}