オフキャンバスナビゲーションが「短い」ページでクリッピングされた

Question

このキャンバスのないナビゲーションは、コンテンツがほとんどないサイトのスプラッシュページを除いて正常に機能し、垂直バリアを作成するようです。ブラウザウインドウがブレークポイントまで狭まり、ユーザーがハンバーガーをクリックすると、ナビゲーション内の最下部のはアイテムがクリップされます。私は幸運のないオーバフローとZ-指数でつまらない。 （デビッド・ブッシェルの記事に基づいて、このほとんどの）

HTML：

<div id="outer-wrap"> 
<div id="inner-wrap"> 
    <header id="top" role="banner"> 
     <div class="block"> 
      <h1 class="block-title">another title here</h1> 
      <a class="nav-btn" id="nav-open-btn" href="#nav">-Nav-</a> 
     </div> 
    </header> 
    <nav id="nav" role="navigation"> 
     <div class="block"> 
      <ul><!-- 
      --><li><a href="index.php">Home</a></li><!-- 
      --><li><a href="bj-cole.php">Music</a></li><!-- 
      --><li><a href="john-greenway.php">Authors</a></li><!-- 
      --><li><a href="manhood.php">Ideas</a></li><!-- 
      --><li><a href="eugene-atget.php">Design</a></li><!-- 
      --><li><a href="eclecticism.php">Other</a></li><!-- 
      --><li><a href="mail02.php">Contact</a></li> 
      </ul> 
      <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a> 
     </div> 
    </nav> 
    <div id="main" role="main"> 
     <article class="block prose"> 
     <h1>Verbiage verbiage verbiage</h1> 
<p>Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. </p> 
<p>&mdash; Author Goeshere</p> 
     </article> 
    </div> 
    <!--<footer role="contentinfo"> 
     <div class="block prose"> 
     </div> 
    </footer>--> 
</div> 
<!--/#inner-wrap--> 
</div> 
<!--/#outer-wrap--> 

CSS：

@charset "UTF-8"; 
@-ms-viewport { 
    width: device-width;} 
@viewport { 
    width: device-width;} 

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { 
    display: block;} 

audio,canvas,video { 
    display: inline-block;} 

audio:not([controls]) { 
    display: none; 
    height: 0; 
} 

[hidden] { 
    display: none; 
} 

html { 
    font-family: sans-serif; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
} 

body { 
    margin: 0; 
} 

a:focus { 
    outline: thin dotted; 
} 

a:active,a:hover { 
    outline: 0; 
} 

#top h1.block-title { 
    font-size: 1.3em; 
    font-family:Palatino, "Palatino Linotype", Georgia, serif; 
    letter-spacing:.2em; 
} 

h1 { 
    font-size: 2em; 
    font-family:sans-serif; 
} 

abbr[title] { 
    border-bottom: 1px dotted; 
} 

b, 
strong { 
    font-weight: bold; 
} 

dfn { 
    font-style: italic; 
} 

mark { 
    background: #ff0; 
    color: #000; 
} 

code, 
kbd, 
pre, 
samp { 
    font-family: monospace, serif; 
    font-size: 1em; 
} 

