A pure CSS solution to create a Bloomberg.com style toggle menu that reveals a horizontal, multi-level mega menu when you click the toggle button.
How to use it:
Load the main stylesheet ‘bmenu.css’ in the head section of the document.
<link rel=stylesheet href=bmenu.css>
Create a menu toggle button using checkbox and label elements.
<input id=bmenu_toggle type=checkbox name=bmenu-open class=hidden> <label class="bmenu toggle" for=bmenu_toggle accesskey=1> <header><span class=heavy>☰</span> Menu</header> </label>
Create the multi-level toggle menu following the markup structure like so:
<div class=hide-at-start-wrapper>
<nav class="bmenu panel animated">
<a href=#/home.html><span class=triangle-origin>Home</span></a>
<a href=#/markets.html><span class=triangle-origin>Markets</span></a>
<a href=#/technology.html><span class=triangle-origin>Technology</span></a>
<a href=#/politics.html><span class=triangle-origin>Politics</span></a>
<a href=#/pursuits.html><span class=triangle-origin>Pursuits</span></a>
<a href=#/opinion.html><span class=triangle-origin>Opinion</span></a>
<a href=#/businessweek.html><span class=triangle-origin>Businessweek</span></a>
<hr>
<a href=#/video.html><span class=triangle-origin>Video</span></a>
<a href=#/audio.html><span class=triangle-origin>Audio</span></a>
<hr>
<a class=no-panel href=#/newsletters.html>Newsletters</a>
<a class=no-panel href=#/watchlist.html>Watchlist</a>
<a class=no-panel href=#/subscribe.html>Subscribe</a>
<a class=no-panel href=#/signin.html>Sign In</a>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Read</header>
<a href=#/wealth.html>Wealth</a>
<a href=#/crypto.html>Crypto</a>
<a href=#/hyperdrive.html>Hyperdrive</a>
<a href=#/prognosis.html>Prognosis</a>
<a href=#/climatechanged.html>Climate Changed</a>
<a href=#/equality.html>Equality</a>
<a href=#/billionaires.html>Billionaires</a>
<a href=#/graphics.html>Graphics</a>
<a href=#/sponsoredcontent.html>Sponsored Content</a>
</section>
<section class=titled-group>
<header>Watch</header>
<a href=#/thedavidrubensteinshow.html>The David Rubenstein Show</a>
<a href=#/brilliantideas.html>Brilliant Ideas</a>
<a href=#/inspirego.html>Inspire GO</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>Special Reports</header>
<a href=#/wheretoinvest$10,000.html>Where to Invest $10,000</a>
<a href=#/50companiestowatchin2018.html>50 Companies to Watch in 2018</a>
<a href=#/what'sinsidealltheiphones.html>What's Inside All the iPhones</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Read</header>
<a href=#/economics.html>Economics</a>
<a href=#/deals.html>Deals</a>
<a href=#/fixedincome.html>Fixed Income</a>
<a href=#/etfs.html>ETFs</a>
<a href=#/benchmark.html>Benchmark</a>
<a href=#/marketsmagazine.html>Markets Magazine</a>
</section>
<section class=titled-group>
<header>Watch</header>
<a href=#/daybreak.html>Daybreak</a>
<a href=#/surveillance.html>Surveillance</a>
<a href=#/markets.html>Markets</a>
<a href=#/what'dyoumiss.html>What'd You Miss</a>
</section>
<section class=titled-group>
<header>Follow</header>
<a href=#/twitter.html>Twitter</a>
<a href=#/facebook.html>Facebook</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>Data</header>
<a href=#/stocks.html>Stocks</a>
<a href=#/currencies.html>Currencies</a>
<a href=#/commodities.html>Commodities</a>
<a href=#/rates-and-bonds.html>Rates & Bonds</a>
<a href=#/sectors.html>Sectors</a>
<a href=#/economiccalendar.html>Economic Calendar</a>
</section>
<section class=titled-group>
<header>Listen</header>
<a href=#/trillions.html>Trillions</a>
<a href=#/oddlots.html>Odd Lots</a>
<a href=#/surveillance.html>Surveillance</a>
<a href=#/benchmark.html>Benchmark</a>
<a href=#/p-and-l.html>P&L</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Read</header>
<a href=#/Cybersecurity.html>Cybersecurity</a>
<a href=#/Startups.html>Startups</a>
<a href=#/AI.html>AI</a>
<a href=#/Mobile.html>Mobile</a>
<a href="#/Big+Data.html">Big Data</a>
<a href="#/Cloud+Computing.html">Cloud Computing</a>
<a href=#/U.S.html>U.S.</a>
<a href=#/Global.html>Global</a>
</section>
<section class=titled-group>
<header>Special Reports</header>
<a href="#/The Elon Musk Tracker.html">The Elon Musk Tracker</a>
<a href="#/Tesla Model 3 Tracker.html">Tesla Model 3 Tracker</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>Watch</header>
<a href="#/Gadgets with Gurman.html">Gadgets with Gurman</a>
<a href="#/Digital Defense.html">Digital Defense</a>
<a href="#/Bloomberg Technology TV.html">Bloomberg Technology TV</a>
<a href="#/Studio 1.0.html">Studio 1.0</a>
</section>
<section class=titled-group>
<header>Listen</header>
<a href=#/Decrypted.html>Decrypted</a>
</section>
<section class=titled-group>
<header>Follow</header>
<a href=#/Twitter.html>Twitter</a>
<a href=#/Facebook.html>Facebook</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Read</header>
<a href="#/2018 Women Candidates.html">2018 Women Candidates</a>
<a href="#/Trump Tracker.html">Trump Tracker</a>
<a href="#/Brexit Coverage.html">Brexit Coverage</a>
<a href="#/World Leaders on the Brink.html">World Leaders on the Brink</a>
<a href="#/2018 Pessimist's Guide.html">2018 Pessimist's Guide</a>
</section>
<section class=titled-group>
<header>Listen</header>
<a href="#/Bloomberg Law.html">Bloomberg Law</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>Subscribe</header>
<a href="#/Balance of Power.html">Balance of Power</a>
</section>
<section class=titled-group>
<header>Follow</header>
<a href=#/Twitter.html>Twitter</a>
<a href=#/Facebook.html>Facebook</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Read</header>
<a href=#/Travel.html>Travel</a>
<a href=#/Autos.html>Autos</a>
<a href=#/Homes.html>Homes</a>
<a href=#/Living.html>Living</a>
<a href=#/Culture.html>Culture</a>
<a href=#/Style.html>Style</a>
</section>
<section class=titled-group>
<header>Special Reports</header>
<a href="#/London Property Prices.html">London Property Prices</a>
<a href="#/New York Property Prices.html">New York Property Prices</a>
<a href="#/How to Invest in Art.html">How to Invest in Art</a>
<a href="#/How to Spend Your Bonus.html">How to Spend Your Bonus</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>Watch</header>
<a href=#/Made.html>Made</a>
</section>
<section class=titled-group>
<header>Follow</header>
<a href=#/Twitter.html>Twitter</a>
<a href=#/Facebook.html>Facebook</a>
<a href=#/Intagram.html>Intagram</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Read</header>
<a href=#/Editorials.html>Editorials</a>
</section>
<section class=titled-group>
<header>Follow</header>
<a href=#/Twitter.html>Twitter</a>
<a href=#/Facebook.html>Facebook</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>Listen</header>
<a href="#/Masters in Business.html">Masters in Business</a>
</section>
<section class=titled-group>
<header>Subscribe</header>
<a href="#/Bloomberg Opinion Today.html">Bloomberg Opinion Today</a>
<a href="#/Money Stuff.html">Money Stuff</a>
<a href=#/Ritholtz's Reads.html>Ritholtz's Reads</a>
<a href="#/Early Returns.html">Early Returns</a>
<a href=#/Sparklines.html>Sparklines</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Special Reports</header>
<a href="#/Sooner Than You Think.html">Sooner Than You Think</a>
<a href="#/The Year Ahead: 2018.html">The Year Ahead: 2018</a>
<a href="#/The Bloomberg 50.html">The Bloomberg 50</a>
</section>
<section class=titled-group>
<header>Watch</header>
<a href="#/Hello World.html">Hello World</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>The Magazine</header>
<a href=#/Subscribe.html>Subscribe</a>
</section>
<section class=titled-group>
<header>Follow</header>
<a href=#/Twitter.html>Twitter</a>
<a href=#/Facebook.html>Facebook</a>
<a href=#/Instagram.html>Instagram</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Watch Live TV</header>
<a href=#/US.html>US</a>
<a href=#/Europe.html>Europe</a>
<a href=#/Asia.html>Asia</a>
<a href=#/Australia.html>Australia</a>
<a href=#/Schedule+Shows.html>Schedule+Shows</a>
</section>
<section class=titled-group>
<header>Shows</header>
<a href=#/Surveillance.html>Surveillance</a>
<a href=#/Daybreak.html>Daybreak</a>
<a href=#/Markets.html>Markets</a>
<a href=#/What'd You Miss?.html>What'd You Miss?</a>
<a href="#/Bloomberg Technology.html">Bloomberg Technology</a>
<a href="#/All Shows....html">All Shows...</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>Series</header>
<a href=#/QuickTake.html>QuickTake</a>
<a href="#/Hello World.html">Hello World</a>
<a href="#/The Spark.html">The Spark</a>
</section>
<section class=titled-group>
<header>Follow</header>
<a href=#/TicToc.html>TicToc</a>
<a href=#/YouTube.html>YouTube</a>
<a href=#/Twitter.html>Twitter</a>
<a href=#/Facebook.html>Facebook</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Bloomberg Radio</header>
<a href="#/Listen Live.html">Listen Live</a>
<a href="#/About Bloomberg Radio.html">About Bloomberg Radio</a>
</section>
<section class=titled-group>
<header>Podcasts</header>
<a href=#/Decrypted.html>Decrypted</a>
<a href="#/Odd Lots.html">Odd Lots</a>
<a href=#/Trillions.html>Trillions</a>
<a href=#/Benchmark.html>Benchmark</a>
<a href="#/Masters in Business.html">Masters in Business</a>
<a href=#/Surveillance.html>Surveillance</a>
<a href=#/P-and-L.html>P&L</a>
<a href="#/Business of Sports.html">Business of Sports</a>
<a href="#/Coast to Coast.html">Coast to Coast</a>
<a href="#/Bloomberg Law.html">Bloomberg Law</a>
<a href="#/All Podcasts….html">All Podcasts…</a>
</section>
</div>
</article>
<article class=panel>
<div class=column>
<section class=titled-group>
<header>Read</header>
<a href=#/wealth.html>Wealth</a>
<a href=#/crypto.html>Crypto</a>
<a href=#/hyperdrive.html>Hyperdrive</a>
<a href=#/prognosis.html>Prognosis</a>
<a href=#/climatechanged.html>Climate Changed</a>
<a href=#/equality.html>Equality</a>
<a href=#/billionaires.html>Billionaires</a>
<a href=#/graphics.html>Graphics</a>
<a href=#/sponsoredcontent.html>Sponsored Content</a>
</section>
<section class=titled-group>
<header>Watch</header>
<a href=#/thedavidrubensteinshow.html>The David Rubenstein Show</a>
<a href=#/brilliantideas.html>Brilliant Ideas</a>
<a href=#/inspirego.html>Inspire GO</a>
</section>
</div>
<div class=column>
<section class=titled-group>
<header>Special Reports</header>
<a href=#/wheretoinvest$10,000.html>Where to Invest $10,000</a>
<a href=#/50companiestowatchin2018.html>50 Companies to Watch in 2018</a>
<a href=#/what'sinsidealltheiphones.html>What's Inside All the iPhones</a>
</section>
</div>
</article>
</nav>
</div>See Also:
Responsive Sticky Mega Menu – SnazzyMenu.js
Responsive Dropdown Mega Menu In JavaScript
Responsive Mega Menu In JavaScript
Sliding Dropdown Menu Inspired By Stripe.com
Animated Toggle Menu With JavaScript and CSS3
Stripe Like Desktop Navigation In Pure CSS
Stripe.com Inspired Dropdown Mega Menu With JavaScript
CSS Only Dropdown Mega Menu
Please how to get the panel to close when you click outside of it?
Using JS, add the event listener to monitor for clicks outside of the menu item