Difference between revisions of "Template:HSNU-TAIPEI/nav"

Line 3: Line 3:
  
 
.main-nav {
 
.main-nav {
−
position: relative;
+
position: fixed;
 
width: 100%;
 
width: 100%;
−
height: 80px;
+
/*height: 80px;*/
 +
min-height: 50px;
 
z-index: 100;
 
z-index: 100;
 
box-shadow: 0 2px 3px rgba(0,0,0,.4);
 
box-shadow: 0 2px 3px rgba(0,0,0,.4);
 
background: #fff;
 
background: #fff;
 +
padding-top: 50px;
 
}
 
}
  
 
.main-nav h3 {
 
.main-nav h3 {
 
position: absolute;
 
position: absolute;
−
top: 25%;
+
top: 40%;
 
left: 5%;
 
left: 5%;
 
margin: 0;
 
margin: 0;
 
}
 
}
  
−
.main-nav > ul,
+
.main-nav ul {
−
.main-nav li {
+
 
margin: 0;
 
margin: 0;
 
}
 
}
  
 
.main-nav > ul {
 
.main-nav > ul {
−
display: flex;
+
display: none;
−
flex-flow: row wrap;
+
/*flex-flow: row wrap;*/
 +
flex-flow: column nowrap;
 
justify-content: center;
 
justify-content: center;
 
align-items: center;
 
align-items: center;
Line 34: Line 36:
  
 
.main-nav li {
 
.main-nav li {
−
position: relative;
 
 
list-style: none;
 
list-style: none;
−
margin: 0 3%;
+
/*margin: 0 3%;*/
 +
text-align: center;
 +
 
 +
/* Responsive */
 +
margin: 8px 0;
 
}
 
}
  
Line 44: Line 49:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
color: #67459f;
 
color: #67459f;
 +
/*font-size: 1rem;*/
 +
font-size: 1.25rem;
 
}
 
}
  
 
.selected {
 
.selected {
 
border-bottom: 2px solid #f07057;
 
border-bottom: 2px solid #f07057;
 +
}
 +
 +
.next-layer {
 +
position: relative;
 
}
 
}
  
Line 55: Line 66:
 
}
 
}
  
−
/* Sub-Layer NAV */
+
/* SUB-NAV FOR SMALLER SCREEN */
  
 
.sub-layer {
 
.sub-layer {
−
position: absolute;
+
position: relative;
−
top: 200%;
+
margin: 10px 0 !important;
−
margin: 0;
+
padding: 0 10px;
−
padding: 0;
+
background: #e5e5e5;
−
z-index: 150;
+
box-shadow: inset 0 0 2px 2px #d3d3d3;
−
width: 150px;
+
−
border: 2px solid #bcbcbc;
+
 
border-radius: 5px;
 
border-radius: 5px;
−
background: #fff;
 
 
display: none;
 
display: none;
−
}
 
−
 
−
.sub-layer::before {
 
−
content: "";
 
−
width: 0;
 
−
height: 0;
 
−
border-left: 10px solid transparent;
 
−
border-right: 10px solid transparent;
 
−
border-bottom: 10px solid #bcbcbc;
 
−
position: absolute;
 
−
left: 30%;
 
−
margin-top: -10px;
 
−
z-index: 200;
 
 
}
 
}
  
 
.sub-layer li {
 
.sub-layer li {
 
width: 100%;
 
width: 100%;
−
margin: 10px 0;
+
margin: 0;
−
padding: 5px;
+
padding: 10px 0;
−
border-bottom: 1px solid #bcbcbc;
+
 
}
 
}
  
 
.sub-layer a {
 
.sub-layer a {
 
display: block;
 
display: block;
−
width: inherit;
+
width: 100%;
−
text-align: left;
+
margin: 0 auto;
 
}
 
}
  
−
.sub-layer li:last-child {
+
/* Menu Button */
−
border-bottom: none;
+
 
 +
#menu-btn {
 +
position: absolute;
 +
right: 20px;
 +
top: 0.25rem;
 +
color: #000;
 +
width: 48px;
 +
height: 48px;
 +
font-size: 32px;
 +
}
 +
 
 +
.menu-open {
 +
display: -webkit-flex !important;
 +
display: -moz-flex !important;
 +
display: -ms-flex !important;
 +
display: -o-flex !important;
 +
display: flex !important;
 +
}
 +
 
 +
 
 +
/* Media Queries for LARGE SCREEN */
 +
 
 +
@media screen and (min-width: 960px) {
 +
.main-nav {
 +
height: 80px;
 +
padding: 0;
 +
}
 +
 
 +
.main-nav > ul {
 +
display: flex;
 +
flex-flow: row wrap;
 +
}
 +
 
 +
.main-nav > ul > li {
 +
margin: 0 3%;
 +
}
 +
 
 +
.main-nav a {
 +
font-size: 1rem;
 +
}
 +
 
 +
#menu-btn {
 +
display: none;
 +
}
 +
 +
/* Sub-Layer NAV */
 +
 +
.sub-layer {
 +
position: absolute;
 +
top: 150%;
 +
left: 0;
 +
padding: 0;
 +
border: none;
 +
border-radius: 0;
 +
margin: 0;
 +
z-index: 150;
 +
min-width: 140px;
 +
width: 100%;
 +
box-shadow: 0px 2px 3px 1px rgba(0,0,0,.4);
 +
background: #fff;
 +
display: none;
 +
}
 +
 +
.sub-layer li {
 +
padding: 0;
 +
}
 +
 +
.sub-layer a {
 +
text-align: left;
 +
padding: 10px;
 +
border-bottom: 1px solid #eee;
 +
transition: all 0.8s ease;
 +
}
 +
 +
.sub-layer a:hover {
 +
color: #fff;
 +
background: #67459f;
 +
border-bottom-color: #67459f;
 +
}
 +
 +
.sub-layer li:last-child a {
 +
border-bottom: none;
 +
}
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 12:42, 3 June 2015