pre { 
    white-space: pre; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

q { 
    quotes: "\201C" "\201D" "\2018" "\2019"; 
} 

small { 
    font-size: 80%; 
} 

sub, 
sup { 
    font-size: 75%; 
    line-height: 0; 
    position: relative; 
    vertical-align: baseline; 
} 

sup { 
    top: -0.5em; 
} 

sub { 
    bottom: -0.25em; 
} 

img { 
    border: 0; 
} 

svg:not(:root) { 
    overflow: hidden; 
} 

figure { 
    margin: 0; 
} 

fieldset { 
    border: 1px solid silver; 
    margin: 0 2px; 
    padding: 0.35em 0.625em 0.75em; 
} 

legend { 
    border: 0; 
    padding: 0; 
} 

button, 
input, 
select, 
textarea { 
    font-family: inherit; 
    font-size: 100%; 
    margin: 0; 
} 

button, 
input { 
    line-height: normal; 
} 

button, 
html input[type="button"], 
input[type="reset"], 
input[type="submit"] { 
    -webkit-appearance: button; 
    cursor: pointer; 
} 

button[disabled], 
input[disabled] { 
    cursor: default; 
} 

input[type="checkbox"], 
input[type="radio"] { 
    box-sizing: border-box; 
    padding: 0; 
} 

input[type="search"] { 
    -webkit-appearance: textfield; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 
} 

input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-decoration { 
    -webkit-appearance: none; 
} 

button::-moz-focus-inner, 
input::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

textarea { 
    overflow: auto; 
    vertical-align: top; 
} 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

ul, ol { 
    padding: 0; 
    list-style: none; 
} 

h1, h2, h3, h4, h5, h6, p, ul, ol { 
    margin: 0; 
} 

a { 
    text-decoration: none; 
} 

body { 
    color: #47290C; 
    position: relative;/* was */ 
    width: 100%; 
    min-width: 20em; 
    background: #996600; 
} 

.highlight { 
    background: #fff699; 
    padding: 0 0.5em; 
} 

.prose ul, .prose ol { 
    list-style: outside disc; 
    font-size: 1em; 
    line-height: 1.5em; 
    margin-bottom: 1.5em; 
} 
.prose p { 
    font-size: 1em; 
    line-height: 1.5em; 
    margin-bottom: 1.5em; 
} 
.prose p.small { 
    color: #666; 
    font-size: 0.8125em; 
    line-height: 1.84615em; 
    margin-bottom: 1.84615em; 
} 
.prose p.medium { 
    color: #666; 
    font-size: 0.875em; 
    line-height: 1.71429em; 
    margin-bottom: 1.71429em; 
} 
.prose p:last-child { 
    margin-bottom: 0; 
} 
.prose h1 { 
    font-size: 1.875em; 
    line-height: 1.2em; 
    margin-bottom: 0.4em; 
} 
.prose h2 { 
    font-size: 1.5em; 
    line-height: 1.25em; 
    margin-bottom: 0.5em; 
} 
.prose a { 
    color: #6d7173; 
    border-bottom: 1px solid #a1cfe5; 
    text-decoration: none; 
    outline: none; 
} 
.prose a:focus, .prose a:hover { 
    color: #4ab336; 
    border-bottom-color: #77b36b; 
} 

.block { 
    position: relative; 
    margin: 0 auto; 
    padding: 0.5em 1.25em; 
    max-width: 60em; 
} 

.close-btn { 
    display: block; 
    width: 2.625em; 
    height: 2.25em; 
    padding: 0; 
    border: 0; 
    outline: none; 
    background: #47290C url("../img/close-btn.svg") left center no-repeat; 
    background-size: 1.875em 1.875em; 
    overflow: hidden; 
    white-space: nowrap; 
    text-indent: 100%; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
.no-svg .close-btn { 
    background-image: url("../img/close-btn.png"); 
} 
.close-btn:focus, .close-btn:hover { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
} 

.nav-btn { 
    display: block; 
    width: 2.625em; 
    height: 2.25em; 
    padding: 0; 
    border: 0; 
    outline: none; 
    background: #996600 url("../img/nav-icon.svg") left center no-repeat; 
    background-size: 1.875em 1.5em; 
    overflow: hidden; 
    white-space: nowrap; 
    text-indent: 100%; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
    opacity: 0.7; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
.no-svg .nav-btn { 
    background-image: url("../img/nav-icon.png"); 
} 
.nav-btn:hover, .nav-btn:focus { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
} 

#outer-wrap { 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
} 

#inner-wrap { 
    position: relative; 
    width: 100%; 
} 

#nav { 
    border: 0; 
    z-index: 200;/*was tested at 900*/ 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    color: #fff; 
} 
#nav .close-btn { 
    display: none; 
} 
#nav .block-title { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 
#nav .block { 
    z-index: 200;/*was not here at all*/ 
    position: relative; 
    padding: 0.75em 1.25em; 
    background: #47290C; 
    /* following is test */ 
    border-top-color:#92CFED; 
    border-top-width:3px; 
    border-top-style:solid; 
} 
#nav ul { 
    *zoom: 1; 
    display: block; 
} 
#nav ul:before, #nav ul:after { 
    content: ""; 
    display: table; 
} 
#nav ul:after { 
    clear: both; 
} 
#nav li { 
    display: block; 
} 
#nav li a { 
    display: block; 
    color: #fee; 
    font-size: 0.875em; 
    line-height: 1.28571em; 
    font-weight: bold; 
    outline: none; 
} 
#nav li a:focus, #nav li a:hover { 
    color: #fff; 
    background: rgba(255, 255, 255, 0.1); 
} 
#nav li.is-active a { 
    color: #fff; 
} 

