Team:UCLondon/Templates/links-footer

From 2012e.igem.org

(Difference between revisions)
(Created page with "<html> <div id="footer-links"> <p class="left">Morph Bioinformatics</p> <ul class="piped right"> <li><a href="#">Home</a></li> <li><a href="#">Downloads</a...")
 
(47 intermediate revisions not shown)
Line 2: Line 2:
<div id="footer-links">
<div id="footer-links">
-
<p class="left">Morph Bioinformatics</p>
+
      <div id="foot-icon1"></div>
-
<ul class="piped right">
+
                <div class="vertical">
 +
<p class="left-footer">Morph Bioinformatics</p>
 +
<ul class="right-footer">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Downloads</a></li>
Line 9: Line 11:
<li><a href="#">Job Opportunities</a></li>
<li><a href="#">Job Opportunities</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Contact Us</a></li>
 +
                                                <li><a href="#">MediaWiki</a><ul class='mediawiki-footer'><li>item1</li></ul></li>
</ul>
</ul>
 +
                  </div>
 +
        <div id="foot-icon2"></div>
</div>
</div>
Line 15: Line 20:
<style type="text/css">
<style type="text/css">
 +
        #foot-icon1 { float: left; }
 +
        #foot-icon2 { float: left; }
 +
#footer-links * {
 +
padding:0;
 +
margin: 0;
 +
list-style-type:none;
 +
    }
 +
 +
   
 +
    #footer-links a { 
 +
text-decoration: none;
 +
}
 +
 +
#footer-links ul li ul {
 +
border: solid 1px #b4b4b4;
 +
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 +
background: white;
 +
}
 +
 +
#footer-links ul li ul li a {
 +
padding-top:3px;
 +
padding-bottom:3px;
 +
}
 +
#footer-links ul li {
 +
float: left;
 +
}
 +
#footer-links ul li a {
 +
//font-weight: bold;
 +
padding: 15px 10px;
 +
}
 +
#footer-links li{
 +
position:relative;
 +
float:left;
 +
}
 +
#footer-links ul li ul, #footer-links:hover ul li ul, #footer-links:hover ul li:hover ul li ul{
 +
display:none;
 +
list-style-type:none;
 +
width: 140px;
 +
 +
}
 +
#footer-links:hover ul, #footer-links:hover ul li:hover ul, #footer-links:hover ul li:hover ul li:hover ul {
 +
display:block;
 +
}
 +
#footer-links:hover ul li:hover ul li:hover ul {
 +
position: absolute;
 +
margin-left: 145px;
 +
margin-top: -22px;
 +
//font: 10px;
 +
}
 +
#footer-links:hover ul li:hover ul {
 +
position: absolute;
 +
margin-top: 1px;
 +
//font: 10px;
 +
bottom:100%;
 +
}
 +
 +
 +
#footer-links .left-footer {
 +
float:left;
 +
                margin-left:10px;
 +
}
 +
 +
#footer-links .right-footer {
 +
list-style: none;
 +
float:left;
 +
}
 +
 +
#footer-links .right-footer li {
 +
display: inline;
 +
float:left;
 +
border-right: solid 1px rgb(229, 229, 229);
 +
padding-right: 5px;
 +
padding-left: 5px;
 +
}
 +
 +
#footer-links .right-footer li:last-child {
 +
border:none;
 +
padding-right: none;
 +
}
 +
 +
#footer-links ul li ul li { border: none;  }
 +
 +
 +
      #footer-links { width:90%; margin-left:auto; margin-right:auto;  bottom:5px;}
 +
      // .vertical { display:table-cell; vertical-align:centre; }
</style>
</style>
 +
 +
<script>
 +
 +
$(document).ready(function() {
 +
 +
// get links from mwiki footer and put into our footer
 +
 +
var myarr = $('#footer-box > #footer').children().filter('#f-list');
 +
var mystr = "";
 +
var i = 0;
 +
 +
for (i=0; i < myarr.length; i++){
 +
mystr += myarr[i].innerHTML;
 +
}
 +
 +
$('.mediawiki-footer').html(mystr);
 +
 +
 +
//get icons and put into our footer
 +
 +
$('#foot-icon2').html(  $('#f-copyrightico').html()  );
 +
$('#foot-icon1').html(  $('#f-poweredbyico').html()  );
 +
 +
$('#footer-box').css('display', 'none');
 +
 +
});
 +
 +
</script>
</html>
</html>

Latest revision as of 04:04, 15 September 2012