|
|
| Line 1: |
Line 1: |
| − | <!doctype html>
| + | {{NUDT_CHINA}} |
| − | <html lang="en"> | + | <html> |
| − | <head>
| + | |
| − | <meta charset="utf-8">
| + | |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| + | |
| − | <meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">
| + | |
| − | <title>Responsive Side Menu – Layout Examples – Pure</title>
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | <!--[if lte IE 8]>
| + | |
| − | <link rel="stylesheet" href="/combo/1.18.13?/css/layouts/side-menu-old-ie.css">
| + | |
| − | <![endif]-->
| + | |
| − | <!--[if gt IE 8]><!-->
| + | |
| − | <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
| + | |
| − | <style type="text/css">
| + | |
| − | <!--
| + | |
| − | .pure-menu-item .pure-menu-item {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| | | | |
| − | .pure-menu-children {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | left: 100%;
| |
| − | top: 0;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | z-index: 3;
| |
| − | }
| |
| | | | |
| − | .pure-menu-horizontal .pure-menu-children {
| + | <div class="column full_size" > |
| − | left: 0;
| + | <img src="http://placehold.it/2000x300/d3d3d3/f2f2f2"> |
| − | top: auto;
| + | </div> |
| − | width: inherit;
| + | |
| − | }
| + | |
| | | | |
| − | .pure-menu-allow-hover:hover > .pure-menu-children,
| |
| − | .pure-menu-active > .pure-menu-children {
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | }
| |
| | | | |
| − | /* Vertical Menus - show the dropdown arrow */
| |
| − | .pure-menu-has-children > .pure-menu-link:after {
| |
| − | padding-left: 0.5em;
| |
| − | content: "\25B8";
| |
| − | font-size: small;
| |
| − | }
| |
| | | | |
| − | /* Horizontal Menus - show the dropdown arrow */ | + | <div class="column full_size" > |
| − | .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
| + | <h1> Welcome to iGEM 2017! </h1> |
| − | content: "\25BE";
| + | <p>Your team has been approved and you are ready to start the iGEM season! </p> |
| − | }
| + | </div> |
| | | | |
| − | body {
| + | <div class="clear"></div> |
| − | color: #777;
| + | |
| − | }
| + | |
| | | | |
| − | .pure-img-responsive { | + | <div class="column half_size" > |
| − | max-width: 100%;
| + | <h5>Before you start: </h5> |
| − | height: auto;
| + | <p> Please read the following pages:</p> |
| − | }
| + | <ul> |
| | + | <li> <a href="https://2017.igem.org/Competition">Competition Hub</a> </li> |
| | + | <li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li> |
| | + | <li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li> |
| | + | </ul> |
| | + | </div> |
| | | | |
| − | /* | + | <div class="column half_size" > |
| − | Add transition to containers so they can push in and out.
| + | <div class="highlight"> |
| − | */
| + | <h5> Project description </h5> |
| − | #layout,
| + | <p>MicroRNAs (miRNAs) have been proven to play important roles on post-transcriptional regulation of the gene expression by direct base pairing to target sites within untranslated regions of messenger RNAs. However, the functions of most microRNAs remain to be discovered. Our project attempts to develop a novel sponge for miRNAs, which would knock down the abundance of target miRNA in the cells. Thus the sponge will be a miRNA inhibitor to be used to induce miRNA loss-of-function phenotypes or other further applications like small non-coding RNA-based diagnostic and therapeutic applications.</p> |
| − | #menu,
| + | </div> |
| − | .menu-link { | + | </div> |
| − | -webkit-transition: all 0.2s ease-out;
| + | |
| − | -moz-transition: all 0.2s ease-out;
| + | |
| − | -ms-transition: all 0.2s ease-out;
| + | |
| − | -o-transition: all 0.2s ease-out;
| + | |
| − | transition: all 0.2s ease-out;
| + | |
| − | }
| + | |
| | | | |
| − | /* | + | <div class="column full_size" > |
| − | This is the parent `<div>` that contains the menu and the content area.
| + | <h5> Wiki template information </h5> |
| − | */
| + | <p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2017.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p> |
| − | #layout {
| + | |
| − | position: relative;
| + | |
| − | left: 0;
| + | |
| − | padding-left: 0;
| + | |
| − | }
| + | |
| − | #layout.active #menu {
| + | |
| − | left: 150px;
| + | |
| − | width: 150px;
| + | |
| − | }
| + | |
| | | | |
| − | #layout.active .menu-link {
| + | </div> |
| − | left: 150px;
| + | |
| − | }
| + | |
| − | /* | + | |
| − | The content `<div>` is where all your content goes.
| + | |
| − | */
| + | |
| − | .content {
| + | |
| − | margin: 0 auto;
| + | |
| − | padding: 0 2em;
| + | |
| − | max-width: 800px;
| + | |
| − | margin-bottom: 50px;
| + | |
| − | line-height: 1.6em;
| + | |
| − | }
| + | |
| | | | |
| − | .header {
| |
| − | margin: 0;
| |
| − | color: #333;
| |
| − | text-align: center;
| |
| − | padding: 2.5em 2em 0;
| |
| − | border-bottom: 1px solid #eee;
| |
| − | }
| |
| − | .header h1 {
| |
| − | margin: 0.2em 0;
| |
| − | font-size: 3em;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − | .header h2 {
| |
| − | font-weight: 300;
| |
| − | color: #ccc;
| |
| − | padding: 0;
| |
| − | margin-top: 0;
| |
| − | }
| |
| | | | |
| − | .content-subhead {
| |
| − | margin: 50px 0 20px 0;
| |
| − | font-weight: 300;
| |
| − | color: #888;
| |
| − | }
| |
| | | | |
| | | | |
| | + | <div class="column half_size" > |
| | + | <h5> Editing your wiki </h5> |
| | + | <p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p> |
| | + | <p> <a href="https://2017.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p> |
| | | | |
| − | /* | + | </div> |
| − | The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
| + | |
| − | appears on the left side of the page.
| + | |
| − | */
| + | |
| | | | |
| − | #menu {
| |
| − | margin-left: -150px; /* "#menu" width */
| |
| − | width: 150px;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | bottom: 0;
| |
| − | z-index: 1000; /* so the menu or its navicon stays above all content */
| |
| − | background: #191818;
| |
| − | overflow-y: auto;
| |
| − | -webkit-overflow-scrolling: touch;
| |
| − | }
| |
| − | /*
| |
| − | All anchors inside the menu should be styled like this.
| |
| − | */
| |
| − | #menu a {
| |
| − | color: #999;
| |
| − | border: none;
| |
| − | padding: 0.6em 0 0.6em 0.6em;
| |
| − | }
| |
| | | | |
| − | /*
| + | <div class="column half_size" > |
| − | Remove all background/borders, since we are applying them to #menu.
| + | <h5>Tips</h5> |
| − | */
| + | <p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p> |
| − | #menu .pure-menu,
| + | <ul> |
| − | #menu .pure-menu ul {
| + | <li>State your accomplishments! Tell people what you have achieved from the start. </li> |
| − | border: none;
| + | <li>Be clear about what you are doing and how you plan to do this.</li> |
| − | background: transparent;
| + | <li>You have a global audience! Consider the different backgrounds that your users come from.</li> |
| − | }
| + | <li>Make sure information is easy to find; nothing should be more than 3 clicks away. </li> |
| | + | <li>Avoid using very small fonts and low contrast colors; information should be easy to read. </li> |
| | + | <li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li> |
| | + | <li>Have lots of fun! </li> |
| | + | </ul> |
| | + | </div> |
| | | | |
| − | /*
| |
| − | Add that light border to separate items into groups.
| |
| − | */
| |
| − | #menu .pure-menu ul,
| |
| − | #menu .pure-menu .menu-item-divided {
| |
| − | border-top: 1px solid #333;
| |
| − | }
| |
| − | /*
| |
| − | Change color of the anchor links on hover/focus.
| |
| − | */
| |
| − | #menu .pure-menu li a:hover,
| |
| − | #menu .pure-menu li a:focus {
| |
| − | background: #333;
| |
| − | }
| |
| | | | |
| − | /*
| + | <div class="column half_size" > |
| − | This styles the selected menu item `<li>`.
| + | <h5>Inspiration</h5> |
| − | */
| + | <p> You can also view other team wikis for inspiration! Here are some examples:</p> |
| − | #menu .pure-menu-selected,
| + | <ul> |
| − | #menu .pure-menu-heading {
| + | <li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li> |
| − | background: #1f8dd6;
| + | <li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li> |
| − | }
| + | <li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li> |
| − | /*
| + | <li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li> |
| − | This styles a link within a selected menu item `<li>`.
| + | <li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li> |
| − | */
| + | <li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li> |
| − | #menu .pure-menu-selected a {
| + | </ul> |
| − | color: #fff;
| + | </div> |
| − | }
| + | |
| | | | |
| − | /*
| + | <div class="column half_size" > |
| − | This styles the menu heading.
| + | <h5> Uploading pictures and files </h5> |
| − | */
| + | <p> You can upload your pictures and files to the iGEM 2017 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br /> |
| − | #menu .pure-menu-heading {
| + | When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)<br><br> |
| − | font-size: 110%;
| + | |
| − | color: #fff;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| | | | |
| − | /* -- Dynamic Button For Responsive Menu -------------------------------------*/
| + | <a href="https://2017.igem.org/Special:Upload"> |
| − | | + | UPLOAD FILES |
| − | /*
| + | </a> |
| − | The button to open/close the Menu is custom-made and not part of Pure. Here's
| + | </p> |
| − | how it works:
| + | |
| − | */
| + | |
| − | | + | |
| − | /*
| + | |
| − | `.menu-link` represents the responsive menu toggle that shows/hides on
| + | |
| − | small screens.
| + | |
| − | */
| + | |
| − | .menu-link {
| + | |
| − | position: fixed;
| + | |
| − | display: block; /* show this only on small screens */
| + | |
| − | top: 0;
| + | |
| − | left: 0; /* "#menu width" */
| + | |
| − | background: #000;
| + | |
| − | background: rgba(0,0,0,0.7);
| + | |
| − | font-size: 10px; /* change this value to increase/decrease button size */
| + | |
| − | z-index: 10;
| + | |
| − | width: 2em;
| + | |
| − | height: auto;
| + | |
| − | padding: 2.1em 1.6em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu-link:hover,
| + | |
| − | .menu-link:focus {
| + | |
| − | background: #000;
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu-link span {
| + | |
| − | position: relative;
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu-link span,
| + | |
| − | .menu-link span:before,
| + | |
| − | .menu-link span:after {
| + | |
| − | background-color: #fff;
| + | |
| − | width: 100%;
| + | |
| − | height: 0.2em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu-link span:before,
| + | |
| − | .menu-link span:after {
| + | |
| − | position: absolute;
| + | |
| − | margin-top: -0.6em;
| + | |
| − | content: " ";
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu-link span:after {
| + | |
| − | margin-top: 0.6em;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* -- Responsive Styles (Media Queries) ------------------------------------- */
| + | |
| − | | + | |
| − | /*
| + | |
| − | Hides the menu at `48em`, but modify this based on your app's needs.
| + | |
| − | */
| + | |
| − | @media (min-width: 48em) {
| + | |
| − | | + | |
| − | .header,
| + | |
| − | .content {
| + | |
| − | padding-left: 2em;
| + | |
| − | padding-right: 2em;
| + | |
| − | }
| + | |
| − | | + | |
| − | #layout {
| + | |
| − | padding-left: 150px; /* left col width "#menu" */
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | #menu {
| + | |
| − | left: 150px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu-link {
| + | |
| − | position: fixed;
| + | |
| − | left: 150px;
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #layout.active .menu-link {
| + | |
| − | left: 150px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media (max-width: 48em) {
| + | |
| − | /* Only apply this when the window is small. Otherwise, the following
| + | |
| − | case results in extra padding on the left:
| + | |
| − | * Make the window small.
| + | |
| − | * Tap the menu to trigger the active state.
| + | |
| − | * Make the window large again.
| + | |
| − | */
| + | |
| − | #layout.active {
| + | |
| − | position: relative;
| + | |
| − | left: 150px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | -->
| + | |
| − | </style>
| + | |
| − | <!--<![endif]-->
| + | |
| − | <!--[if lt IE 9]>
| + | |
| − | <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
| + | |
| − | <![endif]-->
| + | |
| − | <script>
| + | |
| − | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
| + | |
| − | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
| + | |
| − | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
| + | |
| − | })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
| + | |
| − |
| + | |
| − | ga('create', 'UA-41480445-1', 'purecss.io');
| + | |
| − | ga('send', 'pageview');
| + | |
| − | </script>
| + | |
| − | </head>
| + | |
| − | <body>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div id="layout">
| + | |
| − | <!-- Menu toggle -->
| + | |
| − | <a href=" #menu" id="menuLink" class="menu-link"> | + | |
| − | <!-- Hamburger icon -->
| + | |
| − | <span></span>
| + | |
| − | </a>
| + | |
| − | | + | |
| − | <div id="menu">
| + | |
| − | <div class="pure-menu">
| + | |
| − | <img class="pure-img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
| + | |
| − | <!--<a class="pure-menu-heading" href="#">Company</a>-->
| + | |
| − | <div class="custom-restricted-width">
| + | |
| − | <ul class="pure-menu-list">
| + | |
| − | <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
| + | |
| − | <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
| + | |
| − | | + | |
| − | <li class="pure-menu-item" class="menu-item-divided pure-menu-selected">
| + | |
| − | <a href="#" class="pure-menu-link">Services</a>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
| + | |
| − | <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
| + | |
| − | <a href="#" id="menuLink1" class="pure-menu-link">More</a>
| + | |
| − | <ul class="pure-menu-children">
| + | |
| − | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
| + | |
| − | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
| + | |
| − | <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
| + | |
| − | <a href="#" id="menuLink1" class="pure-menu-link">Even More</a>
| + | |
| − | <ul class="pure-menu-children">
| + | |
| − | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Foo</a></li>
| + | |
| − | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Bar</a></li>
| + | |
| − | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Baz</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div id="main">
| + | |
| − | <div class="header">
| + | |
| − | <h1>Page Title</h1>
| + | |
| − | <h2>A subtitle for your page goes here</h2>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="content">
| + | |
| − | <h2 class="content-subhead">How to use this layout</h2>
| + | |
| − | <p>
| + | |
| − | To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/css/layouts/side-menu.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <h2 class="content-subhead">Now Let's Speak Some Latin</h2>
| + | |
| − | <p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <div class="pure-g">
| + | |
| − | <div class="pure-u-1-4">
| + | |
| − | <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake">
| + | |
| − | </div>
| + | |
| − | <div class="pure-u-1-4">
| + | |
| − | <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
| + | |
| − | </div>
| + | |
| − | <div class="pure-u-1-4">
| + | |
| − | <img class="pure-img-responsive" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store">
| + | |
| − | </div>
| + | |
| − | <div class="pure-u-1-4">
| + | |
| − | <img class="pure-img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <h2 class="content-subhead">Try Resizing your Browser</h2>
| + | |
| − | <p>
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | | | |
| Line 410: |
Line 92: |
| | | | |
| | | | |
| − | <script type="text/javascript" >
| |
| − | (function (window, document) {
| |
| − |
| |
| − | var layout = document.getElementById('layout'),
| |
| − | menu = document.getElementById('menu'),
| |
| − | menuLink = document.getElementById('menuLink'),
| |
| − | content = document.getElementById('main');
| |
| − |
| |
| − | function toggleClass(element, className) {
| |
| − | var classes = element.className.split(/\s+/),
| |
| − | length = classes.length,
| |
| − | i = 0;
| |
| − |
| |
| − | for(; i < length; i++) {
| |
| − | if (classes[i] === className) {
| |
| − | classes.splice(i, 1);
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | // The className is not found
| |
| − | if (length === classes.length) {
| |
| − | classes.push(className);
| |
| − | }
| |
| − |
| |
| − | element.className = classes.join(' ');
| |
| − | }
| |
| − |
| |
| − | function toggleAll(e) {
| |
| − | var active = 'active';
| |
| − |
| |
| − | e.preventDefault();
| |
| − | toggleClass(layout, active);
| |
| − | toggleClass(menu, active);
| |
| − | toggleClass(menuLink, active);
| |
| − | }
| |
| − |
| |
| − | menuLink.onclick = function (e) {
| |
| − | toggleAll(e);
| |
| − | };
| |
| − |
| |
| − | content.onclick = function(e) {
| |
| − | if (menu.className.indexOf('active') !== -1) {
| |
| − | toggleAll(e);
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | }(this, this.document));
| |
| − | (function (window, document) {
| |
| − | 'use strict';
| |
| − |
| |
| − | // Enable drop-down menus in Pure
| |
| − | // Inspired by YUI3 gallery-simple-menu by Julien LeComte
| |
| − | // [https://github.com/yui/yui3-gallery/blob/master/src/gallery-simple-menu/js/simple-menu.js]
| |
| − |
| |
| − | function PureDropdown(dropdownParent) {
| |
| − |
| |
| − | var PREFIX = 'pure-',
| |
| − | ACTIVE_CLASS_NAME = PREFIX + 'menu-active',
| |
| − | ARIA_ROLE = 'role',
| |
| − | ARIA_HIDDEN = 'aria-hidden',
| |
| − | MENU_OPEN = 0,
| |
| − | MENU_CLOSED = 1,
| |
| − | MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
| |
| − | MENU_ACTIVE_SELECTOR = '.pure-menu-active',
| |
| − | MENU_LINK_SELECTOR = '.pure-menu-link',
| |
| − | MENU_SELECTOR = '.pure-menu-children',
| |
| − | DISMISS_EVENT = (window.hasOwnProperty &&
| |
| − | window.hasOwnProperty('ontouchstart')) ?
| |
| − | 'touchstart' : 'mousedown',
| |
| − |
| |
| − | ARROW_KEYS_ENABLED = true,
| |
| − |
| |
| − | ddm = this; // drop down menu
| |
| − |
| |
| − | this._state = MENU_CLOSED;
| |
| − |
| |
| − | this.show = function () {
| |
| − | if (this._state !== MENU_OPEN) {
| |
| − | this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);
| |
| − | this._menu.setAttribute(ARIA_HIDDEN, false);
| |
| − | this._state = MENU_OPEN;
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | this.hide = function () {
| |
| − | if (this._state !== MENU_CLOSED) {
| |
| − | this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);
| |
| − | this._menu.setAttribute(ARIA_HIDDEN, true);
| |
| − | this._link.focus();
| |
| − | this._state = MENU_CLOSED;
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | this.toggle = function () {
| |
| − | this[this._state === MENU_CLOSED ? 'show' : 'hide']();
| |
| − | };
| |
| − |
| |
| − | this.halt = function (e) {
| |
| − | e.stopPropagation();
| |
| − | e.preventDefault();
| |
| − | };
| |
| − |
| |
| − | this._dropdownParent = dropdownParent;
| |
| − | this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR);
| |
| − | this._menu = this._dropdownParent.querySelector(MENU_SELECTOR);
| |
| − | this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR);
| |
| − |
| |
| − | // Set ARIA attributes
| |
| − | this._link.setAttribute('aria-haspopup', 'true');
| |
| − | this._menu.setAttribute(ARIA_ROLE, 'menu');
| |
| − | this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id'));
| |
| − | this._menu.setAttribute('aria-hidden', 'true');
| |
| − | [].forEach.call(
| |
| − | this._menu.querySelectorAll('li'),
| |
| − | function(el){
| |
| − | el.setAttribute(ARIA_ROLE, 'presentation');
| |
| − | }
| |
| − | );
| |
| − | [].forEach.call(
| |
| − | this._menu.querySelectorAll('a'),
| |
| − | function(el){
| |
| − | el.setAttribute(ARIA_ROLE, 'menuitem');
| |
| − | }
| |
| − | );
| |
| − |
| |
| − | // Toggle on click
| |
| − | this._link.addEventListener('click', function (e) {
| |
| − | e.stopPropagation();
| |
| − | e.preventDefault();
| |
| − | ddm.toggle();
| |
| − | });
| |
| − |
| |
| − | // Keyboard navigation
| |
| − | document.addEventListener('keydown', function (e) {
| |
| − | var currentLink,
| |
| − | previousSibling,
| |
| − | nextSibling,
| |
| − | previousLink,
| |
| − | nextLink;
| |
| − |
| |
| − | // if the menu isn't active, ignore
| |
| − | if (ddm._state !== MENU_OPEN) {
| |
| − | return;
| |
| − | }
| |
| − |
| |
| − | // if the menu is the parent of an open, active submenu, ignore
| |
| − | if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) {
| |
| − | return;
| |
| − | }
| |
| − |
| |
| − | currentLink = ddm._menu.querySelector(':focus');
| |
| − |
| |
| − | // Dismiss an open menu on ESC
| |
| − | if (e.keyCode === 27) {
| |
| − | /* Esc */
| |
| − | ddm.halt(e);
| |
| − | ddm.hide();
| |
| − | }
| |
| − | // Go to the next link on down arrow
| |
| − | else if (ARROW_KEYS_ENABLED && e.keyCode === 40) {
| |
| − | /* Down arrow */
| |
| − | ddm.halt(e);
| |
| − | // get the nextSibling (an LI) of the current link's LI
| |
| − | nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null;
| |
| − | // if the nextSibling is a text node (not an element), go to the next one
| |
| − | while (nextSibling && nextSibling.nodeType !== 1) {
| |
| − | nextSibling = nextSibling.nextSibling;
| |
| − | }
| |
| − | nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;
| |
| − | // if there is no currently focused link, focus the first one
| |
| − | if (!currentLink) {
| |
| − | ddm._menu.querySelector('.pure-menu-link').focus();
| |
| − | }
| |
| − | else if (nextLink) {
| |
| − | nextLink.focus();
| |
| − | }
| |
| − | }
| |
| − | // Go to the previous link on up arrow
| |
| − | else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {
| |
| − | /* Up arrow */
| |
| − | ddm.halt(e);
| |
| − | // get the currently focused link
| |
| − | previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null;
| |
| − | while (previousSibling && previousSibling.nodeType !== 1) {
| |
| − | previousSibling = previousSibling.previousSibling;
| |
| − | }
| |
| − | previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null;
| |
| − | // if there is no currently focused link, focus the last link
| |
| − | if (!currentLink) {
| |
| − | ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();
| |
| − | }
| |
| − | // else if there is a previous item, go to the previous item
| |
| − | else if (previousLink) {
| |
| − | previousLink.focus();
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | // Dismiss an open menu on outside event
| |
| − | document.addEventListener(DISMISS_EVENT, function (e) {
| |
| − | var target = e.target;
| |
| − | if (target !== ddm._link && !ddm._menu.contains(target)) {
| |
| − | ddm.hide();
| |
| − | ddm._link.blur();
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | }
| |
| − |
| |
| − | function initDropdowns() {
| |
| − | var dropdownParents = document.querySelectorAll('.pure-menu-has-children');
| |
| − | for (var i = 0; i < dropdownParents.length; i++) {
| |
| − | var ddm = new PureDropdown(dropdownParents[i]);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | initDropdowns();
| |
| | | | |
| − | }(this, this.document));
| |
| | | | |
| − | </script>
| |
| | | | |
| − | </body>
| |
| | </html> | | </html> |