#top { 
    z-index: 100; 
    position: relative; 
    color: #fff; 
    background: #996600; 
} 
#top .block-title { 
    margin: 0; 
    font-size: 1.875em; 
    line-height: 1.2em; 
    text-align: center; 
    white-space: nowrap; 
} 
#top .nav-btn { 
    position: absolute; 
    top: 0.2em; 
    left: 1.875em; 
} 

#main { 
    /*background: #F5F2EC;*/ 
    background:#FCF4E0; 
} 
#main .block { 
    padding: 2.625em 1.875em; 
} 

footer[role="contentinfo"] { 
    background: #ddd; 
} 

@media screen and (min-width: 45.0625em) { 
    #top .nav-btn { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
    } 

    #nav .close-btn { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
    } 
    #nav .block-title { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
    } 
    #nav ul { 
    text-align: center; 
    white-space: nowrap; 
    } 
    #nav li { 
    display: inline-block; 
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
    } 
    #nav li:last-child { 
    border-right: none; 
    } 
    #nav li a { 
    padding: 0.42857em 0.85714em; 
    } 
} 
@media screen and (max-width: 45em) { 
    #nav { 
    position: absolute; 
    top: 0; 
    padding-top: 5.25em; 
    } 
    #nav:not(:target) { 
    z-index: 1; 
    height: 0; 
    } 
    #nav:target .close-btn { 
    display: block; 
    } 
    #nav .close-btn { 
    position: absolute; 
    top: -5.0em; 
    left: 1.875em; 
    } 
    #nav .block { 
    position: relative; 
    padding: 0; 
    } 
    #nav li { 
    position: relative; 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    } 
    #nav li:last-child { 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    } 
    #nav li.is-active:after { 
    z-index: 50; 
    display: block; 
    content: ""; 
    position: absolute; 
    top: 50%; 
    right: -0.03125em; 
    margin-top: -0.625em; 
    border-top: 0.625em transparent solid; 
    border-bottom: 0.625em transparent solid; 
    border-right: 0.625em white solid; 
    } 
    #nav li a { 
    padding: 0.85714em 2.14286em; 
    } 

    .js-ready #nav { 
    height: 100%; 
    /*following new z-index*/ 
    z-index:500; 
    width: 70%; 
    background: #47290C;/* was 333333*/ 
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 
    overflow:visible; 
    } 
    .js-ready #nav .block { 
    background: transparent; 
    } 
    .js-ready #nav .close-btn { 
    display: block; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
    opacity: 0.7; 
    } 
    .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
    } 

    .js-ready #nav { 
    left: -70%; 
    } 
    .js-ready #inner-wrap { 
    left: 0; 
    } 

    .js-nav #inner-wrap { 
    left: 70%; 
    } 
} 

ではJavaScript：

