|
|
| (224 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <!DOCTYPE html> | + | <html> |
| − | <html lang="en" class="no-js">
| + | <head> |
| − | <head>
| + | <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> |
| − | <style>
| + | <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet"> |
| − | @charset "UTF-8";
| + | <style> |
| − | .bt-icon:before,
| + | <style> |
| − | .bt-icon-alt:before {
| + | #top_menu_inside ul li > a { /* RECOLORS IGEM MENU */ |
| − | font-family: "minicons-webalys";
| + | color: #a9a9a9 !important; |
| − | font-style: normal;
| + | } |
| − | font-weight: normal;
| + | .menu-type { |
| − | font-variant: normal;
| + | font-family: 'Roboto Condensed', sans-serif !important; |
| − | text-transform: none !important;
| + | letter-spacing: 5pt !important; |
| − | speak: none;
| + | font-size: 12pt; |
| − | display: inline-block;
| + | text-align: center; |
| − | text-decoration: none;
| + | text-decoration: none !important; |
| − | width: 1em;
| + | text-transform: uppercase; |
| − | line-height: inherit;
| + | font-weight: 700; |
| − | -webkit-font-smoothing: antialiased;
| + | -webkit-font-smoothing: antialiased; |
| − | }
| + | font-smoothing: antialiased; |
| − | | + | } |
| − | .bt-icon-alt:before {
| + | .wordmark img { |
| − | font-family: "FontAwesome";
| + | vertical-align: sub; |
| − | }
| + | width: 200px; |
| − | | + | margin-left: 5%; |
| − | .icon-window-delete:before {
| + | margin-right: 50px; |
| − | content: "\e000";
| + | } |
| − | }
| + | #menuwrap { |
| − | | + | margin: 0 auto; |
| − | .icon-download:before {
| + | max-width: 960px; |
| − | content: "\e002";
| + | height: 100px; |
| − | }
| + | } |
| − | | + | .dropbtn { |
| − | .icon-home:before {
| + | text-decoration: none !important; |
| − | content: "\e003";
| + | } |
| − | }
| + | #menubartable { |
| − | | + | border: 0; |
| − | .icon-calendar:before {
| + | background: #F8F9F9; |
| − | content: "\e004";
| + | list-style-type: none; |
| − | }
| + | white-space: nowrap; |
| − | | + | z-index: 10; |
| − | .icon-folder-add:before {
| + | position: fixed; |
| − | content: "\e001";
| + | width: 100%; |
| − | }
| + | padding-top: 100px; |
| − | | + | margin-top: -80px; |
| − | .icon-windows:before {
| + | padding-left: 3000px; |
| − | content: "\e008";
| + | margin-left: -3000px; |
| − | }
| + | padding-right: 3000px; |
| − | | + | margin-right: -3000px; |
| − | .icon-volume:before {
| + | } |
| − | content: "\e00e";
| + | #menubartable li { |
| − | }
| + | display: table-cell; |
| − | | + | } |
| − | .icon-speaker:before {
| + | li .menuitem, .dropbtn { |
| − | content: "\e011";
| + | color: #a9a9a9 !important; |
| − | }
| + | background: #F8F9F9; |
| − | | + | display: table-cell; |
| − | .icon-star:before {
| + | vertical-align: middle; |
| − | content: "\e012";
| + | padding: 20px 15px; |
| − | }
| + | } |
| − | | + | .dropdown-content { |
| − | .icon-sun:before {
| + | display: none; |
| − | content: "\e014";
| + | position: absolute; |
| − | }
| + | z-index: 10; |
| − | | + | } |
| − | .icon-trash:before {
| + | .dropdown-content .menuitem { |
| − | content: "\e018";
| + | display: block; |
| − | } | + | text-align: left; |
| − | | + | text-decoration: none; |
| − | .icon-zoom:before {
| + | } |
| − | content: "\e005";
| + | .menu-column:hover .dropdown-content { |
| − | }
| + | display: block; |
| − | | + | } |
| − | .icon-user-outline:before {
| + | li .menuitem:hover, li .dropbtn:hover { |
| − | content: "\e006";
| + | background: #f4f4f4; |
| − | } | + | } |
| − | | + | #masterfooter { |
| − | .icon-picture:before {
| + | position: absolute; |
| − | content: "\e007";
| + | border: 0; |
| − | } | + | background: #f8f9f9; |
| − | | + | list-style-type: none; |
| − | .icon-phone:before {
| + | white-space: nowrap; |
| − | content: "\e009";
| + | z-index: 10; |
| − | } | + | width: 100%; |
| − | | + | bottom: 0; |
| − | .icon-newspaper:before {
| + | padding-left: 3000px; |
| − | content: "\e00a";
| + | margin-left: -3000px; |
| − | } | + | padding-right: 3000px; |
| − | | + | margin-right: -3000px; |
| − | .icon-printer:before {
| + | } |
| − | content: "\e00b";
| + | </style> |
| − | } | + | </head> |
| − | | + | <body> |
| − | .icon-microwave:before {
| + | <div id="menuwrap"> |
| − | content: "\e00c";
| + | <ul id="menubartable" class="menu-type"> |
| − | } | + | < li class="menu- column"> <a href=" https://2017.igem.org/Team:BostonU" class=" wordmark"><img src="https://static.igem.org/mediawiki/2017/f/f2/T-- BostonU--RedGrey.svg"></ img></a> < /li> |
| − | | + | <li class="menu-column"> <a href=" https://2017.igem.org/Team:BostonU/Team" class=" dropbtn"> People</a> |
| − | .icon-refresh:before {
| + | < div class="dropdown-content"> <a class="menuitem" href=" https://2017.igem.org/Team:BostonU/Team" >Team</a> <a class=" menuitem" href="https://2017.igem.org/Team:BostonU/Attributions"> Attributions</a></ div> |
| − | content: "\e00d";
| + | <li class="menu-column"> <a href=" https://2017.igem.org/Team:BostonU/Description" class=" dropbtn"> Research</a> |
| − | } | + | < div class="dropdown-content"> <a class=" menuitem" href=" https://2017.igem.org/Team:BostonU/Description"> Overview</a> < a class="menuitem" href="https:/ /2017.igem.org/Team:BostonU/Experiments"> Experiments< /a> <a class=" menuitem" href=" https://2017.igem.org/Team:BostonU/Results"> Results</a> < a class="menuitem" href="https:/ /2017.igem.org/Team:BostonU/Model"> Modeling< /a> <a class=" menuitem" href=" https://2017.igem.org/Team:BostonU/Notebook"> Notebook</a> < a class="menuitem" href="https:/ /2017.igem.org/Team:BostonU/Protocols"> Protocols</ a> < a class="menuitem" href="https:/ /2017.igem.org/Team:BostonU/Safety"> Safety</ a> </ div> |
| − | | + | </li> |
| − | .icon-lock:before {
| + | <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Engagement" class="dropbtn">Beyond the Bench</a> |
| − | content: "\e00f";
| + | <div class="dropdown-content"><a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Silver">Human Practices</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Gold_Integrated">Integrated Human Practices</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Engagement">Public Engagement</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/InterLab">InterLab Contribution</a> </div> |
| − | }
| + | </li> |
| − | | + | <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/JudgingCriteria" class="dropbtn">Achievements</a> |
| − | .icon-email:before {
| + | <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Overview</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a> </div> |
| − | content: "\e010";
| + | </li> |
| − | }
| + | </ul> |
| − | | + | </div> |
| − | .icon-browser:before {
| + | </body> |
| − | content: "\e013";
| + | |
| − | } | + | |
| − | | + | |
| − | .icon-bubble:before {
| + | |
| − | content: "\e015";
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-calculator:before {
| + | |
| − | content: "\e016";
| + | |
| − | } | + | |
| − | | + | |
| − | .icon-cd:before {
| + | |
| − | content: "\e017";
| + | |
| − | } | + | |
| − | | + | |
| − | .icon-enter:before {
| + | |
| − | content: "\e019";
| + | |
| − | } | + | |
| − | | + | |
| − | .icon-file-add:before {
| + | |
| − | content: "\e01a";
| + | |
| − | } | + | |
| − | | + | |
| − | .icon-flag:before {
| + | |
| − | content: "\e01b";
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon-twitter:before {
| + | |
| − | content: "\e01c";
| + | |
| − | } | + | |
| − | | + | |
| − | .icon-gplus:before {
| + | |
| − | content: "\e020";
| + | |
| − | } | + | |
| − | | + | |
| − | .icon-github:before {
| + | |
| − | content: "\e021";
| + | |
| − | } | + | |
| − | | + | |
| − | .icon-facebook:before {
| + | |
| − | content: "\e01d";
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Font Awesome */
| + | |
| − | .icon-step-backward:before {
| + | |
| − | content: "\f048";
| + | |
| − | } | + | |
| − | .icon-backward:before {
| + | |
| − | content: "\f04a";
| + | |
| − | }
| + | |
| − | .icon-pause:before {
| + | |
| − | content: "\f04c";
| + | |
| − | } | + | |
| − | .icon-stop:before {
| + | |
| − | content: "\f04d";
| + | |
| − | } | + | |
| − | .icon-forward:before {
| + | |
| − | content: "\f04e";
| + | |
| − | } | + | |
| − | .icon-step-forward:before {
| + | |
| − | content: "\f051";
| + | |
| − | } | + | |
| − | .icon-play:before {
| + | |
| − | content: "\f04b";
| + | |
| − | } | + | |
| − | /*STYLE SHEET "ICONS" ABOVE, "INDEX3" BELOW */
| + | |
| − | *,
| + | |
| − | *:after,
| + | |
| − | *::before {
| + | |
| − | -webkit-box-sizing: border-box;
| + | |
| − | -moz-box-sizing: border-box;
| + | |
| − | box-sizing: border-box;
| + | |
| − | } | + | |
| − | | + | |
| − | body {
| + | |
| − | background: #2980b9;
| + | |
| − | }
| + | |
| − | | + | |
| − | .container {
| + | |
| − | padding: 80px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu {
| + | |
| − | position: fixed;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 0;
| + | |
| − | border-width: 0px;
| + | |
| − | border-style: solid;
| + | |
| − | border-color: #333;
| + | |
| − | background-color: rgba(0,0,0,0);
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
| + | |
| − | transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu.bt-menu-open {
| + | |
| − | height: 100%;
| + | |
| − | border-width: 30px 30px 90px 30px;
| + | |
| − | background-color: rgba(0,0,0,0.3);
| + | |
| − | -webkit-transition: border-width 0.3s, background-color 0.3s;
| + | |
| − | transition: border-width 0.3s, background-color 0.3s;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-overlay {
| + | |
| − | position: absolute;
| + | |
| − | width: 100%;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu-open .bt-overlay {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu-trigger {
| + | |
| − | position: fixed;
| + | |
| − | bottom: 22px;
| + | |
| − | left: 50%;
| + | |
| − | z-index: 100;
| + | |
| − | display: block;
| + | |
| − | margin-left: -25px;
| + | |
| − | width: 50px;
| + | |
| − | height: 50px;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu-trigger span { | + | |
| − | position: absolute;
| + | |
| − | top: 50%;
| + | |
| − | left: 0;
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − | height: 8%;
| + | |
| − | background-color: #fff;
| + | |
| − | font-size: 0px;
| + | |
| − | -webkit-transition: background-color 0.3s;
| + | |
| − | transition: background-color 0.3s;
| + | |
| − | -webkit-touch-callout: none;
| + | |
| − | -webkit-user-select: none;
| + | |
| − | -khtml-user-select: none;
| + | |
| − | -moz-user-select: none;
| + | |
| − | -ms-user-select: none;
| + | |
| − | user-select: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu-open .bt-menu-trigger span {
| + | |
| − | background-color: #2980b9;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu-trigger span:before,
| + | |
| − | .bt-menu-trigger span:after {
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | background: #fff;
| + | |
| − | content: '';
| + | |
| − | -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
| + | |
| − | transition: transform 0.3s, background-color 0.3s;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu-trigger span:before {
| + | |
| − | -webkit-transform: translateY(-250%);
| + | |
| − | transform: translateY(-250%);
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu-trigger span:after {
| + | |
| − | -webkit-transform: translateY(250%);
| + | |
| − | transform: translateY(250%);
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu-open .bt-menu-trigger span:before,
| + | |
| − | .bt-menu-open .bt-menu-trigger span:after {
| + | |
| − | background-color: #2980b9;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu-open .bt-menu-trigger span:before {
| + | |
| − | -webkit-transform: translateY(-350%);
| + | |
| − | transform: translateY(-350%);
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu-open .bt-menu-trigger span:after {
| + | |
| − | -webkit-transform: translateY(350%);
| + | |
| − | transform: translateY(350%);
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu ul {
| + | |
| − | position: fixed;
| + | |
| − | bottom: 0px;
| + | |
| − | left: 0;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | width: 100%;
| + | |
| − | list-style: none;
| + | |
| − | text-align: center;
| + | |
| − | white-space: nowrap;
| + | |
| − | height: 0;
| + | |
| − | -webkit-transition: height 0s 0.3s;
| + | |
| − | transition: height 0s 0.3s;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu.bt-menu-open ul {
| + | |
| − | height: 90px;
| + | |
| − | -webkit-transition: none;
| + | |
| − | transition: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li,
| + | |
| − | .bt-menu ul li a {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li {
| + | |
| − | display: inline-block;
| + | |
| − | margin: 0 2%;
| + | |
| − | width: 5%;
| + | |
| − | height: 90px;
| + | |
| − | line-height: 90px;
| + | |
| − | opacity: 0;
| + | |
| − | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
| + | |
| − | transition: transform 0.3s, opacity 0.3s;
| + | |
| − | -webkit-transform: translate3d(0,100%,0);
| + | |
| − | transform: translate3d(0,100%,0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li:nth-child(3) {
| + | |
| − | margin-right: 70px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li:nth-child(4) {
| + | |
| − | margin-left: 70px;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu.bt-menu-open ul li {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transform: translate3d(0,0,0);
| + | |
| − | transform: translate3d(0,0,0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu.bt-menu-open ul li:first-child,
| + | |
| − | .bt-menu.bt-menu-open ul li:last-child {
| + | |
| − | -webkit-transition-delay: 0.15s;
| + | |
| − | transition-delay: 0.15s;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu.bt-menu-open ul li:nth-child(2),
| + | |
| − | .bt-menu.bt-menu-open ul li:nth-last-child(2) {
| + | |
| − | -webkit-transition-delay: 0.1s;
| + | |
| − | transition-delay: 0.1s;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu.bt-menu-open ul li:nth-child(3),
| + | |
| − | .bt-menu.bt-menu-open ul li:nth-last-child(3) {
| + | |
| − | -webkit-transition-delay: 0.05s;
| + | |
| − | transition-delay: 0.05s;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu ul li a {
| + | |
| − | display: block;
| + | |
| − | outline: none;
| + | |
| − | color: #fff;
| + | |
| − | text-decoration: none;
| + | |
| − | text-transform: uppercase;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | font-size: 1.15em;
| + | |
| − | -webkit-transition: color 0.2s;
| + | |
| − | transition: color 0.2s;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu ul li a:before {
| + | |
| − | display: none;
| + | |
| − | font-size: 32px;
| + | |
| − | } | + | |
| − | | + | |
| − | .bt-menu ul li a:hover,
| + | |
| − | .bt-menu ul li a:focus {
| + | |
| − | color: #2980b9;
| + | |
| − | } | + | |
| − | | + | |
| − | @media screen and (max-width: 65.1em) {
| + | |
| − | .bt-menu ul li a {
| + | |
| − | font-size: 90%;
| + | |
| − | }
| + | |
| − | } | + | |
| − | | + | |
| − | @media screen and (max-width: 55.5em) {
| + | |
| − | .bt-menu ul li {
| + | |
| − | margin: 0 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li a {
| + | |
| − | font-size: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li a:before {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | } | + | |
| − | | + | |
| − | @media screen and (max-width: 32em) {
| + | |
| − | .bt-menu-trigger {
| + | |
| − | width: 40px;
| + | |
| − | margin-left: -20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li {
| + | |
| − | margin: 0 2%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li:nth-child(3) {
| + | |
| − | margin-right: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li:nth-child(4) {
| + | |
| − | margin-left: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .bt-menu ul li a:before {
| + | |
| − | font-size: 24px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body>
| + | |
| − | | + | |
| − | <header class="codrops-header">
| + | |
| − | </header>
| + | |
| − | <nav id="bt-menu" class="bt-menu">
| + | |
| − | <a href=" #" class=" bt- menu- trigger"> <span>Menu</ span></a> | + | |
| − | <ul>
| + | |
| − | <li><a href=" #" class=" bt-icon icon-user-outline"> About</a ></li> | + | |
| − | < li><a href=" #" class=" bt-icon icon-sun"> Skills</a></ li> | + | |
| − | <li><a href=" #" class=" bt-icon icon-windows"> Work</a ></li> | + | |
| − | < li><a href=" #" class=" bt-icon icon-speaker"> Blog</a></ li> | + | |
| − | < li><a href=" #" class=" bt-icon icon-star"> Clients</a></ li> | + | |
| − | < li><a href=" #" class=" bt-icon icon-bubble"> Contact</a></ li> | + | |
| − | </ul>
| + | |
| − | </nav>
| + | |
| − | </div><!-- /container -->
| + | |
| − | </body>
| + | |
| − | <script>
| + | |
| − | (function() {
| + | |
| − | // http://stackoverflow.com/a/11381730/989439
| + | |
| − | function mobilecheck() {
| + | |
| − | var check = false;
| + | |
| − | (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
| + | |
| − | return check;
| + | |
| − | }
| + | |
| − | | + | |
| − | function init() {
| + | |
| − | | + | |
| − | var menu = document.getElementById( 'bt-menu' ),
| + | |
| − | trigger = menu.querySelector( 'a.bt-menu-trigger' ),
| + | |
| − | // triggerPlay only for demo 6
| + | |
| − | triggerPlay = document.querySelector( 'a.bt-menu-trigger-out' ),
| + | |
| − | // event type (if mobile use touch events)
| + | |
| − | eventtype = mobilecheck() ? 'touchstart' : 'click',
| + | |
| − | resetMenu = function() {
| + | |
| − | classie.remove( menu, 'bt-menu-open' );
| + | |
| − | classie.add( menu, 'bt-menu-close' );
| + | |
| − | },
| + | |
| − | closeClickFn = function( ev ) {
| + | |
| − | resetMenu();
| + | |
| − | overlay.removeEventListener( eventtype, closeClickFn );
| + | |
| − | };
| + | |
| − | | + | |
| − | var overlay = document.createElement('div');
| + | |
| − | overlay.className = 'bt-overlay';
| + | |
| − | menu.appendChild( overlay );
| + | |
| − | | + | |
| − | trigger.addEventListener( eventtype, function( ev ) {
| + | |
| − | ev.stopPropagation();
| + | |
| − | ev.preventDefault();
| + | |
| − | | + | |
| − | if( classie.has( menu, 'bt-menu-open' ) ) {
| + | |
| − | resetMenu();
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | classie.remove( menu, 'bt-menu-close' );
| + | |
| − | classie.add( menu, 'bt-menu-open' );
| + | |
| − | overlay.addEventListener( eventtype, closeClickFn );
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | if( triggerPlay ) {
| + | |
| − | triggerPlay.addEventListener( eventtype, function( ev ) {
| + | |
| − | ev.stopPropagation();
| + | |
| − | ev.preventDefault();
| + | |
| − | | + | |
| − | classie.remove( menu, 'bt-menu-close' );
| + | |
| − | classie.add( menu, 'bt-menu-open' );
| + | |
| − | overlay.addEventListener( eventtype, closeClickFn );
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | init();
| + | |
| − | | + | |
| − | })();
| + | |
| − | /*!
| + | |
| − | * classie - class helper functions
| + | |
| − | * from bonzo https://github.com/ded/bonzo
| + | |
| − | *
| + | |
| − | * classie.has( elem, 'my-class' ) -> true/false
| + | |
| − | * classie.add( elem, 'my-new-class' )
| + | |
| − | * classie.remove( elem, 'my-unwanted-class' )
| + | |
| − | * classie.toggle( elem, 'my-class' )
| + | |
| − | */
| + | |
| − | | + | |
| − | /*jshint browser: true, strict: true, undef: true */
| + | |
| − | /*global define: false */
| + | |
| − | | + | |
| − | ( function( window ) {
| + | |
| − | | + | |
| − | 'use strict';
| + | |
| − | | + | |
| − | // class helper functions from bonzo https://github.com/ded/bonzo
| + | |
| − | | + | |
| − | function classReg( className ) {
| + | |
| − | return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
| + | |
| − | }
| + | |
| − | | + | |
| − | // classList support for class management
| + | |
| − | // altho to be fair, the api sucks because it won't accept multiple classes at once
| + | |
| − | var hasClass, addClass, removeClass;
| + | |
| − | | + | |
| − | if ( 'classList' in document.documentElement ) {
| + | |
| − | hasClass = function( elem, c ) {
| + | |
| − | return elem.classList.contains( c );
| + | |
| − | };
| + | |
| − | addClass = function( elem, c ) {
| + | |
| − | elem.classList.add( c );
| + | |
| − | };
| + | |
| − | removeClass = function( elem, c ) {
| + | |
| − | elem.classList.remove( c );
| + | |
| − | };
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | hasClass = function( elem, c ) {
| + | |
| − | return classReg( c ).test( elem.className );
| + | |
| − | };
| + | |
| − | addClass = function( elem, c ) {
| + | |
| − | if ( !hasClass( elem, c ) ) {
| + | |
| − | elem.className = elem.className + ' ' + c;
| + | |
| − | }
| + | |
| − | };
| + | |
| − | removeClass = function( elem, c ) {
| + | |
| − | elem.className = elem.className.replace( classReg( c ), ' ' );
| + | |
| − | };
| + | |
| − | }
| + | |
| − | | + | |
| − | function toggleClass( elem, c ) {
| + | |
| − | var fn = hasClass( elem, c ) ? removeClass : addClass;
| + | |
| − | fn( elem, c );
| + | |
| − | }
| + | |
| − | | + | |
| − | var classie = {
| + | |
| − | // full names
| + | |
| − | hasClass: hasClass,
| + | |
| − | addClass: addClass,
| + | |
| − | removeClass: removeClass,
| + | |
| − | toggleClass: toggleClass,
| + | |
| − | // short names
| + | |
| − | has: hasClass,
| + | |
| − | add: addClass,
| + | |
| − | remove: removeClass,
| + | |
| − | toggle: toggleClass
| + | |
| − | };
| + | |
| − | | + | |
| − | // transport
| + | |
| − | if ( typeof define === 'function' && define.amd ) {
| + | |
| − | // AMD
| + | |
| − | define( classie );
| + | |
| − | } else {
| + | |
| − | // browser global
| + | |
| − | window.classie = classie;
| + | |
| − | }
| + | |
| − | | + | |
| − | })( window );
| + | |
| − | | + | |
| − | </script>
| + | |
| | </html> | | </html> |
