Team:UGent/Templates/Navigation

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<!DOCTYPE HTML>
+
<head>
 +
<script type="text/javascript">
-
<!--//*********************
+
var tabdropdown={
-
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
+
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
-
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
+
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
-
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
+
enableiframeshim: 1, //1 or 0, for true or false
-
*********************/
+
-
//Update: April 12th, 10: Fixed compat issue with jquery 1.4x
+
//No need to edit beyond here////////////////////////
 +
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
 +
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)
-
//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
+
getposOffset:function(what, offsettype){
-
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}-->
+
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
 +
var parentEl=what.offsetParent;
 +
while (parentEl!=null){
 +
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
 +
parentEl=parentEl.offsetParent;
 +
}
 +
return totaloffset;
 +
},
-
<script type="text/javascript">
+
showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
-
var jqueryslidemenu={
+
if (this.ie || this.firefox)
 +
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
 +
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
 +
if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
 +
obj2.parentNode.className="selected"
 +
obj.visibility="visible"
 +
}
 +
else if (e.type=="click")
 +
obj.visibility="hidden"
 +
},
-
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
+
iecompattest:function(){
 +
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 +
},
-
buildmenu:function(menuid, arrowsvar){
+
clearbrowseredge:function(obj, whichedge){
-
jQuery(document).ready(function($){
+
var edgeoffset=0
-
var $mainmenu=$("#"+menuid+">ul")
+
if (whichedge=="rightedge"){
-
var $headers=$mainmenu.find("ul").parent()
+
var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
-
$headers.each(function(i){
+
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
-
var $curobj=$(this)
+
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
-
var $subul=$(this).find('ul:eq(0)')
+
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
-
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
+
}
-
this.istopheader=$curobj.parents("ul").length==1? true : false
+
else{
-
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
+
var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
-
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
+
var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
-
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
-
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
-
+ '" style="border:0;" />'
+
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
-
)
+
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
-
$curobj.hover(
+
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
-
function(e){
+
}
-
var $targetul=$(this).children("ul:eq(0)")
+
this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
-
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
+
}
-
var menuleft=this.istopheader? 0 : this._dimensions.w
+
return edgeoffset
-
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
+
},
-
if ($targetul.queue().length<=1) //if 1 or less queued animations
+
-
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
+
-
},
+
-
function(e){
+
-
var $targetul=$(this).children("ul:eq(0)")
+
-
$targetul.slideUp(jqueryslidemenu.animateduration.out)
+
-
}
+
-
) //end hover
+
-
$curobj.click(function(){
+
-
$(this).children("ul:eq(0)").hide()
+
-
})
+
-
}) //end $headers.each()
+
-
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
+
-
}) //end document.ready
+
-
}
+
-
}
+
-
//build menu with ID="myslidemenu" on page:
+
dropit:function(obj, e, dropmenuID){
-
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
+
if (this.dropmenuobj!=null){ //hide previous menu
 +
this.dropmenuobj.style.visibility="hidden" //hide menu
 +
if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
 +
if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
 +
this.previousmenuitem.parentNode.className=""
 +
}
 +
}
 +
this.clearhidemenu()
 +
if (this.ie||this.firefox){
 +
obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
 +
obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
 +
this.dropmenuobj=document.getElementById(dropmenuID)
 +
this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
 +
this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
 +
this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
 +
this.showhide(this.dropmenuobj.style, e, obj)
 +
this.dropmenuobj.x=this.getposOffset(obj, "left")
 +
this.dropmenuobj.y=this.getposOffset(obj, "top")
 +
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
 +
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
 +
this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
 +
this.positionshim() //call iframe shim function
 +
}
 +
},
 +
contains_firefox:function(a, b) {
 +
while (b.parentNode)
 +
if ((b = b.parentNode) == a)
 +
return true;
 +
return false;
 +
},
 +
 +
dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
 +
var evtobj=window.event? window.event : e
 +
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
 +
this.delayhidemenu(obj2)
 +
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
 +
this.delayhidemenu(obj2)
 +
},
 +
 +
delayhidemenu:function(obj2){
 +
this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
 +
},
 +
 +
clearhidemenu:function(){
 +
if (this.delayhide!="undefined")
 +
clearTimeout(this.delayhide)
 +
},
 +
 +
positionshim:function(){ //display iframe shim function
 +
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
 +
if (this.dropmenuobj.style.visibility=="visible"){
 +
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
 +
this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
 +
this.shimobject.style.left=this.dropmenuobj.style.left
 +
this.shimobject.style.top=this.dropmenuobj.style.top
 +
}
 +
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
 +
}
 +
},
 +
 +
hideshim:function(){
 +
if (this.enableiframeshim && typeof this.shimobject!="undefined")
 +
this.shimobject.style.display='none'
 +
},
 +
 +