(function(window, document, undefined) 
{ 

    // helper functions 

    var trim = function(str) 
    { 
     return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,''); 
    }; 

    var hasClass = function(el, cn) 
    { 
     return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1; 
    }; 

    var addClass = function(el, cn) 
    { 
     if (!hasClass(el, cn)) { 
      el.className = (el.className === '') ? cn : el.className + ' ' + cn; 
     } 
    }; 

    var removeClass = function(el, cn) 
    { 
     el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' ')); 
    }; 

    var hasParent = function(el, id) 
    { 
     if (el) { 
      do { 
       if (el.id === id) { 
        return true; 
       } 
       if (el.nodeType === 9) { 
        break; 
       } 
      } 
      while((el = el.parentNode)); 
     } 
     return false; 
    }; 

    // normalize vendor prefixes 

    var doc = document.documentElement; 
    var transform_prop = window.Modernizr.prefixed('transform'), 
     transition_prop = window.Modernizr.prefixed('transition'), 
     transition_end = (function() { 
      var props = { 
       'WebkitTransition' : 'webkitTransitionEnd', 
       'MozTransition' : 'transitionend', 
       'OTransition'  : 'oTransitionEnd otransitionend', 
       'msTransition'  : 'MSTransitionEnd', 
       'transition'  : 'transitionend' 
      }; 
      return props.hasOwnProperty(transition_prop) ? props[transition_prop] : false; 
     })(); 

    window.App = (function() 
    { 
     var _init = false, app = { }; 
     var inner = document.getElementById('inner-wrap'), 
      nav_open = false, 
      nav_class = 'js-nav'; 

     app.init = function() 
     { 
      if (_init) { 
       return; 
      } 
      _init = true; 

      var closeNavEnd = function(e) 
      { 
       if (e && e.target === inner) { 
        document.removeEventListener(transition_end, closeNavEnd, false); 
       } 
       nav_open = false; 
      }; 

      app.closeNav =function() 
      { 
       if (nav_open) { 
        // close navigation after transition or immediately 
        var duration = (transition_end && transition_prop) ? parseFloat(window.getComputedStyle(inner, '')[transition_prop + 'Duration']) : 0; 
        if (duration > 0) { 
         document.addEventListener(transition_end, closeNavEnd, false); 
        } else { 
         closeNavEnd(null); 
        } 
       } 
       removeClass(doc, nav_class); 
      }; 

      app.openNav = function() 
      { 
       if (nav_open) { 
        return; 
       } 
       addClass(doc, nav_class); 
       nav_open = true; 
      }; 

      app.toggleNav = function(e) 
      { 
       if (nav_open && hasClass(doc, nav_class)) { 
        app.closeNav(); 
       } else { 
        app.openNav(); 
       } 
       if (e) { 
        e.preventDefault(); 
       } 
      }; 

      // open nav with main "nav" button 
      document.getElementById('nav-open-btn').addEventListener('click', app.toggleNav, false); 

      // close nav with main "close" button 
      document.getElementById('nav-close-btn').addEventListener('click', app.toggleNav, false); 

      // close nav by touching the partial off-screen content 
      document.addEventListener('click', function(e) 
      { 
       if (nav_open && !hasParent(e.target, 'nav')) { 
        e.preventDefault(); 
        app.closeNav(); 
       } 
      }, 
      true); 

      addClass(doc, 'js-ready'); 

     }; 

     return app; 

    })(); 

    if (window.addEventListener) { 
     window.addEventListener('DOMContentLoaded', window.App.init, false); 
    } 

})(window, window.document); 

Answer 1

問題は複数の場所にありました。

最初に、ボタンがulの後にあり、nav自体が負の値を持っていました。ペンで 改訂コードは、あなたの提案funkysoulzh

