Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

first commit

  • Loading branch information...
commit e982ef9e93ee728aebbf3e97cfa51bfd71d47ea4 0 parents
@indyplanets authored
0  README
No changes.
193 css/style.css
@@ -0,0 +1,193 @@
+/* Reset */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ font-family: clean, sans-serif;
+}
+/* Globals */
+a {text-decoration: none; color: #ff6b31; }
+a:hover {text-decoration: underline;}
+h1,h2 {font-family: georgia, serif;}
+h1 {font-size: 24px;margin-bottom: 5%;}
+h2 {font-size: 18px;margin-bottom: 10px;}
+p {font-size: 14px;margin-bottom: 16px; line-height: 18px;}
+.page-title {font-size: 26px;text-align: center;}
+.container {margin: 5% auto;width: 90%;}
+
+[role='main'] {
+ margin: 5% auto;
+}
+[role='navigation'] {
+ margin: 0 auto;
+ width: 100%;
+ background-color: #333;
+}
+.js [role='navigation'] {
+ display: none;
+}
+.menu-button {
+ display: block;
+ padding: 1em;
+ background: #000;
+ color: #fff;
+ background-image: url('../images/arrow-down.png');
+ background-repeat: no-repeat;
+ background-position: 93% 18px;
+}
+[role='navigation']:after { /* clearfix */
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: " ";
+ clear: both;
+ height: 0;
+}
+
+[role='navigation'] li {
+ position: relative;
+ list-style: none;
+ display: block;
+ background-color: #333;
+ width: 100%;
+}
+
+[role='navigation'] li.item-with-ul {
+ background-color: #222;
+}
+
+[role='navigation'] li a {
+ margin-right: 20%;
+ display: block;
+ color: #ddd;
+ border-bottom: 1px solid #111;
+}
+
+[role='navigation'] li a.link-with-ul {
+ border-right: 1px solid #222;
+}
+
+[role='navigation'] .top-level a {
+ position: relative;
+ display: block;
+ background-color: #333;
+ padding: 1em;
+ z-index: 2;
+}
+[role='navigation'] li ul {
+ width: 100%;
+}
+[role='navigation'] li ul li {
+ float: none;
+ width: 100%;
+}
+
+[role='navigation'] li ul li a {
+ display: block;
+ background-color: #333;
+
+}
+
+[role='navigation'] li ul {
+ position: relative;
+ border-top: 1px solid #333;
+ border-bottom: 1px solid #333;
+}
+
+[role='navigation'] .item-with-ul {
+ background-image: url('../images/arrow-down.png');
+ background-repeat: no-repeat;
+ background-position: 93% 18px;
+}
+
+.sub-menu {
+ display: none;
+}
+.site-footer {
+ margin: 1em 0;
+ overflow: hidden;
+}
+.site-footer li {
+ list-style: none;
+ margin: 0;
+ display: block;
+ float: left;
+}
+.site-footer li a {
+ padding: .5em .5em .5em 0;
+}
+
+@media all and (min-width: 800px) {
+ p {font-size: 100%; margin-bottom: 1.5em; line-height: 1.25em;}
+ .js [role='navigation'] {
+ display: block;
+ }
+ .menu-button {
+ display: none;
+ }
+ [role='navigation'] li {
+ position: relative;
+ list-style: none;
+ float: left;
+ display: block;
+ background-color: #333;
+ width: 20%;
+ }
+ .no-touch .item-with-ul:hover > ul {
+ opacity: 1;
+ top: 3.1em;
+ position: absolute;
+ }
+ [role='navigation'] li a {
+ border-left: 1px solid #000;
+ border-bottom: none;
+ }
+ .no-touch [role='navigation'] li ul {
+ position: absolute;
+ top: auto;
+ left: 0;
+ opacity: 0;
+ visibility: hidden;
+ height: 1px;
+ z-index: 1;
+ -webkit-transition: .4s all ease;
+ -moz-transition: .4s all ease;
+ -o-transition: .4s all ease;
+ -ms-transition: .4s all ease;
+ transition: .4s all ease;
+ }
+ [role='navigation'] li ul li a {
+ border-bottom: none;
+ }
+ .touch [role='navigation'] li ul.sub-menu {
+ position: absolute;
+ top: auto;
+ left: 0;
+ display: none;
+ z-index: 1;
+ }
+
+ .no-touch .item-with-ul:hover > ul {
+ visibility: visible;
+ opacity: 1;
+ height: auto;
+ display: block;
+ border-right: 1px solid #000;
+ border-bottom: 1px solid #000;
+ }
+}
BIN  images/arrow-down.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0;">
+<title>Flexible, Device Agnostic Navigation</title>
+<link href="css/style.css" rel="stylesheet" type="text/css" / >
+<script type="text/javascript" src="js/modernizr.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script type="text/javascript">
+// global variables
+var compareWidth, //previous width used for comparison
+ detector, //the element used to compare changes
+ smallScreen; // Size of maximum width of single column media query
+jQuery(document).ready(function(){
+
+ //set the initial values
+ detector = jQuery('.js');
+ compareWidth = detector.width();
+ smallScreen = '820';
+
+ if ($(window).width() < smallScreen) {
+ $("body").addClass("one-column");
+ }
+ else {
+ $("body").addClass("two-column");
+ }
+
+ // Toggle for nav menu
+ $('.js .menu-button').click(function() {
+ $('[role="navigation"]').slideToggle('fast', function() {});
+ });
+ // Toggle click for sub-menus on touch and or small screens
+ $('.touch .item-with-ul, .one-column .item-with-ul').click(function() {
+ $(this).find('.sub-menu').slideToggle('fast', function() {});
+ });
+ // Credit: http://webdeveloper2.com/2011/06/trigger-javascript-on-css3-media-query-change/
+ jQuery(window).resize(function(){
+ //compare everytime the window resize event fires
+ if(detector.width()!=compareWidth){
+
+ //a change has occurred so update the comparison variable
+ compareWidth = detector.width();
+
+ if (compareWidth < smallScreen) {
+ $("body").removeClass("two-column").addClass("one-column");
+ }
+ else {
+ $("body").removeClass("one-column").addClass("two-column");
+ }
+ if (compareWidth >= smallScreen) {
+ $('[role="navigation"]').show();
+ }
+ }
+
+ });
+
+ });
+</script>
+</head>
+ <body>
+ <div class="container">
+ <h1 class="page-title">FlexNav</h1>
+ <div class='menu-button'>Menu</div>
+ <nav>
+ <ul id="nav" role="navigation">
+ <li class="top-level item-with-ul"><a href="" class="link-with-ul">Item #1</a>
+ <ul class="sub-menu">
+ <li><a href="">Sub 1 Item #1</a></li>
+ <li><a href="">Sub 1 Item #2</a></li>
+ <li><a href="">Sub 1 Item #3</a></li>
+ <li><a href="">Sub 1 Item #4</a></li>
+ </ul>
+ </li>
+
+ <li class="top-level item-with-ul"><a href="" class="link-with-ul">Item #2</a>
+ <ul class="sub-menu">
+ <li><a href="">Sub 1 Item #1</a></li>
+ <li><a href="">Sub 1 Item #2</a></li>
+ <li><a href="">Sub 1 Item #3</a></li>
+ </ul>
+ </li>
+
+ <li class="top-level"><a href="">Item #3</a>
+ </li>
+ <li class="top-level item-with-ul"><a href="" class="link-with-ul">Item #4</a>
+ <ul class="sub-menu">
+ <li><a href="">Sub 1 Item #1</a></li>
+ <li><a href="">Sub 1 Item #1</a></li>
+ <li><a href="">Sub 1 Item #1</a></li>
+ </ul>
+ </li>
+
+ <li class="top-level"><a href="">Item #5</a>
+ </li>
+ </ul>
+ </nav>
+
+ <section role="main">
+ <h1>A Device Agnostic Approach to Complex Site Navigation</h1>
+ <h2>The Details</h2>
+ <p>The (ugly as sin) mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using click events. This is something I use to test different navigation techniques and may change as I iterate over different solutions to the problem. Basically I want a simple model to build upon when working on sites from scratch.</p>
+
+ <h2>Caveats</h2>
+ <p>Right now you have to refresh after resizing through the media query (currently only one at 820px). This is the case in order to see the sub menu of each top level menu item. I'd like to be able to have a seamless interaction when resizing the browser but I believe web designers are the only users that are testing for responsiveness. I'm also pulling in <a href="http://www.modernizr.com/">Modernizr</a> and the latest jQuery. More details to come as I keep testing.</p>
+
+ </section>
+ <footer class="site-footer" role="contentinfo">
+ <ul>
+ <li>Code by <a href="http://jasonweaver.name">Jason Weaver</a></li>
+ <li><a href="mailto:indyplanets@gmail.com">Contact Me</a></li>
+ </ul>
+ </footer>
+ </div>
+
+ <script>
+ window._gaq = [['_setAccount','UA-22138578-1'],['_trackPageview'],['_trackPageLoadTime']];
+ Modernizr.load({
+ load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
+ });
+ </script>
+
+</body>
4 js/modernizr.js
@@ -0,0 +1,4 @@
+/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
+ * Build: http://www.modernizr.com/download/#-flexbox-audio-video-touch-iepp-respond-mq-cssclasses-teststyles-prefixes-load
+ */
+;window.Modernizr=function(a,b,c){function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o={},p={},q={},r=[],s=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["&shy;","<style>",a,"</style>"].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},t=function(b){if(a.matchMedia)return matchMedia(b).matches;var c;s("@media "+b+" { #"+i+" { position: absolute; } }",function(b){c=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).position=="absolute"});return c},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var B=function(c,d){var f=c.join(""),g=d.length;s(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||j.touch.offsetTop===9},g,d)}([,["@media (",n.join("touch-enabled),("),i,")","{#touch{top:9px;position:absolute}}"].join("")],[,"touch"]);o.flexbox=function(){function c(a,b,c,d){a.style.cssText=n.join(b+":"+c+";")+(d||"")}function a(a,b,c,d){b+=":",a.style.cssText=(b+n.join(c+";"+b)).slice(0,-b.length)+(d||"")}var d=b.createElement("div"),e=b.createElement("div");a(d,"display","box","width:42px;padding:0;"),c(e,"box-flex","1","width:10px;"),d.appendChild(e),g.appendChild(d);var f=e.offsetWidth===42;d.removeChild(e),g.removeChild(d);return f},o.touch=function(){return e.touch},o.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType){c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"');var d='video/mp4; codecs="avc1.42E01E';c.h264=a.canPlayType(d+'"')||a.canPlayType(d+', mp4a.40.2"'),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}}catch(e){}return c},o.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"'),c.mp3=a.canPlayType("audio/mpeg;"),c.wav=a.canPlayType('audio/wav; codecs="1"'),c.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}catch(d){}return c};for(var C in o)w(o,C)&&(u=C.toLowerCase(),e[u]=o[C](),r.push((e[u]?"":"no-")+u));x(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b<g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{\}]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;d.getCSS=function(a,b){if(a+""===c)return"";var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);return b.join("\n")},d.writeHTML=function(){var a=-1;r=r||b.body;while(++a<g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()},d.restoreHTML=function(){o.innerHTML="",m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=""},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}(a,b),e._version=d,e._prefixes=n,e.mq=t,e.testStyles=s,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+r.join(" "):"");return e}(this,this.document),function(a,b){function u(){r(!0)}a.respond={},respond.update=function(){},respond.mediaQueriesSupported=b;if(!b){var c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=j.getElementsByTagName("link"),l=[],m=function(){var b=k,c=b.length,d=0,e,f,g,i;for(;d<c;d++)e=b[d],f=e.href,g=e.media,i=e.rel&&e.rel.toLowerCase()==="stylesheet",!!f&&i&&!h[f]&&(!/^([a-zA-Z]+?:(\/\/)?(www\.)?)/.test(f)||f.replace(RegExp.$1,"").split("/")[0]===a.location.host?l.push({href:f,media:g}):h[f]=!0);n()},n=function(){if(l.length){var a=l.shift();s(a.href,function(b){o(b,a.href,a.media),h[a.href]=!0,n()})}},o=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),g=d&&d.length||0,b=b.substring(0,b.lastIndexOf("/")),h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c,j=0,k,l,m,n,o;b.length&&(b+="/"),i&&(g=1);for(;j<g;j++){k=0,i?(l=c,f.push(h(a))):(l=d[j].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),n=l.split(","),o=n.length;for(;k<o;k++)m=n[k],e.push({media:m.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:f.length-1,minw:m.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:m.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}r()},p,q,r=function(a){var b="clientWidth",h=d[b],l=c.compatMode==="CSS1Compat"&&h||c.body[b]||h,m={},n=c.createDocumentFragment(),o=k[k.length-1],s=(new Date).getTime();if(a&&p&&s-p<i)clearTimeout(q),q=setTimeout(r,i);else{p=s;for(var t in e){var u=e[t];if(!u.minw&&!u.maxw||(!u.minw||u.minw&&l>=u.minw)&&(!u.maxw||u.maxw&&l<=u.maxw))m[u.media]||(m[u.media]=[]),m[u.media].push(f[u.rules])}for(var t in g)g[t]&&g[t].parentNode===j&&j.removeChild(g[t]);for(var t in m){var v=c.createElement("style"),w=m[t].join("\n");v.type="text/css",v.media=t,v.styleSheet?v.styleSheet.cssText=w:v.appendChild(c.createTextNode(w)),n.appendChild(v),g.push(v)}j.insertBefore(n,o.nextSibling)}},s=function(a,b){var c=t();if(!!c){c.open("GET",a,!0),c.onreadystatechange=function(){c.readyState==4&&(c.status==200||c.status==304)&&b(c.responseText)};if(c.readyState==4)return;c.send()}},t=function(){var a=!1,b=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new XMLHttpRequest}],c=b.length;while(c--){try{a=b[c]()}catch(d){continue}break}return function(){return a}}();m(),respond.update=m,a.addEventListener?a.addEventListener("resize",u,!1):a.attachEvent&&a.attachEvent("onresize",u)}}(this,Modernizr.mq("only all")),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b=="c"?z:y;q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){return o.call(a)=="[object Array]"},B=function(a){return Object(a)===a},C=function(a){return typeof a=="string"},D=function(a){return o.call(a)=="[object Function]"},E=[],F={},G,H;H=function(a){function f(a){var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=F[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=E[h](f);return f}function e(a,b,e,g,h){var i=f(a),j=i.autoCallback;if(!i.bypass){b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);if(i.instead)return i.instead(a,b,e,g,h);e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)})}}function b(a,b){function c(a){if(C(a))e(a,h,b,0,d);else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;c(f),c(g),a.complete&&b.load(a.complete)}var g,h,i=this.yepnope.loader;if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g<a.length;g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);else B(a)&&b(a,i)},H.addPrefix=function(a,b){F[a]=b},H.addFilter=function(a){E.push(a)},H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"},0)),a.yepnope=d()}(this,this.document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
17 js/my_script.js
@@ -0,0 +1,17 @@
+startList = function() {
+ if (document.all&&document.getElementById) {
+ navRoot = document.getElementById("nav");
+ for (i=0; i<navRoot.childNodes.length; i++) {
+ node = navRoot.childNodes[i];
+ if (node.nodeName=="LI") {
+ node.onmouseover=function() {
+ this.className+=" over";
+ }
+ node.onmouseout=function() {
+ this.className=this.className.replace(" over", "");
+ }
+ }
+ }
+ }
+ }
+window.onload=startList;
Please sign in to comment.
Something went wrong with that request. Please try again.