isSelected:function(menuurl){
 +
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
 +
return (tabdropdown.currentpageurl==menuurl)
 +
},
 +
 +
init:function(menuid, dselected){
 +
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
 +
var menuitems=document.getElementById(menuid).getElementsByTagName("a")
 +
for (var i=0; i<menuitems.length; i++){
 +
if (menuitems[i].getAttribute("rel")){
 +
var relvalue=menuitems[i].getAttribute("rel")
 +
document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
 +
menuitems[i].onmouseover=function(e){
 +
var event=typeof e!="undefined"? e : window.event
 +
tabdropdown.dropit(this, event, this.getAttribute("rel"))
 +
}
 +
}
 +
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
 +
menuitems[i].parentNode.className+=" selected default"
 +
var setalready=true
 +
}
 +
else if (parseInt(dselected)==i)
 +
menuitems[i].parentNode.className+=" selected default"
 +
}
 +
}
 +
 +
}
</script>
</script>
<style>
<style>
-
 
+
.ddcolortabs{
-
.jqueryslidemenu{
+
padding: 0;
-
font: bold 12px Verdana;
+
-
background: #414141;
+
width: 100%;
width: 100%;
 +
background: transparant;
 +
voice-family: "\"}\"";
 +
voice-family: inherit;
}
}
-
.jqueryslidemenu ul{
+
.ddcolortabs ul{
-
margin: 0;
+
font: normal 11px Arial, Verdana, sans-serif;
-
padding: 0;
+
margin:0;
-
list-style-type: none;
+
padding:0;
 +
background: #ffffff;
 +
list-style:none;
}
}
-
/*Top level list items*/
+
.ddcolortabs li{
-
.jqueryslidemenu ul li{
+
display:inline;
-
position: relative;
+
margin:0 2px 0 0;
-
display: inline;
+
padding:0;
-
float: left;
+
text-transform:uppercase;
}
}
-
/*Top level menu link items style*/
+
 
-
.jqueryslidemenu ul li a{
+
.ddcolortabs a{
-
display: block;
+
float:left;
-
background: #414141; /*background of tabs (default state)*/
+
color: white;
color: white;
-
padding: 8px 10px;
+
background: #F9BD05 url(media/color_tabs_left.gif) no-repeat left top;
-
border-right: 1px solid #778;
+
margin:0 2px 0 0;
-
color: #2d2b2b;
+
padding:0 0 1px 3px;
-
text-decoration: none;
+
text-decoration:none;
 +
letter-spacing: 1px;
}
}
-
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
+
.ddcolortabs a span{
-
display: inline-block;
+
float:left;
 +
display:block;
 +
background: #F9BD05 url(media/color_tabs_right.gif) no-repeat right top;
 +
padding: 4px 8px 2px 7px;
}
}
-
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
+
.ddcolortabs a span{
-
color: white;
+
float:none;
}
}
-
.jqueryslidemenu ul li a:hover{
+
.ddcolortabs a:hover{
-
background: black; /*tab link background during hover state*/
+
background-color: #18204b;
-
color: white;
+
}
}
-
+
 
-
/*1st sub level menu*/
+
.ddcolortabs a:hover span{
-
.jqueryslidemenu ul li ul{
+
background-color: #18204b;
-
position: absolute;
+
-
left: 0;
+
-
display: block;
+
-
visibility: hidden;
+
}
}
-
/*Sub level menu list items (undo style from Top level List Items)*/
+
.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
-
.jqueryslidemenu ul li ul li{
+
background-color: #18204b;
-
display: list-item;
+
-
float: none;
+
}
}
-
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
+
 
-
.jqueryslidemenu ul li ul li ul{
+
/* ######### Style for Drop Down Menu ######### */
 +
 
 +
.dropmenudiv_a{
 +
position:absolute;
top: 0;
top: 0;
 +
border: 1px solid black; /*THEME CHANGE HERE*/
 +
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
 +
border-bottom-width: 0;
 +
font:normal 12px Arial;
 +
line-height:18px;
 +
z-index:100;
 +
background-color: white;
 +
width: 200px;
 +
visibility: hidden;
}
}
-
/* Sub level menu links style */
 
-
.jqueryslidemenu ul li ul li a{
 
-
font: normal 13px Verdana;
 
-
width: 160px; /*width of sub menus*/
 
-
padding: 5px;
 
-
margin: 0;
 
-
border-top-width: 0;
 
-
border-bottom: 1px solid gray;
 
-
}
 
