Difference between revisions of "Template:Freiburg/Menubar"
Line 1: | Line 1: | ||
− | <!--doctype html--> | + | <!--doctype html--> |
− | <html> | + | <html> |
− | + | <head> | |
− | + | <title>""</title> | |
− | + | <meta charset="utf-8"> | |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
− | + | <style> | |
− | /* ============= BEGIN: Stylesheet for navigation menu ============= */ | + | /* ============= BEGIN: Stylesheet for navigation menu ============= */ |
− | /* ==== Begin General Settings ====*/ | + | /* ==== Begin General Settings ====*/ |
− | body { | + | body { |
− | + | margin: 0px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | # | + | #header { |
− | + | position: fixed; | |
− | + | ||
width: 100%; | width: 100%; | ||
− | + | margin-top: 0px; | |
− | + | z-index: 600; | |
− | + | } | |
− | } | + | /* ==== End General Settings ==== */ |
− | + | @media screen and (min-width: 911px){ | |
− | + | ||
− | + | ||
− | + | ||
− | min-width: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #naviconwrapper { | |
− | # | + | margin: 0px ; /*auto centers wrapper*/ |
− | + | height: 60px; | |
− | + | width: 100%; | |
− | + | min-width: 900px; | |
− | + | padding-top: 16px; | |
− | + | z-index: -100; | |
− | + | } | |
− | } | + | |
− | # | + | #naviconbar { |
− | + | margin: 0px auto; | |
− | + | padding: 0px; | |
− | + | width: 100%; | |
− | + | min-width: 900px; | |
− | } | + | background-color: #0051A2; |
+ | border-top-color: #FFF; | ||
+ | border-top-width: 1px; | ||
+ | border-top-style: inset; | ||
+ | border-bottom-color: #FFF; | ||
+ | border-bottom-width: 1px; | ||
+ | border-bottom-style: outset; | ||
+ | z-index: -60; | ||
+ | } | ||
+ | |||
− | #navicons | + | /* ==== Begin Settings Main Menu Icons ==== */ |
− | + | #navicons { | |
− | + | margin: 0px auto; | |
− | + | padding: 0px; | |
− | + | width: 720px; | |
− | + | height: 60px; | |
− | + | background-color: #0051A2; | |
− | + | z-index: -20; /*defines color behind icons */ | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | #navicons ul | + | #navicons ul { |
− | + | margin: 0px auto; | |
− | + | padding: 0px; | |
− | + | width: 720px; | |
− | + | position: relative; /*makes chip go directly behind home from left corner*/ | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | #navicons ul | + | #navicons ul li { |
− | + | margin: 0px; | |
− | /* | + | padding: 0px; |
− | + | list-style: none; | |
+ | /*display: block;*/ | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | line-height: 106px; | ||
+ | font-family: sans-serif; | ||
+ | font-size: 12px; | ||
+ | background-color: #FFF; | ||
+ | /*border: 1px solid #5781BD;*/ | ||
+ | z-index: 100; | ||
+ | } | ||
− | + | #navicons ul li a { | |
− | # | + | height: 60px; |
− | + | width: 120px; | |
− | + | display: block; | |
− | + | text-decoration: none; | |
− | } | + | /*color: #FFF;*/ |
+ | text-align: center; | ||
+ | text-transform: uppercase; | ||
+ | z-index: 50; | ||
+ | } | ||
− | # | + | #navicons ul a:hover { |
− | + | } | |
− | } | + | /* ==== End Settings Main Menu Icons ==== */ |
+ | |||
− | # | + | /* ==== classes for icons ==== */ |
− | + | #home { | |
− | + | background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat; | |
− | + | height: 60px;; | |
− | } | + | background-position: center; |
+ | } | ||
− | # | + | #home a { |
− | + | color: #FFF; | |
− | } | + | } |
− | # | + | #project { |
− | + | background: url(https://static.igem.org/mediawiki/2015/6/67/Freiburg_icon_project.png) no-repeat; | |
− | + | height: 60px; | |
− | + | background-position: center; | |
− | } | + | } |
− | # | + | #project a { |
− | + | color: #FFF; | |
− | } | + | } |
− | # | + | #team { |
− | + | background: url(https://static.igem.org/mediawiki/2015/3/38/Freiburg_icon_team.png) no-repeat; | |
− | + | height: 60px; | |
− | + | background-position: center; | |
− | } | + | } |
− | # | + | #team a { |
− | + | color: #FFF; | |
− | } | + | } |
− | # | + | #results { |
− | + | background: url(https://static.igem.org/mediawiki/2015/2/2d/Freiburg_icon_results.png) no-repeat; | |
− | + | height: 60px; | |
− | + | background-position: center; | |
− | } | + | } |
− | # | + | #results a { |
− | + | color: #FFF; | |
− | } | + | } |
− | # | + | #policy { |
− | + | background: url(https://static.igem.org/mediawiki/2015/3/3c/Freiburg_icon_policy.png) no-repeat; | |
− | + | height: 60px; | |
− | + | background-position: center; | |
− | } | + | } |
− | # | + | #policy a { |
− | + | color: #FFF; | |
− | } | + | } |
− | + | ||
− | + | #notebook { | |
− | + | background: url(https://static.igem.org/mediawiki/2015/e/e6/Freiburg_icon_notebook.png) no-repeat; | |
− | # | + | height: 60px; |
− | + | background-position: center; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | # | + | #notebook a { |
− | + | color: #FFF; | |
− | + | } | |
− | + | /* ==== End classes for icons ==== */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | /* ==== Begin running chip ==== */ | |
− | + | /* == Begin Chip Design == */ | |
− | + | #runningchip { | |
− | + | position: absolute; | |
− | + | width: 90px; | |
− | + | height: 60px; | |
− | + | top: -15px; | |
− | + | left: 2.1%; | |
− | + | -webkit-transition: all 300ms ease-out; | |
− | + | -moz-transition: all 300ms ease-out; | |
− | + | transition: all 300ms ease-out; | |
− | + | z-index: 0; | |
− | } | + | } |
− | # | + | #runningchip-back{ |
− | + | width:100%; | |
− | + | height: 85px; | |
− | + | position: absolute; | |
− | + | background:#C5162F; | |
− | + | border-radius:5px; | |
− | + | border-bottom: 2px solid rgba(0, 0, 0, 0.09); | |
− | + | border-top: 2px solid rgba(255,255,255,0.1); | |
− | + | border-color: #0051A2; | |
− | } | + | } |
− | #top-arrow | + | #top-arrow{ /* arrow like element above slider */ |
− | + | position:absolute; | |
− | + | overflow:hidden; | |
− | + | color: #C5162F; | |
− | + | width:100%; | |
− | + | height:14px; | |
− | + | top: 2px; | |
− | + | left:0; | |
− | + | z-index:2; | |
− | + | background-color: #C5162F; | |
− | + | border-top-right-radius: 5px; | |
− | } | + | border-top-left-radius: 5px; |
+ | } | ||
− | # | + | #top-arrow:before{ |
− | + | content:""; | |
− | + | position:absolute; | |
− | + | width:80%; | |
− | + | height:10px; | |
− | + | top:-12px; | |
− | + | left:10%; | |
− | + | border-radius:20%; | |
− | + | box-shadow:0 0 10px black; | |
− | + | } | |
− | + | ||
− | } | + | |
− | # | + | #top-arrow:after{ /* little blue arrow */ |
− | + | content:""; | |
− | + | position:absolute; | |
− | + | width:0; | |
− | + | height:0px; | |
− | + | top:0px; | |
− | + | border-top:8px solid #C5162F; | |
− | + | border-left:6px solid transparent; | |
− | + | border-right:6px solid transparent; | |
− | } | + | margin-left:-6px; |
+ | left:50%; | ||
+ | } | ||
− | #bottom-arrow | + | #bottom-arrow{ /* arrow like element beneath slider */ |
− | + | position:absolute; | |
− | + | overflow:hidden; | |
− | + | width:100%; | |
− | + | height:15px; | |
− | + | bottom: -30px; | |
− | + | left:0; | |
− | + | z-index:2; | |
− | + | background-color: #C5162F; | |
− | + | border-bottom-right-radius: 5px; | |
− | + | border-bottom-left-radius: 5px; | |
− | } | + | } |
− | + | ||
+ | #bottom-arrow:before{ | ||
+ | content:""; | ||
+ | position:absolute; | ||
+ | width:80%; | ||
+ | height:10px; | ||
+ | bottom:-12px; | ||
+ | left:10%; | ||
+ | border-radius:20%; | ||
+ | box-shadow:0 0 10px black; | ||
+ | } | ||
− | + | #bottom-arrow:after{ | |
− | # | + | content:""; |
− | + | position:absolute; | |
− | } | + | width:0; |
+ | height:0; | ||
+ | bottom:0; | ||
+ | border-bottom:12px solid #C5162F; | ||
+ | border-left:8px solid transparent; | ||
+ | border-right:8px solid transparent; | ||
+ | margin-left:-8px; | ||
+ | left:50%; | ||
+ | } | ||
+ | /* == End Chip Design == */ | ||
− | |||
− | |||
− | |||
− | # | + | /* == Begin Chip Movement == */ |
− | + | #home:hover ~ #runningchip { | |
− | } | + | left: 2.1%; |
+ | } | ||
− | # | + | #project:hover ~ #runningchip { |
− | + | left: 18.6%; | |
− | } | + | } |
− | # | + | #team:hover ~ #runningchip { |
− | + | left: 35.5%; | |
− | } | + | } |
− | # | + | #results:hover ~ #runningchip { |
− | + | left: 52%; | |
− | } | + | } |
− | + | ||
− | + | ||
+ | #policy:hover ~ #runningchip { | ||
+ | left: 68.9%; | ||
+ | } | ||
− | + | #notebook:hover ~ #runningchip { | |
− | # | + | left: 85.5%; |
− | + | } | |
− | + | /* == End Chip Movment == */ | |
− | + | /* ==== End running chip ==== */ | |
− | + | ||
− | + | ||
− | + | ||
− | /* | + | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | # | + | /* ==== Begin Settings Submenu Level 1 ==== */ |
− | + | #navtextwrapper { /*define background box*/ | |
− | + | margin: 0 auto; | |
− | + | padding: 0px; | |
− | + | top: -2px; | |
− | + | height: 24px; | |
− | } | + | width: 920px; |
+ | position: relative; | ||
+ | /*border: 2px solid #000;*/ | ||
+ | } | ||
− | #navtext | + | #navtext { |
− | + | text-align: center; | |
− | + | font-family: Roboto,sans-serif; | |
− | + | font-size: 16px; | |
− | + | z-index: 600; | |
− | + | } | |
− | + | ||
− | } | + | |
− | #navtext ul | + | #navtext ul { |
− | + | margin: 0px auto; | |
− | + | top: -8px; | |
− | + | padding: 0px; | |
− | + | position: absolute; | |
− | + | z-index: 600; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | #navtext | + | #navtext li { |
− | + | margin: 0px auto; /*centers text*/ | |
− | + | list-style: none; | |
− | } | + | display: block; /*makes items go horizontal and centers them*/ |
+ | /*float: left;*/ /*makes items go horizontal*/ | ||
+ | position: relative; | ||
+ | z-index: 600; | ||
+ | } | ||
− | # | + | #navtext ul li a { |
− | + | margin-top: 2px; | |
− | + | height: 24px; | |
− | } | + | padding-left: 10px; |
+ | padding-right: 10px; | ||
+ | text-decoration: none; | ||
+ | color: #FFF; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | border-radius: 8px; | ||
+ | z-index: 600; | ||
+ | } | ||
− | # | + | #navtext ul li:hover > a { |
− | + | /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */ | |
− | + | color: #ecdc18; | |
− | + | } | |
− | } | + | |
− | # | + | #project-sub { |
− | + | display: none; | |
− | + | left: 22.6%; | |
− | } | + | } |
− | # | + | #team-sub { |
− | + | /*background-color: #ac34fe;*/ | |
− | + | display: none; | |
− | } | + | left: 35.2%; |
+ | } | ||
− | # | + | #results-sub{ |
− | + | display: none; | |
− | + | left: 49.4%; | |
− | + | } | |
− | } | + | |
− | + | #policy-sub{ | |
− | + | display: none; | |
− | } | + | left: 62.8%; |
+ | } | ||
− | + | #notebook-sub{ | |
− | + | display: none; | |
− | + | left: 76%; | |
− | + | width: 120px; | |
− | + | } | |
+ | .chip_gap { | ||
+ | content: none; | ||
+ | } | ||
− | + | .navsub1 { | |
− | + | background-color: #1962AB; | |
− | + | opacity: 1; | |
− | + | } | |
− | + | /* ==== End Settings Submenu Level 1 ==== */ | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | #navtext ul | + | /* ==== Begin Settings Submenu Level 2 ==== */ |
− | + | #navtext ul ul { | |
− | + | position: absolute; | |
− | + | width: 130%; | |
− | + | display: none; | |
− | + | left: 100%; /* subsubmenu always touches its parent element jb */ | |
− | + | top: -2px; | |
− | + | } | |
− | } | + | |
− | #navtext ul | + | #navtext ul ul li { |
− | + | margin: 0px auto; /*centers text*/ | |
− | } | + | list-style: none; |
+ | /*display: block; */ /*makes items go horizontal and centers them*/ | ||
+ | /*float: left;*/ /*makes items go horizontal*/ | ||
+ | position: relative; | ||
+ | } | ||
− | + | #navtext ul ul li a { | |
− | + | height: 24px; | |
− | + | padding-left: 10px; | |
− | } | + | padding-right: 10px; |
+ | text-decoration: none; | ||
+ | color: #FFF; | ||
+ | /*display: block;*/ | ||
+ | text-align: center; | ||
+ | } | ||
− | + | #navtext ul li:hover ul { | |
− | + | display: block; | |
− | + | } | |
− | + | ||
− | } | + | |
− | . | + | .navsub2 { |
− | + | background-color: #1962AB; | |
− | + | opacity: 1; | |
− | + | } | |
− | + | ||
− | } | + | |
− | . | + | .navsub2before { |
− | background- | + | background-color: #1962AB; |
− | + | border-top-right-radius: 8px; | |
− | + | opacity: 0.6; | |
− | + | } | |
− | } | + | |
− | + | .navsub2after { | |
+ | background-color: #0051A2; | ||
+ | border-bottom-right-radius: 8px; | ||
+ | border-bottom-left-radius: 8px; | ||
+ | opacity: 0.6; | ||
+ | } | ||
− | + | .subsubmenu{ | |
− | + | background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png"); | |
− | } | + | background-repeat: no-repeat; |
+ | background-position: 95% 50%; | ||
+ | background-size: 10px 13px; | ||
+ | } | ||
− | + | /* ==== End Settings Submenu Level 2 ==== */ | |
− | + | #smallnav{ | |
− | # | + | display: none; |
− | + | ||
− | + | ||
} | } | ||
− | |||
− | /* | + | } /* end media query*/ |
− | + | @media screen and (max-width: 910px){ | |
− | + | #header{ | |
− | + | top: -9000px; | |
− | + | opacity: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
+ | /* avoid space to content box */ | ||
+ | .content_background_wrapper{ | ||
+ | padding-top: 20px; | ||
+ | } | ||
− | + | } | |
− | /* | + | /* Styles for smallnav */ |
− | + | ||
− | + | ||
− | + | ||
− | + | /* Clearfix */ | |
− | + | .clearfix:before, | |
− | + | .clearfix:after { | |
− | + | content: " "; | |
− | + | display: table; | |
− | + | } | |
− | + | .clearfix:after { | |
− | + | clear: both; | |
− | + | } | |
− | + | .clearfix { | |
− | + | *zoom: 1; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | /*Styles | + | |
− | + | /* Basic Styles */ | |
− | #smallnav { | + | |
− | height: | + | #smallnav { |
− | background: # | + | height: 40px; |
+ | width: 100%; | ||
+ | background: #0051A2; | ||
+ | font-size: 11pt; | ||
+ | font-family: 'PT Sans', Arial, sans-serif; | ||
+ | font-weight: bold; | ||
+ | position: fixed; | ||
+ | border-bottom: 2px solid #CFCFCF; | ||
+ | z-index: 3000; | ||
+ | opacity: 0.9; | ||
} | } | ||
#smallnav ul { | #smallnav ul { | ||
− | + | padding: 0; | |
− | + | margin: 0 auto; | |
− | height: | + | width: 720px; |
+ | height: 40px; | ||
} | } | ||
#smallnav li { | #smallnav li { | ||
− | + | display: inline; | |
float: left; | float: left; | ||
− | |||
− | |||
} | } | ||
− | |||
#smallnav a { | #smallnav a { | ||
− | text-align: | + | color: #fff; |
− | + | display: inline-block; | |
− | + | width: 120px; | |
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | line-height: 40px; | ||
} | } | ||
− | + | #smallnav li a { | |
− | #smallnav { | + | box-sizing:border-box; |
− | border- | + | -moz-box-sizing:border-box; |
+ | -webkit-box-sizing:border-box; | ||
} | } | ||
− | #smallnav | + | #smallnav li:last-child a { |
− | + | border-right: 0; | |
− | + | } | |
+ | #smallnav a:hover, #smallnav a:active { | ||
+ | background-color: #1D629F; | ||
} | } | ||
#smallnav a#pull { | #smallnav a#pull { | ||
− | display: | + | display: none; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | /*Styles for screen 600px and lower*/ | ||
+ | @media screen and (max-width: 720px) { | ||
+ | #smallnav { | ||
+ | height: auto; | ||
+ | background: #3B7EBF; | ||
+ | } | ||
+ | #smallnav ul { | ||
+ | width: 100%; | ||
+ | display: block; | ||
+ | height: auto; | ||
+ | } | ||
+ | #smallnav li { | ||
+ | width: 50%; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
− | + | #smallnav a { | |
− | # | + | text-align: left; |
− | + | width: 100%; | |
+ | text-indent: 25px; | ||
+ | } | ||
− | } | + | #smallnav { |
+ | border-bottom: 0; | ||
+ | } | ||
+ | #smallnav ul { | ||
+ | display: none; | ||
+ | height: auto; | ||
+ | } | ||
+ | #smallnav a#pull { | ||
+ | display: block; | ||
+ | background-color: #0051A2; | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | #smallnav a#pull:after { | ||
+ | content:""; | ||
+ | background: url('https://static.igem.org/mediawiki/2015/e/e0/Freiburg_menu_button_white.png') no-repeat; | ||
+ | background-size: auto 90%; | ||
+ | width: 30px; | ||
+ | height: 30px; | ||
+ | display: inline-block; | ||
+ | position: absolute; | ||
+ | right: 15px; | ||
+ | top: 5px; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | # | + | /* ==== classes for icons ==== */ |
− | + | #home_small { | |
+ | background-color: #3673AF; | ||
− | } | + | } |
− | # | + | #home_small a { |
− | + | background: url(https://static.igem.org/mediawiki/2015/1/15/Freiburg_icon_home_white_03.png) no-repeat; | |
− | + | background-position: left; | |
− | + | background-size: auto 100%; | |
− | + | background-repeat: no-repeat; | |
− | + | padding-left: 40px; | |
− | + | color: #FFF; | |
− | } | + | } |
− | # | + | #project_small { |
− | + | background-color: #3673AF; | |
− | } | + | } |
− | # | + | #project_small a { |
− | + | background: url(https://static.igem.org/mediawiki/2015/7/76/Freiburg_icon_project_white_03.png) no-repeat; | |
− | + | background-position: left; | |
− | + | background-size: auto 90%; | |
− | + | background-repeat: no-repeat; | |
− | + | padding-left: 40px; | |
− | + | color: #FFF; | |
− | } | + | } |
− | # | + | #team_small { |
− | + | background-color: #3673AF; | |
− | } | + | } |
− | # | + | #team_small a { |
− | + | background: url(https://static.igem.org/mediawiki/2015/4/42/Freiburg_icon_team_white_03.png) no-repeat; | |
− | + | background-position: left; | |
− | + | background-size: auto 90%; | |
− | + | background-repeat: no-repeat; | |
− | + | padding-left: 40px; | |
− | + | color: #FFF; | |
− | } | + | } |
− | # | + | #results_small { |
− | + | background-color: #3673AF; | |
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | # | + | #results_small a { |
− | + | background: url(https://static.igem.org/mediawiki/2015/1/1e/Freiburg_icon_results_white_03.png) no-repeat; | |
− | } | + | background-position: left; |
+ | background-size: auto 90%; | ||
+ | background-repeat: no-repeat; | ||
+ | padding-left: 40px; | ||
+ | color: #FFF; | ||
+ | } | ||
− | # | + | #policy_small { |
− | + | background-color: #3673AF; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
+ | #policy_small a { | ||
+ | color: #FFF; | ||
+ | padding-left: 40px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/f/f9/Freiburg_icon_policy_white_03.png); | ||
+ | background-position: left; | ||
+ | background-size: auto 90%; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
− | } | + | #notebook_small { |
+ | background-color: #3673AF; | ||
+ | } | ||
− | / | + | #notebook_small a { |
− | + | background: url(https://static.igem.org/mediawiki/2015/9/99/Freibur_icon_notebook_white_03.png) no-repeat; | |
− | + | background-position: left; | |
− | + | background-size: auto 90%; | |
− | + | background-repeat: no-repeat; | |
− | + | padding-left: 40px; | |
+ | color: #FFF; | ||
} | } | ||
− | + | /* ==== End classes for icons ==== */ | |
− | + | }/* end media query | |
+ | /*Smartphone*/ | ||
+ | @media only screen and (max-width : 320px) { | ||
+ | #smallnav li { | ||
+ | display: block; | ||
+ | float: none; | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
− | |||
+ | </style> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <!-- BEGIN: jQuery --> | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | <script | + | <script> |
− | $ | + | // FOR SMALLNAV |
− | + | $(function() { | |
− | $( | + | var pull = $('#pull'); |
− | $( | + | menu = $('#smallnav ul'); |
− | + | menuHeight = menu.height(); | |
− | + | ||
− | + | $(pull).on('click', function(e) { | |
− | + | e.preventDefault(); | |
+ | menu.slideToggle(); | ||
}); | }); | ||
− | + | ||
− | + | $(window).resize(function(){ | |
− | + | var w = $(window).width(); | |
− | + | if(w > 320) { | |
− | + | if (menu.is(':hidden')) { | |
− | + | menu.removeAttr('style'); | |
− | + | } | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | $( | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
}); | }); | ||
}); | }); | ||
− | </script> | + | </script> |
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | // make submenus appear // | ||
+ | $("#home").hover(function(){ | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }); | ||
+ | $("#project").hover(function(){ | ||
+ | $("#project-sub") .show(); | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#project-sub") .hide(); | ||
+ | }); | ||
+ | |||
+ | $("#team").hover(function(){ | ||
+ | $("#team-sub") .show(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#team-sub") .hide(); | ||
+ | }); | ||
+ | |||
+ | $("#results").hover(function(){ | ||
+ | $("#results-sub") .show(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }); | ||
+ | |||
+ | $("#policy").hover(function(){ | ||
+ | $("#policy-sub") .show(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#policy-sub") .hide(); | ||
+ | }); | ||
+ | |||
+ | $("#notebook").hover(function(){ | ||
+ | $("#notebook-sub") .show(); | ||
+ | $("#project-sub") .hide(); | ||
+ | $("#team-sub") .hide(); | ||
+ | $("#results-sub") .hide(); | ||
+ | $("#policy-sub") .hide(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }); | ||
+ | // make chip stay over main menu point when its submenu appears and makes the submenu stay visible// | ||
+ | $("#project-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','18.6%'); | ||
+ | $("#project-sub") .show(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | $("#project-sub") .hide(); | ||
+ | }); | ||
+ | $("#team-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','35.5%'); | ||
+ | $("#team-sub") .show(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | $("#team-sub") .hide(); | ||
+ | }); | ||
+ | $("#results-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','52%'); | ||
+ | $("#results-sub") .show(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | $("#results-sub") .hide(); | ||
+ | }); | ||
+ | $("#policy-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','68.9%'); | ||
+ | $("#policy-sub") .show(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | $("#policy-sub") .hide(); | ||
+ | }); | ||
+ | $("#notebook-sub") .hover(function(){ | ||
+ | $("#runningchip") .css('left','85.5%'); | ||
+ | $("#notebook-sub") .show(); | ||
+ | }, | ||
+ | function(){ | ||
+ | $("#runningchip") .css('left',''); | ||
+ | $("#notebook-sub") .hide(); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <script> | |
− | + | /*Attachable menu code*/ | |
− | + | $( document ).ready(function() { | |
− | + | ||
− | + | $(window).scroll(function (event) { | |
− | + | var y = $(this).scrollTop(); | |
− | + | if(y>60){ | |
− | + | $("#header").css('position','fixed'); | |
− | + | $("#header").css('width','100%'); | |
− | + | $("#header").css('margin-top','-61px'); | |
− | + | $("#bottom-arrow").css('display','none'); | |
− | + | $("#runningchip-back").css('display','none'); | |
− | + | $("#navtext").css('margin-top','-20px'); | |
− | + | $(".chip_gap").css('height','30px'); | |
− | + | ||
− | + | }else{ | |
− | + | var offsetTop = -y; | |
− | + | $("#header").css('margin-top',offsetTop+'px'); | |
+ | $("#bottom-arrow").removeAttr('style'); | ||
+ | $("#runningchip-back").removeAttr('style'); | ||
+ | $("#navtext").removeAttr('style'); | ||
+ | $(".chip_gap").css('height','23px'); | ||
+ | } | ||
− | + | }); | |
+ | /*Fix for when a link targets an id -> check the position on pageload*/ | ||
+ | /* $(window).scroll();*/ | ||
− | + | }); | |
− | < | + | </script> |
+ | <!-- END: jQuery --> | ||
− | |||
+ | </head> | ||
− | |||
− | |||
− | <!-- BEGIN: | + | <!-- BEGIN: Body content --> |
+ | <body> | ||
− | + | <!-- BEGIN: Normal Menubar --> | |
− | <!-- Begin navigation menu icons --> | + | |
− | + | <div id="header"> | |
− | + | <!-- Begin navigation menu icons --> | |
− | + | <div id="naviconwrapper"> <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren --> | |
− | + | <div id="naviconbar"> | |
− | + | <div id="navicons"> <!-- only icons --> | |
− | + | <ul> | |
− | + | <li id="home" ><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a> | |
− | + | </li> | |
− | + | <li id="project"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a> | |
− | + | </li> | |
− | + | <li id="team"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a> | |
− | + | </li> | |
− | + | <li id="results"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a> | |
− | + | </li> | |
− | + | <li id="policy" style="font-size:11px"><a href="https://2015.igem.org/Team:Freiburg/Practices">Human Practice</a> | |
− | + | </li> | |
− | + | <li id="notebook"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a> | |
− | + | </li> | |
− | + | <div id="runningchip"> | |
− | + | <div id="top-arrow"></div> | |
+ | <div id="runningchip-back"></div> | ||
+ | <div id="bottom-arrow"></div> | ||
+ | </div> | ||
+ | </ul> | ||
</div> | </div> | ||
− | + | </div> | |
− | + | </div> | |
− | </div> | + | <!-- End navigation menu icons --> |
− | + | ||
− | + | ||
− | + | ||
− | <!-- Begin navigation submenu --> | + | <!-- Begin navigation submenu --> |
− | + | <div id="navtextwrapper"> <!-- only names of elements --> | |
− | + | <div id="navtext"> | |
− | + | <ul id="project-sub"> | |
− | + | <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System">Overview</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diagnostics">Diagnostics today</a></li> | |
− | + | <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a> | |
− | + | <ul> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Methods/Cloning">DNA Engineering</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression">Cell-free Expression</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Protein Purification</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Surface Chemistry</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/iRIf">Optical Detection</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions">Outlook</a></li> | |
− | + | </ul> | |
− | + | <ul id="team-sub"> | |
− | + | <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Team"></a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Team">Members</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Attributions">Acknowledgements</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Partners">Partners</a></li> | |
− | + | </ul> | |
− | + | <ul id="results-sub"> | |
− | + | <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Results"></a></li> | |
− | + | <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a> | |
− | + | <ul> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results">Main Results</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">Diagnostics</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Own_Device">Own Device</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Immobilization">DNA Immobilization</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Cellfree">Cellfree Expression</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Surface">Binding on Surface</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Modeling">Modeling</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Parts">BioBricks</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Collaborations">Collaborations</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Achievements">Achievements</a></li> | |
− | + | </ul> | |
− | + | <ul id="policy-sub"> | |
− | + | <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Human_Practice"></a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Science_Fair">Science Fair</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Theater_Project">Theater Project</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Public_Opinion">Public Opinion</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/College">College Talk</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Ethics">Ethics</a></li> | |
− | + | </ul> | |
− | + | <ul id="notebook-sub"> | |
− | + | <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Notebook"></a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Labjournals">Labjournals</a> | |
− | + | </li> | |
− | + | <li><a class="navsub1 subsubmenu" href="#">Techniques</a> | |
− | + | <ul> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li> | |
− | + | <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains">E.coli Strains</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li> | |
− | + | <li><a class="navsub1" href="">Materials</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li> | |
− | + | <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Glossary">Glossary</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </div> | |
− | + | </div> | |
− | <!-- End of navigation submenu --> | + | <!-- End of navigation submenu --> |
− | + | </div> | |
− | <!-- End of header --> | + | <!-- End of header --> |
− | <!-- END: normal Menubar --> | + | <!-- END: normal Menubar --> |
− | <!-- BEGIN: Mobile Navigation --> | + | <!-- BEGIN: Mobile Navigation --> |
− | + | <div class="clearfix" id="smallnav"> | |
− | + | <ul class="clearfix"> | |
− | + | <li id="home_small"><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a></li> | |
− | + | <li id="project_small"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a></li> | |
− | + | <li id="results_small"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a></li> | |
− | + | <li id="team_small"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a></li> | |
− | + | <li id="policy_small"><a href="https://2015.igem.org/Team:Freiburg/Practices">Practice</a></li> | |
− | + | <li id="notebook_small"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a></li> | |
− | + | </ul> | |
− | + | <a href="#" id="pull">Menu</a> | |
− | + | </div> | |
− | <!-- END: Mobile Navigation --> | + | <!-- END: Mobile Navigation --> |
− | + | </body> | |
− | </html> | + | </html> |
Revision as of 21:53, 16 September 2015
""