(function(window, document, undefined) 
 
{ 
 

 
    // helper functions 
 

 
    var trim = function(str) 
 
    { 
 
     return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,''); 
 
    }; 
 

 
    var hasClass = function(el, cn) 
 
    { 
 
     return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1; 
 
    }; 
 

 
    var addClass = function(el, cn) 
 
    { 
 
     if (!hasClass(el, cn)) { 
 
      el.className = (el.className === '') ? cn : el.className + ' ' + cn; 
 
     } 
 
    }; 
 

 
    var removeClass = function(el, cn) 
 
    { 
 
     el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' ')); 
 
    }; 
 

 
    var hasParent = function(el, id) 
 
    { 
 
     if (el) { 
 
      do { 
 
       if (el.id === id) { 
 
        return true; 
 
       } 
 
       if (el.nodeType === 9) { 
 
        break; 
 
       } 
 
      } 
 
      while((el = el.parentNode)); 
 
     } 
 
     return false; 
 
    }; 
 

 
    // normalize vendor prefixes 
 

 
    var doc = document.documentElement; 
 
    var transform_prop = window.Modernizr.prefixed('transform'), 
 
     transition_prop = window.Modernizr.prefixed('transition'), 
 
     transition_end = (function() { 
 
      var props = { 
 
       'WebkitTransition' : 'webkitTransitionEnd', 
 
       'MozTransition' : 'transitionend', 
 
       'OTransition'  : 'oTransitionEnd otransitionend', 
 
       'msTransition'  : 'MSTransitionEnd', 
 
       'transition'  : 'transitionend' 
 
      }; 
 
      return props.hasOwnProperty(transition_prop) ? props[transition_prop] : false; 
 
     })(); 
 

 
    window.App = (function() 
 
    { 
 
     var _init = false, app = { }; 
 
     var inner = document.getElementById('inner-wrap'), 
 
      nav_open = false, 
 
      nav_class = 'js-nav'; 
 

 
     app.init = function() 
 
     { 
 
      if (_init) { 
 
       return; 
 
      } 
 
      _init = true; 
 

 
      var closeNavEnd = function(e) 
 
      { 
 
       if (e && e.target === inner) { 
 
        document.removeEventListener(transition_end, closeNavEnd, false); 
 
       } 
 
       nav_open = false; 
 
      }; 
 

 
      app.closeNav =function() 
 
      { 
 
       if (nav_open) { 
 
        // close navigation after transition or immediately 
 
        var duration = (transition_end && transition_prop) ? parseFloat(window.getComputedStyle(inner, '')[transition_prop + 'Duration']) : 0; 
 
        if (duration > 0) { 
 
         document.addEventListener(transition_end, closeNavEnd, false); 
 
        } else { 
 
         closeNavEnd(null); 
 
        } 
 
       } 
 
       removeClass(doc, nav_class); 
 
      }; 
 

 
      app.openNav = function() 
 
      { 
 
       if (nav_open) { 
 
        return; 
 
       } 
 
       addClass(doc, nav_class); 
 
       nav_open = true; 
 
      }; 
 

 
      app.toggleNav = function(e) 
 
      { 
 
       if (nav_open && hasClass(doc, nav_class)) { 
 
        app.closeNav(); 
 
       } else { 
 
        app.openNav(); 
 
       } 
 
       if (e) { 
 
        e.preventDefault(); 
 
       } 
 
      }; 
 

 
      // open nav with main "nav" button 
 
      document.getElementById('nav-open-btn').addEventListener('click', app.toggleNav, false); 
 

 
      // close nav with main "close" button 
 
      document.getElementById('nav-close-btn').addEventListener('click', app.toggleNav, false); 
 

 
      // close nav by touching the partial off-screen content 
 
      document.addEventListener('click', function(e) 
 
      { 
 
       if (nav_open && !hasParent(e.target, 'nav')) { 
 
        e.preventDefault(); 
 
        app.closeNav(); 
 
       } 
 
      }, 
 
      true); 
 

 
      addClass(doc, 'js-ready'); 
 

 
     }; 
 

 
     return app; 
 

 
    })(); 
 

 
    if (window.addEventListener) { 
 
     window.addEventListener('DOMContentLoaded', window.App.init, false); 
 
    } 
 

 
})(window, window.document);

@charset "UTF-8"; 
 
@-ms-viewport { 
 
    width: device-width;} 
 
@viewport { 
 
    width: device-width;} 
 

 
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { 
 
    display: block;} 
 

 
audio,canvas,video { 
 
    display: inline-block;} 
 

 
