css - Overlaying a floating full width sidebar on HTML pages -
i developing feature existing site, floating full height sidebar can pop in left side.
is possible develop without changing markup , css of original pages? ideally want plugin can added existing page.
i don't need javascript making slide in side, i'm trying establish best solution css ensure it's full height. within sidebar itself, content should scrollable.
this sample code should show i'm trying achieve:
body { background: #ccc; /* ignore */ } .bspec { z-index: 9999; position: absolute; top: 0; left: 0; width: 400px; } .bspec-content { display: table-cell; padding: 10px; overflow-y: scroll; max-height: 500px; background: #fff; color: #666; } .bspec-toggle { display: table-cell; background: #f00; width: 20px; cursor: pointer; }<html> <body> <div class="content"> <!-- existing page markup, ideally left alone --> </div> <!-- add sidebar page --> <div class="bspec"> <div class="bspec-content"> <p>lorem ipsum dolor sit amet, ne doming probatus prodesset vel, ius no solet everti scaevola. te quo dictas accumsan. augue libris legendos duo te, pro ea postea intellegat. mutat oporteat reformidans ea sit.</p> <p>vel eius molestie necessitatibus ei. veniam commune pertinacia ei cum, ex est graece laoreet adipisci. qui esse argumentum ut, vix cu patrioque pertinacia. in vis unum evertitur intellegat, pro postea complectitur ad, eu sit mucius audiam scripserit. alterum consulatu cu mei, nibh apeirian temporibus vix cu.</p> <p>vel nisl causae aperiam cu, aeterno ponderum insolens ea cum, cum ei autem inani regione. sea quodsi consequat ex. ne wisi cotidieque vim, idque senserit ad qui. choro noster civibus eu vix.</p> <p>no mel scripta equidem, sed ut senserit signiferumque. eu vix volumus mediocrem molestiae, eu sensibus conclusionemque vis. est unum laoreet et, nibh sadipscing mediocritatem mei an. autem mollis @ pro, qui et dolorum postulant. veniam expetenda disputationi pro in, id eum exerci accusata. vis ad nobis dicunt fabellas, te usu congue impedit vituperata. ipsum possim assueverit et vel.</p> <p>quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.quo et amet omittantur. eripuit perpetua vix, mel te omnes dicunt scriptorem. has quot graecis ea, cum primis detraxit liberavisse ut. ut verterem quaestio vis. et duo qualisque laboramus dissentias, vis ut case minimum scribentur.</p> </div> <div class="bspec-toggle"> <!-- clickable right edge of pane, bring sidebar in --> </div> </div> </body> </html>notes
sidebar should overlayed on left side of screen.
sidebar should fill height of screen.
excess sidebar content should scrolling.
sidebar toggle should run full height along right side of sidebar content.
for sidebar, can use vh css unit max-height. example:
.sidebar{ max-height: 100vh; position: absolute; top: 0; left: 0; overflow-y: scroll; width: /* width here */; } you can swap max-height height force screen height, , same thing can applied toggle button.
this assuming you're handling hiding , showing this.
Comments
Post a Comment