A mimic of the Bloomberg dropdown menu widget without JavaScript
CSS 2/3, mimic-bloomberg-menu-no-js
Snippet by Anon
1120 0
HTML
<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> <div class="hide-at-start-wrapper"> <nav class="bmenu panel animated"> <a href="#"><span class="triangle-origin">Home</span></a> <a href="#"><span class="triangle-origin">Markets</span></a> <a href="#"><span class="triangle-origin">Technology</span></a> <a href="#"><span class="triangle-origin">Politics</span></a> <a href="#"><span class="triangle-origin">Pursuits</span></a> <a href="#"><span class="triangle-origin">Opinion</span></a> <a href="#"><span class="triangle-origin">Businessweek</span></a> <hr> <a href="#"><span class="triangle-origin">Video</span></a> <a href="#"><span class="triangle-origin">Audio</span></a> <hr> <a class="no-panel" href="#">Newsletters</a> <a class="no-panel" href="#">Watchlist</a> <a class="no-panel" href="#">Subscribe</a> <a class="no-panel" href="#">Sign In</a> <article class="panel"> <div class="column"> <section class="titled-group"> <header>Read</header> <a href="#">Wealth</a> <a href="#">Crypto</a> <a href="#">Hyperdrive</a> <a href="#">Prognosis</a> <a href="#">Climate Changed</a> <a href="#">Equality</a> <a href="#">Billionaires</a> <a href="#">Graphics</a> <a href="#">Sponsored Content</a> </section> <section class="titled-group"> <header>Watch</header> <a href="#">The David Rubenstein Show</a> <a href="#">Brilliant Ideas</a> <a href="#">Inspire GO</a> </section> </div> <div class="column"> <section class="titled-group"> <header>Special Reports</header> <a href="#">Where to Invest $10,000</a> <a href="#">50 Companies to Watch in 2018</a> <a href="#">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</a> <a href="#">Deals</a> <a href="#">Fixed Income</a> <a href="#">ETFs</a> <a href="#">Benchmark</a> <a href="#">Markets Magazine</a> </section> <section class="titled-group"> <header>Watch</header> <a href="#">Daybreak</a> <a href="#">Surveillance</a> <a href="#">Markets</a> <a href="#">What'd You Miss</a> </section> <section class="titled-group"> <header>Follow</header> <a href="#">Twitter</a> <a href="#">Facebook</a> </section> </div> <div class="column"> <section class="titled-group"> <header>Data</header> <a href="#">Stocks</a> <a href="#">Currencies</a> <a href="#">Commodities</a> <a href="#">Rates & Bonds</a> <a href="#">Sectors</a> <a href="#">Economic Calendar</a> </section> <section class="titled-group"> <header>Listen</header> <a href="#">Trillions</a> <a href="#">Odd Lots</a> <a href="#">Surveillance</a> <a href="#">Benchmark</a> <a href="#">P&L</a> </section> </div> </article> <article class="panel"> <div class="column"> <section class="titled-group"> <header>Read</header> <a href="#">Cybersecurity</a> <a href="#">Startups</a> <a href="#">AI</a> <a href="#">Mobile</a> <a href="#">Big Data</a> <a href="#">Cloud Computing</a> <a href="#">U.S.</a> <a href="#">Global</a> </section> <section class="titled-group"> <header>Special Reports</header> <a href="#">The Elon Musk Tracker</a> <a href="#">Tesla Model 3 Tracker</a> </section> </div> <div class="column"> <section class="titled-group"> <header>Watch</header> <a href="#">Gadgets with Gurman</a> <a href="#">Digital Defense</a> <a href="#">Bloomberg Technology TV</a> <a href="#">Studio 1.0</a> </section> <section class="titled-group"> <header>Listen</header> <a href="#">Decrypted</a> </section> <section class="titled-group"> <header>Follow</header> <a href="#">Twitter</a> <a href="#">Facebook</a> </section> </div> </article> <article class="panel"> <div class="column"> <section class="titled-group"> <header>Read</header> <a href="#">2018 Women Candidates</a> <a href="#">Trump Tracker</a> <a href="#">Brexit Coverage</a> <a href="#">World Leaders on the Brink</a> <a href="#">2018 Pessimist's Guide</a> </section> <section class="titled-group"> <header>Listen</header> <a href="#">Bloomberg Law</a> </section> </div> <div class="column"> <section class="titled-group"> <header>Subscribe</header> <a href="#">Balance of Power</a> </section> <section class="titled-group"> <header>Follow</header> <a href="#">Twitter</a> <a href="#">Facebook</a> </section> </div> </article> <article class="panel"> <div class="column"> <section class="titled-group"> <header>Read</header> <a href="#">Travel</a> <a href="#">Autos</a> <a href="#">Homes</a> <a href="#">Living</a> <a href="#">Culture</a> <a href="#">Style</a> </section> <section class="titled-group"> <header>Special Reports</header> <a href="#">London Property Prices</a> <a href="#">New York Property Prices</a> <a href="#">How to Invest in Art</a> <a href="#">How to Spend Your Bonus</a> </section> </div> <div class="column"> <section class="titled-group"> <header>Watch</header> <a href="#">Made</a> </section> <section class="titled-group"> <header>Follow</header> <a href="#">Twitter</a> <a href="#">Facebook</a> <a href="#">Intagram</a> </section> </div> </article> <article class="panel"> <div class="column"> <section class="titled-group"> <header>Read</header> <a href="#">Editorials</a> </section> <section class="titled-group"> <header>Follow</header> <a href="#">Twitter</a> <a href="#">Facebook</a> </section> </div> <div class="column"> <section class="titled-group"> <header>Listen</header> <a href="#">Masters in Business</a> </section> <section class="titled-group"> <header>Subscribe</header> <a href="#">Bloomberg Opinion Today</a> <a href="#">Money Stuff</a> <a href="#">Ritholtz's Reads</a> <a href="#">Early Returns</a> <a href="#">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</a> <a href="#">The Year Ahead: 2018</a> <a href="#">The Bloomberg 50</a> </section> <section class="titled-group"> <header>Watch</header> <a href="#">Hello World</a> </section> </div> <div class="column"> <section class="titled-group"> <header>The Magazine</header> <a href="#">Subscribe</a> </section> <section class="titled-group"> <header>Follow</header> <a href="#">Twitter</a> <a href="#">Facebook</a> <a href="#">Instagram</a> </section> </div> </article> <article class="panel"> <div class="column"> <section class="titled-group"> <header>Watch Live TV</header> <a href="#">US</a> <a href="#">Europe</a> <a href="#">Asia</a> <a href="#">Australia</a> <a href="#">Schedule+Shows</a> </section> <section class="titled-group"> <header>Shows</header> <a href="#">Surveillance</a> <a href="#">Daybreak</a> <a href="#">Markets</a> <a href="#">What'd You Miss?</a> <a href="#">Bloomberg Technology</a> <a href="#">All Shows...</a> </section> </div> <div class="column"> <section class="titled-group"> <header>Series</header> <a href="#">QuickTake</a> <a href="#">Hello World</a> <a href="#">The Spark</a> </section> <section class="titled-group"> <header>Follow</header> <a href="#">TicToc</a> <a href="#">YouTube</a> <a href="#">Twitter</a> <a href="#">Facebook</a> </section> </div> </article> <article class="panel"> <div class="column"> <section class="titled-group"> <header>Bloomberg Radio</header> <a href="#">Listen Live</a> <a href="#">About Bloomberg Radio</a> </section> <section class="titled-group"> <header>Podcasts</header> <a href="#">Decrypted</a> <a href="#">Odd Lots</a> <a href="#">Trillions</a> <a href="#">Benchmark</a> <a href="#">Masters in Business</a> <a href="#">Surveillance</a> <a href="#">P&L</a> <a href="#">Business of Sports</a> <a href="#">Coast to Coast</a> <a href="#">Bloomberg Law</a> <a href="#">All Podcasts…</a> </section> </div> </article> <article class="panel"> <div class="column"> <section class="titled-group"> <header>Read</header> <a href="#">Wealth</a> <a href="#">Crypto</a> <a href="#">Hyperdrive</a> <a href="#">Prognosis</a> <a href="#">Climate Changed</a> <a href="#">Equality</a> <a href="#">Billionaires</a> <a href="#">Graphics</a> <a href="#">Sponsored Content</a> </section> <section class="titled-group"> <header>Watch</header> <a href="#">The David Rubenstein Show</a> <a href="#">Brilliant Ideas</a> <a href="#">Inspire GO</a> </section> </div> <div class="column"> <section class="titled-group"> <header>Special Reports</header> <a href="#">Where to Invest $10,000</a> <a href="#">50 Companies to Watch in 2018</a> <a href="#">What's Inside All the iPhones</a> </section> </div> </article> </nav> </div>
CSS
{ } JS
Preview