audio:not([controls]) { 
 
    display: none; 
 
    height: 0; 
 
} 
 

 
[hidden] { 
 
    display: none; 
 
} 
 

 
html { 
 
    font-family: sans-serif; 
 
    -webkit-text-size-adjust: 100%; 
 
    -ms-text-size-adjust: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
a:focus { 
 
    outline: thin dotted; 
 
} 
 

 
a:active,a:hover { 
 
    outline: 0; 
 
} 
 

 
#top h1.block-title { 
 
    font-size: 1.3em; 
 
    font-family:Palatino, "Palatino Linotype", Georgia, serif; 
 
    letter-spacing:.2em; 
 
} 
 

 
h1 { 
 
    font-size: 2em; 
 
    font-family:sans-serif; 
 
} 
 

 
abbr[title] { 
 
    border-bottom: 1px dotted; 
 
} 
 

 
b, 
 
strong { 
 
    font-weight: bold; 
 
} 
 

 
dfn { 
 
    font-style: italic; 
 
} 
 

 
mark { 
 
    background: #ff0; 
 
    color: #000; 
 
} 
 

 
code, 
 
kbd, 
 
pre, 
 
samp { 
 
    font-family: monospace, serif; 
 
    font-size: 1em; 
 
} 
 

 
pre { 
 
    white-space: pre; 
 
    white-space: pre-wrap; 
 
    word-wrap: break-word; 
 
} 
 

 
q { 
 
    quotes: "\201C" "\201D" "\2018" "\2019"; 
 
} 
 

 
small { 
 
    font-size: 80%; 
 
} 
 

 
sub, 
 
sup { 
 
    font-size: 75%; 
 
    line-height: 0; 
 
    position: relative; 
 
    vertical-align: baseline; 
 
} 
 

 
sup { 
 
    top: -0.5em; 
 
} 
 

 
sub { 
 
    bottom: -0.25em; 
 
} 
 

 
img { 
 
    border: 0; 
 
} 
 

 
svg:not(:root) { 
 
    overflow: hidden; 
 
} 
 

 
figure { 
 
    margin: 0; 
 
} 
 

 
fieldset { 
 
    border: 1px solid silver; 
 
    margin: 0 2px; 
 
    padding: 0.35em 0.625em 0.75em; 
 
} 
 

 
legend { 
 
    border: 0; 
 
    padding: 0; 
 
} 
 

 
button, 
 
input, 
 
select, 
 
textarea { 
 
    font-family: inherit; 
 
    font-size: 100%; 
 
    margin: 0; 
 
} 
 

 
button, 
 
input { 
 
    line-height: normal; 
 
} 
 

 
button, 
 
html input[type="button"], 
 
input[type="reset"], 
 
input[type="submit"] { 
 
    -webkit-appearance: button; 
 
    cursor: pointer; 
 
} 
 

 
button[disabled], 
 
input[disabled] { 
 
    cursor: default; 
 
} 
 

 
input[type="checkbox"], 
 
input[type="radio"] { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
} 
 

 
input[type="search"] { 
 
    -webkit-appearance: textfield; 
 
    -moz-box-sizing: content-box; 
 
    -webkit-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
} 
 

 
input[type="search"]::-webkit-search-cancel-button, 
 
input[type="search"]::-webkit-search-decoration { 
 
    -webkit-appearance: none; 
 
} 
 

 
button::-moz-focus-inner, 
 
