PROWAREtech
CSS: Hero or Banner Menu System
A great way to organize large menus.
Create an interesting page banner menu system without JavaScript.
Download this code including image files: HEROMENUSYSTEM.zip.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HERO/BANNER MENU</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: silver;
color: dimgray;
}
main {
padding: 10px;
}
p {
padding: 5px;
margin: 15px 0;
}
footer {
text-align: center;
}
.btn {
background-color: black;
display: inline-block;
color: white;
padding: 15px;
margin: 15px;
text-decoration: none;
outline: none;
border: none;
-webkit-appearance: none;
}
.hero-choice {
display: none;
}
nav {
background-color: dimgray;
text-align: center;
}
nav li {
list-style: none;
display: inline-block;
}
nav a,
nav label {
position: relative;
display: block;
line-height: 50px;
color: white;
text-decoration: none;
transition: .5s;
width: 80px;
}
nav label {
display: inline-block;
}
nav a:hover,
nav label:hover {
background-color: black;
}
nav label::before {
content: "";
border-width: 0 16px 16px 16px;
border-style: solid;
border-color: black transparent;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-top: -16px;
visibility: hidden;
opacity: 0;
transition: .5s;
pointer-events: none;
}
nav label:hover::before {
visibility: visible;
opacity: 1;
}
header > div {
position: relative;
width: 100%;
height: 370px;
}
header > div > div {
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 2s;
overflow: auto;
/* may want to "display: flex;" here depending on content */
}
header > div > div > img {
display: block;
margin: 0 auto;
}
.hero-home {
background-image: linear-gradient(silver, dimgray);
}
.hero-js {
background-image: linear-gradient(white, yellow);
}
.hero-vue {
background-image: linear-gradient(white, seagreen);
}
.hero-css {
background-image: linear-gradient(white, dodgerblue);
}
.hero-html {
background-image: linear-gradient(white, orangered);
}
.hero-node {
background-image: linear-gradient(white, green);
}
.hero-react {
background-image: linear-gradient(white, cadetblue);
}
.hero-angular {
background-image: linear-gradient(white, red);
}
#hero-home:checked ~ div .hero-home,
#hero-js:checked ~ div .hero-js,
#hero-vue:checked ~ div .hero-vue,
#hero-css:checked ~ div .hero-css,
#hero-html:checked ~ div .hero-html,
#hero-node:checked ~ div .hero-node,
#hero-react:checked ~ div .hero-react,
#hero-angular:checked ~ div .hero-angular,
#hero-js:checked ~ nav label[for="hero-js"]::before,
#hero-vue:checked ~ nav label[for="hero-vue"]::before,
#hero-css:checked ~ nav label[for="hero-css"]::before,
#hero-html:checked ~ nav label[for="hero-html"]::before,
#hero-node:checked ~ nav label[for="hero-node"]::before,
#hero-react:checked ~ nav label[for="hero-react"]::before,
#hero-angular:checked ~ nav label[for="hero-angular"]::before {
visibility: visible;
opacity: 1;
}
#hero-home:checked ~ nav label[for="hero-home"],
#hero-js:checked ~ nav label[for="hero-js"],
#hero-vue:checked ~ nav label[for="hero-vue"],
#hero-css:checked ~ nav label[for="hero-css"],
#hero-html:checked ~ nav label[for="hero-html"],
#hero-node:checked ~ nav label[for="hero-node"],
#hero-react:checked ~ nav label[for="hero-react"],
#hero-angular:checked ~ nav label[for="hero-angular"] {
background-color: black;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<input type="radio" name="hero-choice" class="hero-choice" id="hero-home" checked="">
<input type="radio" name="hero-choice" class="hero-choice" id="hero-js">
<input type="radio" name="hero-choice" class="hero-choice" id="hero-vue">
<input type="radio" name="hero-choice" class="hero-choice" id="hero-css">
<input type="radio" name="hero-choice" class="hero-choice" id="hero-html">
<input type="radio" name="hero-choice" class="hero-choice" id="hero-node">
<input type="radio" name="hero-choice" class="hero-choice" id="hero-react">
<input type="radio" name="hero-choice" class="hero-choice" id="hero-angular">
<div>
<div class="hero-home"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi qui labore blanditiis tenetur, repellat totam error alias. Nostrum cupiditate, porro voluptatibus est quasi labore nesciunt.</p></div>
<div class="hero-js"><img src="js.png"><a href="#" class="btn">Learn More</a></div>
<div class="hero-vue"><img src="vue.png"><a href="#" class="btn">Learn More</a></div>
<div class="hero-css"><img src="css3.png"><a href="#" class="btn">Learn More</a></div>
<div class="hero-html"><img src="html5.png"><a href="#" class="btn">Learn More</a></div>
<div class="hero-node"><img src="node.png"><a href="#" class="btn">Learn More</a></div>
<div class="hero-react"><img src="react.png"><a href="#" class="btn">Learn More</a></div>
<div class="hero-angular"><img src="angular.png"><a href="#" class="btn">Learn More</a></div>
</div>
<nav>
<label for="hero-js">JS</label>
<label for="hero-vue">Vue</label>
<label for="hero-css">CSS</label>
<label for="hero-html">HTML</label>
<label for="hero-node">Node</label>
<label for="hero-react">React</label>
<label for="hero-angular">Angular</label>
</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, quaerat eos inventore officia aut animi quibusdam! Ipsa quis accusantium quibusdam. Nam ab corrupti repellat quibusdam cupiditate sequi, ea dolorem exercitationem corporis aperiam necessitatibus accusamus delectus explicabo earum facilis voluptas aliquid modi soluta sed qui? Blanditiis ex, voluptates laboriosam doloribus sint qui architecto velit voluptas repellendus consequuntur perspiciatis quae dicta, voluptate recusandae. Non itaque placeat sequi rem! Consectetur sunt dolore ratione. Laudantium facilis ducimus similique error natus veniam fugit ex esse voluptate, officia consequatur eos. Soluta cum impedit quae iusto, sed inventore alias, fugiat aperiam unde rerum possimus dolorum nulla quasi.</p>
<p>Eius nemo odio magni ullam ducimus minima saepe laboriosam, quod corrupti neque hic cum tempora sapiente vitae deleniti, alias ab temporibus sunt laudantium dicta! Vitae quia voluptatem, quas nobis sint eaque nostrum ipsum in placeat laudantium illum, soluta velit animi sed quod sapiente praesentium, tempora maxime at facilis atque fugiat fugit? Fugiat laborum earum voluptate culpa aperiam officia excepturi, officiis laudantium cumque pariatur et mollitia, a, quidem molestias? Obcaecati qui, quidem vero placeat saepe deserunt architecto magnam, temporibus aut, nisi maxime impedit dolorem aliquid blanditiis nesciunt a quos libero magni. Expedita consequatur laboriosam beatae id ipsam harum, veritatis eius tempora.</p>
<p>Expedita possimus rem earum, hic quidem numquam, laboriosam aperiam id dolores tempore dolorem excepturi enim tenetur maxime aspernatur omnis alias a similique reiciendis! Perferendis quibusdam eos, inventore corporis non porro consectetur facilis deleniti ipsum, ducimus ab tempora optio aliquid, placeat et exercitationem dolorum alias amet ea dicta earum officia asperiores dolor nobis? Quod provident incidunt ducimus eius natus consequatur minima deleniti, quo numquam consequuntur earum dignissimos, ab distinctio nemo at eveniet quas adipisci, veritatis dolorum. Fugiat quisquam impedit commodi ab nisi ut animi nihil sint nesciunt aspernatur excepturi accusantium ad molestias, atque eos repellendus in obcaecati dolor, nobis reprehenderit quia.</p>
<p>Sunt blanditiis debitis, quibusdam molestiae, perferendis dolorum quis fugiat harum delectus rerum nihil accusamus ratione. Maiores consequuntur cum nulla, ad magnam nobis necessitatibus impedit quas illo incidunt corporis laboriosam deserunt vero et, laudantium quibusdam. Modi eum quaerat odit animi iure numquam necessitatibus accusamus illo excepturi eos? Laboriosam quo id animi alias, dolor qui quibusdam ipsa pariatur, perspiciatis, vitae quae iste! Nulla earum enim, voluptatum officia porro illum voluptates exercitationem placeat, unde est in dolorem quos distinctio provident quis, sequi quam non aspernatur maiores aliquam alias? Tempora, tempore. Aliquid, sint eius incidunt dignissimos cumque est culpa quos quas perspiciatis. Alias, adipisci!</p>
<p>Minus maxime beatae at commodi illo dolorum, odio totam quis impedit maiores aliquid eius! Voluptate odio rerum accusantium, dolor tenetur est quidem nobis sit voluptatum laborum veritatis dolorem distinctio sed aperiam repellat dicta eaque ullam incidunt. Praesentium dignissimos autem corrupti optio, fuga facere sint similique modi sed temporibus. Magni, commodi, doloremque nam, blanditiis maiores ad voluptates veritatis tempore iure ipsam sint eum quas libero cupiditate voluptate repellat vel illo adipisci quia sequi quaerat quis accusantium veniam? Nobis magnam facere repellendus numquam ratione culpa itaque, assumenda esse ducimus, aut sint dicta rem ullam odio quasi ut. Ipsam quisquam blanditiis sed omnis.</p>
<p>Enim dignissimos repellat eos obcaecati alias. Cum voluptas est recusandae maiores amet quidem sequi dicta, eveniet, distinctio, earum optio similique perspiciatis hic qui animi. Eius vel ducimus, saepe molestiae fugit qui eligendi, corrupti facilis commodi earum nemo veniam tempora natus porro inventore quos obcaecati itaque voluptatibus quidem, suscipit harum cupiditate. Laboriosam mollitia dolorem tempora debitis non quae illo asperiores, consequuntur natus? Veniam, sit est. Quos animi dolores possimus molestias totam ex quasi perferendis provident! Eius reprehenderit fugiat reiciendis officiis officia, adipisci odio voluptatem suscipit consequuntur eligendi non minima. Distinctio consectetur aspernatur eius nesciunt porro totam alias aliquid, velit consequatur possimus!</p>
<p>Expedita est placeat obcaecati? Aut numquam, odio exercitationem, voluptatem voluptas quam illum excepturi impedit corporis, quas odit quod! Ratione tenetur a, sunt harum inventore vitae quod! Maiores, dolor molestias blanditiis illum quas vitae. Recusandae sunt, placeat id quos, assumenda maiores laborum distinctio deleniti iste numquam repellat deserunt nam repudiandae accusamus quia, similique beatae? Vitae explicabo, repudiandae ullam veniam distinctio incidunt et aliquam provident exercitationem, accusantium repellendus in rerum quod cumque eligendi veritatis ab saepe consectetur possimus facilis non ad illo! Expedita provident facilis similique blanditiis itaque distinctio quisquam qui tempore doloribus eveniet, soluta necessitatibus dicta repellat praesentium. Voluptatum, at expedita!</p>
<p>Voluptates, deserunt at sit repudiandae, non iure debitis, quo pariatur totam illum quisquam iusto placeat adipisci voluptatem ducimus aliquam deleniti fugiat dolores vitae sapiente voluptatibus? Expedita unde voluptatem voluptatum a officiis consequuntur enim modi nam quis rerum asperiores, temporibus quidem repudiandae laboriosam impedit tenetur aliquam maxime. Impedit minima qui nulla? Quia id magnam recusandae nostrum quo voluptate iste neque illum, minima facilis explicabo velit non eos ullam necessitatibus, aliquid iusto porro aut pariatur maxime in voluptas nam! Harum quod perspiciatis iste unde porro? Natus adipisci dolor laborum, unde fugit itaque, obcaecati dolorem totam labore est esse officia autem porro! Maiores!</p>
<p>Adipisci voluptatum, quibusdam odio corrupti, ut placeat vitae obcaecati suscipit quidem cum aut atque eius magni pariatur, molestias a dicta repellendus deserunt iusto dolore consectetur. Neque a tempore nihil asperiores earum totam minus, ab, ipsum exercitationem iusto, modi nobis. Illo fugiat error, cum molestiae iusto hic repellendus ipsa dolores, dolorem accusantium totam tempore cumque soluta ipsam repellat aliquam rerum quaerat et enim debitis, praesentium ullam voluptate suscipit. Laudantium, id, debitis amet dolorum deleniti minima alias ratione cupiditate esse veritatis culpa aliquam officiis! Nostrum cum numquam dolores fugiat possimus, optio, asperiores magnam quis laboriosam maxime alias consectetur, minus recusandae deserunt commodi!</p>
<p>Praesentium et esse facere dolorem aliquid rerum, ipsa, earum nulla tempore deserunt dicta doloribus sequi molestiae. Tempora nemo cumque veniam quae nostrum qui ratione animi, temporibus facilis illo, at, deserunt eius? Nam magni dolore ad vel illo iure harum architecto ipsum sit quisquam ea sapiente aspernatur doloremque quibusdam labore iusto tempora nesciunt consectetur, commodi odio facere maxime adipisci consequatur atque? Ut nihil ex temporibus in deleniti maiores sit impedit, vero expedita dicta assumenda inventore eligendi ipsum. Nesciunt vitae error iusto, maxime illo commodi id possimus similique quasi ab minus. Ipsa consequatur ullam pariatur sapiente amet fugit molestiae saepe minus sed?</p>
</main>
<footer>
Copyright ©2020 Acme, Inc.
</footer>
</body>
</html>
Coding Video
Comment
