Easy Container-Breaking Sidebar
How do I make an easy container-breaking sidebar?
Saw something like this on the Google Analytics homepage, but their method was a little roundabout.. What is a easy container-breaking sidebar? How do you make a easy container-breaking sidebar? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.
Easy Container-Breaking Sidebar Previews
Easy Container-Breaking Sidebar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Easy Container-Breaking Sidebar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { box-sizing: border-box;
}
body { overflow-x: hidden; background-color: white; color: #455A64; font-family: 'Droid Sans', sans-serif;
}
h1, h2,
p { margin: 0 0 24px;
}
.wrapper { width: 85%; min-width: 800px; max-width: 1200px; margin: 0 auto; display: flex; min-height: 100vh; transition: background 200ms;
}
.wrapper--show { background: rgba(236, 64, 122, 0.2);
}
.main,
.side { flex: 1 0 auto; padding: 48px 24px; min-height: 100%; text-align: justify; font-size: 14px;
}
.main { width: 66.66%; padding-right: 48px;
}
.side { position: relative; width: 33.33%;
}
.side:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: -100vw; height: 100%; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15); background-color: #ECEFF1; z-index: -1;
}
.btn { display: inline-block; margin-bottom: 24px; padding: 8px 12px; color: white; background: #EC407A; text-decoration: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<div class="page"> <div class="wrapper"> <div class="main"> <h1>Easy Container-Breaking Sidebar</h1> <h2>The main area and sidebar are both contained within a wrapper element, but the sidebar has a background which extends outside and fills the rest of the viewport.</h2> <a class="btn" href="#">Show/hide wrapper</a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo plebiscito decreta a senatu est consuli quaestio Cn. Sapiens autem semper beatus est et est aliquando in dolore; Huius, Lyco, oratione locuples, rebus ipsis ielunior. Tubulo putas dicere? Quae autem natura suae primae institutionis oblita est? Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. </p>
<p>Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem. Aliter homines, aliter philosophos loqui putas oportere? At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Huius, Lyco, oratione locuples, rebus ipsis ielunior. Hoc ille tuus non vult omnibusque ex rebus voluptatem quasi mercedem exigit. </p>
<p>Aliter enim nosmet ipsos nosse non possumus. Duo Reges: constructio interrete. Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis. Id Sextilius factum negabat. </p>
<p>Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Esse enim quam vellet iniquus iustus poterat inpune. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Omnia contraria, quos etiam insanos esse vultis. Non risu potius quam oratione eiciendum? Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Ergo ita: non posse honeste vivi, nisi honeste vivatur? </p>
<p>Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Neutrum vero, inquit ille. Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Equidem e Cn. Ergo id est convenienter naturae vivere, a natura discedere. Aliter enim nosmet ipsos nosse non possumus. </p> </div> <div class="side"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quo plebiscito decreta a senatu est consuli quaestio Cn. Sapiens autem semper beatus est et est aliquando in dolore; Huius, Lyco, oratione locuples, rebus ipsis ielunior. Tubulo putas dicere? Quae autem natura suae primae institutionis oblita est? Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. </p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Easy Container-Breaking Sidebar - Script Codes CSS Codes
*, *:before, *:after { box-sizing: border-box;
}
body { overflow-x: hidden; background-color: white; color: #455A64; font-family: 'Droid Sans', sans-serif;
}
h1, h2,
p { margin: 0 0 24px;
}
.wrapper { width: 85%; min-width: 800px; max-width: 1200px; margin: 0 auto; display: flex; min-height: 100vh; transition: background 200ms;
}
.wrapper--show { background: rgba(236, 64, 122, 0.2);
}
.main,
.side { flex: 1 0 auto; padding: 48px 24px; min-height: 100%; text-align: justify; font-size: 14px;
}
.main { width: 66.66%; padding-right: 48px;
}
.side { position: relative; width: 33.33%;
}
.side:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: -100vw; height: 100%; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15); background-color: #ECEFF1; z-index: -1;
}
.btn { display: inline-block; margin-bottom: 24px; padding: 8px 12px; color: white; background: #EC407A; text-decoration: none;
}Easy Container-Breaking Sidebar - Script Codes JS Codes
$('.btn').click(function(e) { e.preventDefault(); $('.wrapper').toggleClass('wrapper--show');
});
| Developer | Keith Pickering |
| Username | keithpickering |
| Uploaded | August 10, 2022 |
| Rating | 3 |
| Size | 4,673 Kb |
| Views | 50,600 |
Do you need developer help for Easy Container-Breaking Sidebar?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Keith Pickering (keithpickering) Script Codes
| Name | Size |
| A Pen by Keith Pickering | 12,023 Kb |
| CSS Business Card | 185,152 Kb |
| Delicious SASS Buttons | 8,496 Kb |
| Reusable Styles | 11,486 Kb |
| Single-element Toggle Switch | 3,875 Kb |
| Windows 10 Concept | 16,180 Kb |
| Lovely Transforming Menu Button | 11,445 Kb |
| Text Inputs with Sliding Labels | 2,892 Kb |
| Material Inspired Menu | 4,237 Kb |
| Windows 8 Start Screen | 5,520 Kb |
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
| CSS3 Form Page Design | Rssatnam | 3,613 Kb |
| Force Counter | Kenlauguico | 2,732 Kb |
| A Pen by Jim Savage | Madebyjam | 2,418 Kb |
| 404 Error Page | WebSonick | 3,203 Kb |
| Get third wednesday | Wojtek1150 | 2,691 Kb |
| Hello People | Danburrows | 2,365 Kb |
| Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
| React Recipe Box | Krokodill | 5,347 Kb |
| Android Logo with HTML and CSS | Wifi | 2,000 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!