input::-moz-focus-inner { 
 
    border: 0; 
 
    padding: 0; 
 
} 
 

 
textarea { 
 
    overflow: auto; 
 
    vertical-align: top; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 

 
ul, ol { 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, p, ul, ol { 
 
    margin: 0; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
body { 
 
    color: #47290C; 
 
    position: relative;/* was */ 
 
    width: 100%; 
 
    min-width: 20em; 
 
    background: #996600; 
 
} 
 

 
.highlight { 
 
    background: #fff699; 
 
    padding: 0 0.5em; 
 
} 
 

 
.prose ul, .prose ol { 
 
    list-style: outside disc; 
 
    font-size: 1em; 
 
    line-height: 1.5em; 
 
    margin-bottom: 1.5em; 
 
} 
 
.prose p { 
 
    font-size: 1em; 
 
    line-height: 1.5em; 
 
    margin-bottom: 1.5em; 
 
} 
 
.prose p.small { 
 
    color: #666; 
 
    font-size: 0.8125em; 
 
    line-height: 1.84615em; 
 
    margin-bottom: 1.84615em; 
 
} 
 
.prose p.medium { 
 
    color: #666; 
 
    font-size: 0.875em; 
 
    line-height: 1.71429em; 
 
    margin-bottom: 1.71429em; 
 
} 
 
.prose p:last-child { 
 
    margin-bottom: 0; 
 
} 
 
.prose h1 { 
 
    font-size: 1.875em; 
 
    line-height: 1.2em; 
 
    margin-bottom: 0.4em; 
 
} 
 
.prose h2 { 
 
    font-size: 1.5em; 
 
    line-height: 1.25em; 
 
    margin-bottom: 0.5em; 
 
} 
 
.prose a { 
 
    color: #6d7173; 
 
    border-bottom: 1px solid #a1cfe5; 
 
    text-decoration: none; 
 
    outline: none; 
 
} 
 
.prose a:focus, .prose a:hover { 
 
    color: #4ab336; 
 
    border-bottom-color: #77b36b; 
 
} 
 

 
.block { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    padding: 0.5em 1.25em; 
 
    max-width: 60em; 
 
} 
 

 
.close-btn { 
 
    display: block; 
 
    width: 2.625em; 
 
    height: 2.25em; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: none; 
 
    background: #47290C url("../img/close-btn.svg") left center no-repeat; 
 
    background-size: 1.875em 1.875em; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-indent: 100%; 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
} 
 
.no-svg .close-btn { 
 
    background-image: url("../img/close-btn.png"); 
 
} 
 
.close-btn:focus, .close-btn:hover { 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
} 
 

 
.nav-btn { 
 
    display: block; 
 
    width: 2.625em; 
 
    height: 2.25em; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: none; 
 
    background: #996600 url("../img/nav-icon.svg") left center no-repeat; 
 
    background-size: 1.875em 1.5em; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-indent: 100%; 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
 
    opacity: 0.7; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
} 
 
.no-svg .nav-btn { 
 
    background-image: url("../img/nav-icon.png"); 
 
} 
 
.nav-btn:hover, .nav-btn:focus { 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
} 
 

 
#outer-wrap { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
#inner-wrap { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
#nav { 
 
    border: 0; 
 
    z-index: 200;/*was tested at 900*/ 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    color: #fff; 
 
} 
 
#nav .close-btn { 
 
    display: none; 
 
} 
 
#nav .block-title { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
#nav .block { 
 
    z-index: 200;/*was not here at all*/ 
 
    position: relative; 
 
    padding: 0.75em 1.25em; 
 
    background: #47290C; 
 
    /* following is test */ 
 
    border-top-color:#92CFED; 
 
    border-top-width:3px; 
 
    border-top-style:solid; 
 
} 
 
#nav ul { 
 
    *zoom: 1; 
 
    display: block; 
 
} 
 
#nav ul:before, #nav ul:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
#nav ul:after { 
 
    clear: both; 
 
} 
 
#nav li { 
 
    display: block; 
 
} 
 
#nav li a { 
 
    display: block; 
 
    color: #fee; 
 
    font-size: 0.875em; 
 
    line-height: 1.28571em; 
 
    font-weight: bold; 
 
    outline: none; 
 
} 
 
#nav li a:focus, #nav li a:hover { 
 
    color: #fff; 
 
    background: rgba(255, 255, 255, 0.1); 
 
} 
 
#nav li.is-active a { 
 
    color: #fff; 
 
} 
 

 
#top { 
 
    z-index: 100; 
 
    position: relative; 
 
    color: #fff; 
 
    background: #996600; 
 
} 
 
#top .block-title { 
 
    margin: 0; 
 
    font-size: 1.875em; 
 
    line-height: 1.2em; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
} 
 
#top .nav-btn { 
 
    position: absolute; 
 
    top: 0.2em; 
 
    left: 1.875em; 
 
} 
 

 
#main { 
 
    /*background: #F5F2EC;*/ 
 
    background:#FCF4E0; 
 
} 
 
