"
Template:Team:Sheffield/NavigationBar
From 2014.igem.org
(Difference between revisions)
| Line 162: | Line 162: | ||
.pageSection2 { | .pageSection2 { | ||
background-color: #EBEBEB; | background-color: #EBEBEB; | ||
| + | } | ||
| + | |||
| + | .socialMediaIcon { | ||
| + | position: relative; | ||
| + | width: 40px; | ||
| + | height: 40px; | ||
| + | } | ||
| + | |||
| + | .whiteIcon, .blackIcon, .colouredIcon { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | width: 40px; | ||
| + | height: 40px; | ||
| + | } | ||
| + | |||
| + | .whiteIcon { | ||
| + | z-index: 0; | ||
| + | } | ||
| + | |||
| + | .blackIcon { | ||
| + | z-index: 1; | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | |||
| + | .colouredIcon { | ||
| + | z-index: 2; | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | |||
| + | .socialMediaIcon:hover > .whiteIcon { | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | |||
| + | .socialMediaIcon:hover > .colouredIcon { | ||
| + | visibility: visible; | ||
| + | } | ||
| + | |||
| + | .whiteIcon.scrolling { | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | |||
| + | .blackIcon.scrolling { | ||
| + | visibility: visible; | ||
} | } | ||
</style> | </style> | ||
| Line 171: | Line 215: | ||
$("#teamLogo li a img").addClass("scrolling"); | $("#teamLogo li a img").addClass("scrolling"); | ||
$("#navigationBar > li > ul > li > a").addClass("scrolling"); | $("#navigationBar > li > ul > li > a").addClass("scrolling"); | ||
| - | + | $(".whiteIcon").addClass("scrolling"); | |
| + | $(".blackIcon").addClass("scrolling"); | ||
} else { | } else { | ||
$("#navigationBar").removeClass("scrolling"); | $("#navigationBar").removeClass("scrolling"); | ||
| Line 177: | Line 222: | ||
$("#teamLogo li a img").removeClass("scrolling"); | $("#teamLogo li a img").removeClass("scrolling"); | ||
$("#navigationBar > li > ul > li > a").removeClass("scrolling"); | $("#navigationBar > li > ul > li > a").removeClass("scrolling"); | ||
| + | $(".whiteIcon").removeClass("scrolling"); | ||
| + | $(".blackIcon").removeClass("scrolling"); | ||
} | } | ||
}); | }); | ||
| Line 200: | Line 247: | ||
<ul id="navigationBar"> | <ul id="navigationBar"> | ||
<li><a href=""><img id="igemLogo" src="https://static.igem.org/mediawiki/2014/7/7d/IGEMLogo.png"></a></li> | <li><a href=""><img id="igemLogo" src="https://static.igem.org/mediawiki/2014/7/7d/IGEMLogo.png"></a></li> | ||
| + | <a href=""> | ||
| + | <div class="socialMediaIcon"> | ||
| + | <img class="whiteIcon" src="https://static.igem.org/mediawiki/2014/2/29/FacebookWhite.png"> | ||
| + | <img class="blackIcon" src="https://static.igem.org/mediawiki/2014/b/b6/FacebookBlack.png"> | ||
| + | <img class="colouredIcon" src="https://static.igem.org/mediawiki/2014/1/1b/FacebookColour.png"> | ||
| + | </div> | ||
| + | </a> | ||
<li class="menuText"><a href="">Attributions ▾</a> | <li class="menuText"><a href="">Attributions ▾</a> | ||
<ul> | <ul> | ||
Revision as of 15:14, 14 September 2014