-
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
+
.dropmenudiv_a a{
-
background: #eff9ff;
+
width: auto;
 +
display: block;
 +
text-indent: 5px;
 +
border-top: 0 solid #678b3f;
 +
border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
 +
padding: 2px 0;
 +
text-decoration: none;
color: black;
color: black;
}
}
-
/* ######### CSS classes applied to down and right arrow images  ######### */
+
* html .dropmenudiv_a a{ /*IE only hack*/
-
 
+
width: 100%;
-
.downarrowclass{
+
-
position: absolute;
+
-
top: 12px;
+
-
right: 7px;
+
}
}
-
.rightarrowclass{
+
.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
-
position: absolute;
+
background-color: #8a3c3d;
-
top: 6px;
+
color: white;
-
right: 5px;
+
}
}
</style>
</style>
 +
</head>
 +
<!-- CSS for Drop Down Tabs Menu #1 -->
 +
<link rel="stylesheet" type="text/css" href="ddcolortabs.css" />
-
<!--[if lte IE 7]>
+
<div id="colortab" class="ddcolortabs">
-
<style type="text/css">
+
-
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
+
-
</style>
+
-
<![endif]-->
+
-
 
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+
-
<script type="text/javascript" src="jqueryslidemenu.js"></script>
+
-
<div id="myslidemenu" class="jqueryslidemenu">
+
<ul>
<ul>
-
<li><a href="https://2013.igem.org/Team:UGent">Home</a></li>
+
<li><a href="https://2013.igem.org/Team:UGent" title="Home"><span>Home</span></a></li>
-
<li><a href="https://2013.igem.org/Team:UGent/Team">Team</a></li>
+
<li><a href="https://2013.igem.org/Team:UGent/Team" title="Team" rel="dropmenu1_a"><span>Team</span></a></li>
-
  <ul>
+
<li><a href="https://2013.igem.org/Team:UGent/Project" title="Project" rel="dropmenu1_a"><span>Project</span></a></li>
-
  <li><a href="https://2013.igem.org/Team:UGent/Undergrads">Undergrads</a></li>
+
<li><a href="https://2013.igem.org/Team:UGent/Parts" title="Our submitted BioBrick parts" rel="dropmenu1_a"><span>Parts</span></a></li>
-
  <li><a href="https://2013.igem.org/Team:UGent/Instructors">Instructors</a></li>
+
<li><a href="https://2013.igem.org/Team:UGent/Notebook" title="Notebook"><span>Notebook</span></a></li>
-
  </ul>
+
<li><a href="https://2013.igem.org/Team:UGent/Labjournal" title="Details of labwork" rel="dropmenu1_a"><span>Labjournal</span></a></li>
-
</li>
+
<li><a href="https://2013.igem.org/Team:UGent/HumanOutreach" title="Human Outreach" rel="dropmenu2_a"><span>Human Outreach</span></a></li>
-
<li><a href="https://2013.igem.org/Team:UGent/Project">Project</a></li>
+
<li><a href="https://2013.igem.org/Team:UGent/Safety" title="Safety" ><span>Safety</span></a></li>
-
<li><a href="https://2013.igem.org/Team:UGent/Parts">Our submitted BioBrick parts</a></li>
+
<li><a href="https://2013.igem.org/Team:UGent/Attributions" title="Attributions" ><span>Attributions</span></a></li>
-
<li><a href="https://2013.igem.org/Team:UGent/Notebook">Notebook</a></li>
+
<li></html>[[File:UGent_2013_logoiGEMTrans.png|25px|link=https://igem.org/Main_Page|alt=Alt text|iGEM Homepage]]<html></span></li>
-
<li><a href="https://2013.igem.org/Team:UGent/Labjournal">Labwork</a>
+
-
  <ul>
+
-
  <li><a href="https://2013.igem.org/Team:UGent/Experiments">Experiments</a></li>
+
-
  <li><a href="https://2013.igem.org/Team:UGent/CloneManager">CloneManager</a></li>
+
-
  <li><a href="https://2013.igem.org/Team:UGent/Labjournal">Labjournal</a></li>
+
-
  </ul>
+
-
</li>
+
-
<li><a href="https://2013.igem.org/Team:UGent/HumanOutreach">Human outreach</a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGent/Safety">Safety</a></li>
+
</ul>
</ul>
-
<br style="clear: left" />
 
</div>
</div>
 +
 +
<!--1st drop down menu -->                                                 
 +
<div id="dropmenu1_a" class="dropmenudiv_a">
 +
<a href="https://2013.igem.org/Team:UGent/Undergrads"><span>Undergrads</span></a></li>
 +
<a href="http://https://2013.igem.org/Team:UGent/Instructors">Instructors</a>
 +
</div>
 +
 +
<script type="text/javascript">
 +
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
 +
tabdropdown.init("colortab", 3)
 +
</script>
</html>
</html>

Revision as of 16:39, 13 August 2013

Retrieved from "http://2013.igem.org/Team:UGent/Templates/Navigation"