#main .block { 
 
    padding: 2.625em 1.875em; 
 
} 
 

 
footer[role="contentinfo"] { 
 
    background: #ddd; 
 
} 
 

 
@media screen and (min-width: 45.0625em) { 
 
    #top .nav-btn { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
    } 
 

 
    #nav .close-btn { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
    } 
 
    #nav .block-title { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
    } 
 
    #nav ul { 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    } 
 
    #nav li { 
 
    display: inline-block; 
 
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
 
    } 
 
    #nav li:last-child { 
 
    border-right: none; 
 
    } 
 
    #nav li a { 
 
    padding: 0.42857em 0.85714em; 
 
    } 
 
} 
 
@media screen and (max-width: 45em) { 
 
    #nav { 
 

 
    position: absolute; 
 
    top: 2.5em; 
 

 
    } 
 
    #nav:not(:target) { 
 
    z-index: 1; 
 
    height: 0; 
 
    } 
 
    #nav:target .close-btn { 
 
    display: block; 
 
    } 
 
    #nav .close-btn { 
 
    position: absolute; 
 
    top: -5.0em; 
 
    left: 1.875em; 
 
    } 
 
    #nav .block { 
 
    position: relative; 
 
    padding: 0; 
 
    } 
 
    #nav li { 
 
    position: relative; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
 
    } 
 
    #nav li:last-child { 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
 
    } 
 
    #nav li.is-active:after { 
 
    z-index: 50; 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: -0.03125em; 
 
    margin-top: -0.625em; 
 
    border-top: 0.625em transparent solid; 
 
    border-bottom: 0.625em transparent solid; 
 
    border-right: 0.625em white solid; 
 
    } 
 
    #nav li a { 
 
    padding: 0.85714em 2.14286em; 
 
    } 
 

 
    .js-ready #nav { 
 
    height: 100%; 
 
    /*following new z-index*/ 
 
    z-index:500; 
 
    width: 70%; 
 
    background: #47290C;/* was 333333*/ 
 
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 
 
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 
 
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 
 
    overflow:visible; 
 
    } 
 
    .js-ready #nav .block { 
 
    background: transparent; 
 
    } 
 
    .js-ready #nav .close-btn { 
 
    display: block; 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
 
    opacity: 0.7; 
 
    } 
 
    .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover { 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
    } 
 

 
    .js-ready #nav { 
 
    left: -70%; 
 
    } 
 
    .js-ready #inner-wrap { 
 
    left: 0; 
 
    } 
 

 
    .js-nav #inner-wrap { 
 
    left: 70%; 
 
    } 
 
}

<div id="outer-wrap"> 
 
<div id="inner-wrap"> 
 
    <header id="top" role="banner"> 
 
     <div class="block"> 
 
      <h1 class="block-title">another title here</h1> 
 
      <a class="nav-btn" id="nav-open-btn" href="#nav">-Nav-</a> 
 
     </div> 
 
    </header> 
 
    <nav id="nav" role="navigation"> 
 
     <div class="block"> 
 
      <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a> 
 
      <ul><!-- 
 
      --><li><a href="index.php">Home</a></li><!-- 
 
      --><li><a href="bj-cole.php">Music</a></li><!-- 
 
      --><li><a href="john-greenway.php">Authors</a></li><!-- 
 
      --><li><a href="manhood.php">Ideas</a></li><!-- 
 
      --><li><a href="eugene-atget.php">Design</a></li><!-- 
 
      --><li><a href="eclecticism.php">Other</a></li><!-- 
 
      --><li><a href="mail02.php">Contact</a></li> 
 
      </ul> 
 
      
 
     </div> 
 
    </nav> 
 
    <div id="main" role="main"> 
 
     <article class="block prose"> 
 
     <h1>Verbiage verbiage verbiage</h1> 
 
<p>Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. Lorem ipsum dolor and a whole lot more will go here. </p> 
 
<p>&mdash; Author Goeshere</p> 
 
     </article> 
 
    </div> 
 
    <!--<footer role="contentinfo"> 
 
     <div class="block prose"> 
 
     </div> 
 
    </footer>--> 
 
</div> 
 
<!--/#inner-wrap--> 
 
</div> 
 
<!--/#outer-wrap-->