Difference between revisions of "Template:HFLS H2Z Hangzhou"

Line 43: Line 43:
  
 
.main.menu .items {
 
.main.menu .items {
margin-top: -10em;
+
margin-top: 6rem;
 
}
 
}
  
Line 54: Line 54:
 
text-align: center;
 
text-align: center;
  
margin-bottom: 1rem;
+
margin-bottom: 2rem;
  
 
border-radius: 50%;
 
border-radius: 50%;
Line 93: Line 93:
 
.main.menu .item:hover {
 
.main.menu .item:hover {
 
border-left-color: #2980B9;
 
border-left-color: #2980B9;
 +
}
 +
 +
.main.menu .sub-items {
 +
display: inline-block;
 +
 +
margin-top: 0.3rem;
 +
 +
height: 0;
 +
overflow: hidden;
 +
 +
transition: height 0.3s;
 +
}
 +
 +
.main.menu .item:hover .sub-items {
 +
height: auto;
 +
}
 +
 +
.main.menu .sub-item {
 +
display: inline-block;
 +
 +
margin-top: 0.7rem;
 +
 +
font-weight: bold;
 +
font-size: 0.9rem;
 +
 +
padding: 0 0.5rem;
 +
 +
color: rgba(240, 240, 240, 1);
 +
 +
border-right: 3px solid transparent;
 +
border-left: 3px solid transparent;
 +
 +
transition: border 0.2s;
 +
}
 +
 +
.main.menu .sub-item:hover {
 
}
 
}
  
Line 280: Line 316:
 
<script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
 
<script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
 
</head>
 
</head>
 +
 +
<style>
 +
#top_menu_14:hover {
 +
top: 0;
 +
}
 +
</style>
  
 
<script>
 
<script>
Line 328: Line 370:
 
// remove some weird components
 
// remove some weird components
 
$("#sideMenu").remove();
 
$("#sideMenu").remove();
$("#top_menu_14").remove();
+
 
 +
$("#top_menu_14").css({
 +
top: -$("#top_menu_14").height() + "px",
 +
"padding-bottom": "1rem",
 +
transition: "top 0.3s"
 +
});
  
 
glob.Aquamade = {};
 
glob.Aquamade = {};
Line 360: Line 407:
 
<div class="main view">
 
<div class="main view">
 
<div class="main menu">
 
<div class="main menu">
<div class="items vcenter">
+
<div class="items">
 
<div class="logo"><i class="fa fa-bath"></i></div><br>
 
<div class="logo"><i class="fa fa-bath"></i></div><br>
<div class="item item-home">HOME</div><br>
+
<div style="text-align: center; display: inline-block; width: auto;">
<div class="item item-project">PROJECT</div><br>
+
<div class="item item-home">HOME</div><br>
<div class="item item-parts">PARTS</div><br>
+
<div class="item item-project">
<div class="item item-model">MODELLING</div><br>
+
PROJECT<br>
<div class="item item-hprac">HUMAN PRACTICES</div><br>
+
<div class="sub-items">
<div class="item item-team">TEAM</div><br>
+
<div class="sub-item">OVERVIEW</div><br>
 +
<div class="sub-item">RESULTS</div><br>
 +
<div class="sub-item">PROFF</div>
 +
</div>
 +
</div><br>
 +
<div class="item item-parts">PARTS</div><br>
 +
<div class="item item-model">MODELLING</div><br>
 +
<div class="item item-hprac">HUMAN PRACTICES</div><br>
 +
<div class="item item-team">TEAM</div><br>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>

Revision as of 01:11, 17 June 2017