Team:TU Eindhoven/Style:NavPanel
From 2014.igem.org
(Difference between revisions)
Rafiqlubken (Talk | contribs) |
|||
(168 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | /* Start Initialization */ | |
- | + | ||
- | + | #menubar > ul { | |
- | + | margin:5px 0px 0px 0px; | |
+ | } | ||
- | + | /* End Initialization */ | |
- | + | ||
- | |||
- | |||
- | + | /* Start Removing iGEM Style */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | /* Removing iGEM | + | |
#searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | #searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | ||
- | display: none; | + | display:none; |
} | } | ||
#content { | #content { | ||
- | font-family: 'Open Sans', sans-serif; | + | font-family: 'Open Sans', sans-serif; |
- | width: auto; | + | width:auto; |
padding:0px; | padding:0px; | ||
- | border: none; | + | border:none; |
background:none; | background:none; | ||
} | } | ||
#globalWrapper { | #globalWrapper { | ||
- | width: auto; | + | width:auto; |
padding:0px; | padding:0px; | ||
} | } | ||
- | + | #top-section { | |
- | + | height:10%; | |
- | + | width:100%; | |
- | # | + | border:none; |
- | + | border-top:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | /* End Removing iGEM Style */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* Start Customizing iGEM Menubar */ | |
#menubar { | #menubar { | ||
- | display: table-cell; | + | display:table-cell; |
- | width: | + | width:auto; |
- | height: | + | height:auto; |
opacity:0; | opacity:0; | ||
+ | font-size:14px; | ||
padding-top:5px; | padding-top:5px; | ||
background:none; | background:none; | ||
- | |||
} | } | ||
- | |||
#menubar:hover{ | #menubar:hover{ | ||
- | display: table-cell; | + | display:table-cell; |
- | width: | + | width:auto; |
- | height: auto; | + | height:auto; |
opacity:1; | opacity:1; | ||
- | font-size: 14px; | + | font-size:14px; |
padding-top:5px; | padding-top:5px; | ||
background:none; | background:none; | ||
Line 78: | Line 60: | ||
#menubar.left-menu { | #menubar.left-menu { | ||
- | padding-left:2% | + | padding-top:5px; |
+ | padding-left:2%; | ||
} | } | ||
#menubar.right-menu { | #menubar.right-menu { | ||
text-align: right; | text-align: right; | ||
- | padding-right: | + | padding-right:2%; |
padding-top:5px; | padding-top:5px; | ||
} | } | ||
Line 111: | Line 94: | ||
} | } | ||
- | + | /* End Customizing iGEM Menubar */ | |
- | + | ||
- | + | ||
- | + | /* Start Customizing TU Eindhoven Menubar */ | |
- | + | ||
- | . | + | #cssmenu { |
- | + | background: url('https://static.igem.org/mediawiki/2014/b/b9/Footer_bg_TU_Eindhoven.png'); | |
- | + | margin: 0; | |
- | . | + | width: auto; |
- | + | height: auto; | |
- | + | line-height: 1; | |
- | + | display: block; | |
- | + | padding: 1% 3%; | |
- | + | position: relative; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
font-family: 'Open Sans', sans-serif; | font-family: 'Open Sans', sans-serif; | ||
- | font-size: | + | font-size:18px; |
+ | z-index:110; | ||
+ | } | ||
- | + | #cssmenu ul { | |
+ | list-style: none; | ||
+ | height:auto; | ||
+ | width:auto; | ||
+ | margin:0; | ||
+ | display: block; | ||
+ | } | ||
- | + | #cssmenu ul:after, | |
- | + | #cssmenu:after { | |
+ | content: " "; | ||
+ | display: block; | ||
+ | font-size: 0; | ||
+ | height: 0; | ||
+ | clear: both; | ||
+ | visibility: hidden; | ||
} | } | ||
- | + | ||
- | + | #cssmenu ul li { | |
- | + | margin: 0; | |
+ | padding: 0.8% 0.25% 0% 0.25%; | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | height:66px; | ||
} | } | ||
+ | #cssmenu ul li a { | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | -webkit-transition: color .3s ease; | ||
+ | -moz-transition: color .3s ease; | ||
+ | -ms-transition: color .3s ease; | ||
+ | -o-transition: color .3s ease; | ||
+ | transition: color .3s ease; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
- | / | + | #cssmenu ul li ul { |
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | top: auto; | ||
+ | z-index:100; | ||
+ | background: url('https://static.igem.org/mediawiki/2014/b/b9/Footer_bg_TU_Eindhoven.png'); | ||
+ | } | ||
- | + | #cssmenu ul li ul li { | |
- | + | max-height: 0; | |
+ | position: absolute; | ||
+ | -webkit-transition: max-height 0.3s ease-out; | ||
+ | -moz-transition: max-height 0.3s ease-out; | ||
+ | -ms-transition: max-height 0.3s ease-out; | ||
+ | -o-transition: max-height 0.3s ease-out; | ||
+ | transition: max-height 0.3s ease-out; | ||
+ | } | ||
+ | #cssmenu ul li ul li a { | ||
+ | font-size: 14px; | ||
+ | font-weight: 400; | ||
+ | text-transform: none; | ||
+ | color: #c9c9c9; | ||
+ | letter-spacing: 0; | ||
+ | display: block; | ||
+ | padding: 25px 32px; | ||
+ | -webkit-transition: color .3s ease; | ||
+ | -moz-transition: color .3s ease; | ||
+ | -ms-transition: color .3s ease; | ||
+ | -o-transition: color .3s ease; | ||
+ | transition: color .3s ease; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | #cssmenu ul li ul li:hover > ul { | ||
+ | left: 100%; | ||
+ | top: 0; | ||
+ | } | ||
+ | #cssmenu ul li ul li:hover > ul > li { | ||
+ | position: relative; | ||
+ | max-height: 72px; | ||
} | } | ||
- | |||
- | |||
- | |||
+ | #cssmenu > ul > li { | ||
+ | float: left; | ||
} | } | ||
- | |||
- | |||
+ | #cssmenu.align-center > ul > li { | ||
+ | float: none; | ||
+ | display: inline-block; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | #cssmenu.align-center > ul { | ||
+ | text-align: center; | ||
} | } | ||
- | |||
- | |||
- | |||
+ | #cssmenu.align-center ul ul { | ||
+ | text-align: left; | ||
} | } | ||
+ | |||
+ | #cssmenu.align-right > ul { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | #cssmenu.align-right > ul > li:hover > ul { | ||
+ | left: auto; | ||
+ | right: 0; | ||
+ | } | ||
+ | |||
+ | #cssmenu.align-right ul ul li:hover > ul { | ||
+ | right: 100%; | ||
+ | left: auto; | ||
+ | } | ||
+ | |||
+ | #cssmenu.align-right ul ul li a { | ||
+ | text-align: right; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li:after { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 0; | ||
+ | top: 0; | ||
+ | z-index: 0; | ||
+ | background: none; | ||
+ | -webkit-transition: height .3s; | ||
+ | -moz-transition: height .3s; | ||
+ | -ms-transition: height .3s; | ||
+ | -o-transition: height .3s; | ||
+ | transition: height .3s; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li > a { | ||
+ | color: #c9c9c9; | ||
+ | padding: 15px 20px; | ||
+ | font-weight: 700; | ||
+ | letter-spacing: 1px; | ||
+ | text-transform: uppercase; | ||
+ | z-index: 100; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li:hover:after, #cssmenu > ul > li:active:after { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li:hover > a, #cssmenu > ul > li:active > a { | ||
+ | color: #00BAC6; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li > ul > li:hover > a, #cssmenu > ul > li > ul > li:active > a { | ||
+ | color: #00BAC6; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li > ul > li > ul > li:hover > a, #cssmenu > ul > li > ul > li > ul > li:active > a { | ||
+ | color: #00BAC6; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li > ul > li > ul > li > ul> li:hover > a, #cssmenu > ul > li > ul > li > ul > li > ul> li:active > a { | ||
+ | color: #00BAC6; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li:hover > ul { | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li:hover > ul > li { | ||
+ | max-height: 72px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #cssmenu #menu-button { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li > a { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li { | ||
+ | width:auto; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li.has-sub > ul { | ||
+ | width: 275px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #cssmenu > ul > li.has-sub > ul > li.has-sub > ul { | ||
+ | width: 100%; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /* End Customizing TU Eindhoven Menubar */ |
Latest revision as of 05:23, 13 September 2014
/* Start Initialization */
- menubar > ul {
margin:5px 0px 0px 0px;
}
/* End Initialization */
/* Start Removing iGEM Style */
- searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;
}
- content {
font-family: 'Open Sans', sans-serif; width:auto; padding:0px; border:none; background:none;
}
- globalWrapper {
width:auto; padding:0px;
}
- top-section {
height:10%; width:100%; border:none; border-top:none;
}
/* End Removing iGEM Style */
/* Start Customizing iGEM Menubar */
- menubar {
display:table-cell; width:auto; height:auto; opacity:0; font-size:14px; padding-top:5px; background:none;
}
- menubar:hover{
display:table-cell; width:auto; height:auto; opacity:1; font-size:14px; padding-top:5px; background:none;
}
- menubar.left-menu {
padding-top:5px; padding-left:2%;
}
- menubar.right-menu {
text-align: right; padding-right:2%; padding-top:5px;
}
- menubar.left-menu a {
border: none; color: #454545;
}
- menubar.right-menu a {
border: none; color: #454545;
}
- menubar * {
background: transparent;
}
- menubar * a:hover{
color: #00BAC6; text-decoration: none;
}
- menubar > ul > li:last-child {
display: none;
}
/* End Customizing iGEM Menubar */
/* Start Customizing TU Eindhoven Menubar */
- cssmenu {
background: url('https://static.igem.org/mediawiki/2014/b/b9/Footer_bg_TU_Eindhoven.png'); margin: 0; width: auto; height: auto; line-height: 1; display: block; padding: 1% 3%; position: relative; font-family: 'Open Sans', sans-serif; font-size:18px; z-index:110;
}
- cssmenu ul {
list-style: none; height:auto; width:auto; margin:0; display: block;
}
- cssmenu ul:after,
- cssmenu:after {
content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden;
}
- cssmenu ul li {
margin: 0; padding: 0.8% 0.25% 0% 0.25%; display: block; position: relative; height:66px;
}
- cssmenu ul li a {
text-decoration: none; display: block; margin: 0; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -ms-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
- cssmenu ul li ul {
position: absolute; left: -9999px; top: auto; z-index:100; background: url('https://static.igem.org/mediawiki/2014/b/b9/Footer_bg_TU_Eindhoven.png');
}
- cssmenu ul li ul li {
max-height: 0; position: absolute; -webkit-transition: max-height 0.3s ease-out; -moz-transition: max-height 0.3s ease-out; -ms-transition: max-height 0.3s ease-out; -o-transition: max-height 0.3s ease-out; transition: max-height 0.3s ease-out;
}
- cssmenu ul li ul li a {
font-size: 14px; font-weight: 400; text-transform: none; color: #c9c9c9; letter-spacing: 0; display: block; padding: 25px 32px; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -ms-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
- cssmenu ul li ul li:hover > ul {
left: 100%; top: 0;
}
- cssmenu ul li ul li:hover > ul > li {
position: relative; max-height: 72px;
}
- cssmenu > ul > li {
float: left;
}
- cssmenu.align-center > ul > li {
float: none; display: inline-block;
}
- cssmenu.align-center > ul {
text-align: center;
}
- cssmenu.align-center ul ul {
text-align: left;
}
- cssmenu.align-right > ul {
float: right;
}
- cssmenu.align-right > ul > li:hover > ul {
left: auto; right: 0;
}
- cssmenu.align-right ul ul li:hover > ul {
right: 100%; left: auto;
}
- cssmenu.align-right ul ul li a {
text-align: right;
}
- cssmenu > ul > li:after {
content: ""; display: block; position: absolute; width: 100%; height: 0; top: 0; z-index: 0; background: none; -webkit-transition: height .3s; -moz-transition: height .3s; -ms-transition: height .3s; -o-transition: height .3s; transition: height .3s;
}
- cssmenu > ul > li > a {
color: #c9c9c9; padding: 15px 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; z-index: 100; position: relative;
}
- cssmenu > ul > li:hover:after, #cssmenu > ul > li:active:after {
height: 100%;
}
- cssmenu > ul > li:hover > a, #cssmenu > ul > li:active > a {
color: #00BAC6;
}
- cssmenu > ul > li > ul > li:hover > a, #cssmenu > ul > li > ul > li:active > a {
color: #00BAC6;
}
- cssmenu > ul > li > ul > li > ul > li:hover > a, #cssmenu > ul > li > ul > li > ul > li:active > a {
color: #00BAC6;
}
- cssmenu > ul > li > ul > li > ul > li > ul> li:hover > a, #cssmenu > ul > li > ul > li > ul > li > ul> li:active > a {
color: #00BAC6;
}
- cssmenu > ul > li:hover > ul {
left: 0;
}
- cssmenu > ul > li:hover > ul > li {
max-height: 72px; position: relative;
}
- cssmenu #menu-button {
display: none;
}
- cssmenu > ul > li > a {
display: block;
}
- cssmenu > ul > li {
width:auto;
}
- cssmenu > ul > li.has-sub > ul {
width: 275px; display: block;
}
- cssmenu > ul > li.has-sub > ul > li.has-sub > ul {
width: 100%; display: block;
}
/* End Customizing TU Eindhoven Menubar */