|
|
Line 1: |
Line 1: |
- | {{CSS/Grid16}}
| |
| <html> | | <html> |
| <style type="text/css"> | | <style type="text/css"> |
- | | + | #button { |
- | #contentSub, .firstHeading, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/ | + | padding: .5em 1em; |
- | | + | text-decoration: none; |
- | #menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover {color: #ccc; background-color: transparent;} /*-- styling for default menu bar links (edit, page, history, etc.) --*/
| + | |
- | | + | |
- | | + | |
- | #top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
| + | |
- | background-color: #ccc;
| + | |
- | border: 0 none;
| + | |
- | display: block;
| + | |
- | height: 14px;
| + | |
- | position: fixed;
| + | |
- | top: 0;
| + | |
- | width: 100%;
| + | |
- | z-index: 10;
| + | |
| } | | } |
- | | + | #effect { |
- | body { background-color: #fff;}
| + | position: relative; |
- | | + | width: 240px; |
- | #globalWrapper, #content { /*-- changes default wiki settings --*/
| + | height: 135px; |
- | width: 100%;
| + | padding: 0.4em; |
- | height: 100%;
| + | |
- | border: 0px;
| + | |
- | background-color: transparent;
| + | |
- | margin: 0px;
| + | |
- | padding: 0px;
| + | |
| } | | } |
- | | + | #effect h3 { |
- | html, body, .wrapper { /*-- changes default wiki settings --*/
| + | margin: 0; |
- | width: 100%;
| + | padding: 0.4em; |
- | height: 100%;
| + | text-align: center; |
- | background-color: transparent;
| + | |
| } | | } |
- |
| |
- | #contentcontainer { /*-- creates container for all content on page --*/
| |
- | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
| |
- | font-weight: 200;
| |
- | font-size: 16px;
| |
- | color: #000;
| |
- | width: 960px;
| |
- | margin-left: auto;
| |
- | margin-right: auto;
| |
- | background-color: #transparent;
| |
- | margin-top: 70px;
| |
- | padding-bottom: 100px;
| |
- | }
| |
- |
| |
- |
| |
- | #loginBarContainer {
| |
- | width: 100%;
| |
- | position: fixed;
| |
- | top: 16px;
| |
- | height: 19px;
| |
- | background-color: #383838;
| |
- | border-bottom: 1px solid #ccc;
| |
- | z-index: 1000;
| |
- | }
| |
- | #loginBar {
| |
- | width: 960px;
| |
- | height: 100%;
| |
- | margin: 0px auto;
| |
- | }
| |
- | #loginBar ul {position:relative;font-weight:900;}
| |
- | #loginBar ul li {position:relative;list-style:none;cursor:pointer; display: table-cell;}
| |
- | #loginBar ul li ul {position:absolute;left:0;right:0;}
| |
- | #loginBar ul .dropToggle {position:relative;color:#FFF;}
| |
- | #loginBar ul .dropToggle:hover, #loginBar ul .active {background:#ccc;}
| |
- | #loginBar ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;
| |
- | -moz-transition:background-color 0.2s ease-in-out;display:block;color:#333;text-decoration:none;}
| |
- | #loginBar ul li a:hover {background:#ccc;}
| |
- |
| |
| </style> | | </style> |
| + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
| + | <script> |
| + | $(function() { |
| + | // run the currently selected effect |
| + | function runEffect() { |
| + | // get effect type from |
| + | var selectedEffect = $( "#effectTypes" ).val(); |
| + | // most effect types need no options passed by default |
| + | var options = {}; |
| + | // some effects have required parameters |
| + | if ( selectedEffect === "scale" ) { |
| + | options = { percent: 0 }; |
| + | } else if ( selectedEffect === "size" ) { |
| + | options = { to: { width: 200, height: 60 } }; |
| + | } |
| + | // run the effect |
| + | $( "#effect" ).toggle( selectedEffect, options, 500 ); |
| + | }; |
| + | // set effect from select menu value |
| + | $( "#button" ).click(function() { |
| + | runEffect(); |
| + | return false; |
| + | }); |
| + | }); |
| + | </script> |
| | | |
- | <div id="loginBarContainer"> | + | <div class="toggler"> |
- | <div id="loginBar"> | + | <div id="effect" class="ui-widget-content ui-corner-all"> |
- | <ul class="no-js">
| + | <h3 class="ui-widget-header ui-corner-all">Toggle</h3> |
- | <li>
| + | <p> |
- | <a href="#" class="dropToggle">iGEM 2014</a>
| + | Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. |
- | <ul>
| + | </p> |
- | <li><a href="#">Dashboard</a></li>
| + | |
- | <li><a href="#">Settings</a></li>
| + | |
- | <li><a href="#">Privacy</a></li>
| + | |
- | <li><a href="#">Help</a></li>
| + | |
- | <li><a href="#">Sign out</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | <li>
| + | |
- | <a href="#" class="dropToggle">wiki tools</a>
| + | |
- | <ul>
| + | |
- | <li><a href="#">Dashboard</a></li>
| + | |
- | <li><a href="#">Help</a></li>
| + | |
- | <li><a href="#">Sign out</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
| </div> | | </div> |
| </div> | | </div> |
- |
| |
- |
| |
- | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
| |
- | <script>
| |
- | $(function () {
| |
- | $('#loginBar > ul').toggleClass('no-js js');
| |
- | $('loginBar .js ul').hide();
| |
- | $(document).on("click", function(e) {
| |
- | var $elem = $(e.target);
| |
- | if ($elem.hasClass('dropToggle')) {
| |
- | $('#loginBar .js ul').not($elem.next('ul')).hide();
| |
- | $elem.next("ul").slideToggle();
| |
- | } else {
| |
- | $('#loginBar .js ul').hide();
| |
- | }
| |
- | });
| |
- |
| |
- | });
| |
- | </script>
| |
- | </body>
| |
| </html> | | </html> |