Menú de alternancia multi-nivel de Bloomberg inspirado en CSS puro

Vista prévia

Descripción

Una solución CSS pura para crear un menú de alternancia < a href = "https://www.bloomberg.com/" target = "_ blank" rel = "noopener" > Bloomberg. com que revela un mega menú horizontal de varios niveles al hacer clic en el botón de alternar.

Funcionamiento

Cargue la hoja de estilos principal ' bmenu. css ' en la sección head del documento.

<link rel=stylesheet href=bmenu.css>

Cree un botón de alternancia de menú con los elementos de casilla de verificación y etiqueta.

<input id=bmenu_toggle type=checkbox name=bmenu-open class=hidden>
<label class="bmenu toggle" for=bmenu_toggle accesskey=1>

<header><span class=heavy>&#x2630;</span> Menu</header>
</label>

Cree el menú de alternancia de varios niveles siguiendo la estructura de marcado de esta manera:

<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 &amp; 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&amp;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&amp;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>