<story><title>Show HN: Mimicking the Bloomberg menu widget without JavaScript</title><url>https://dosyago-coder-0.github.io/mimic-bloomberg-menu-no-js</url></story><parent_chain><item><author>dosy</author><text>Context: I like the Bloomberg site and their drop-down menu is cool. Purely as a challenge, I set out to mimick the styles and behaviour of that menu without using JavaScript and trying to keep the HTML&amp;#x2F;CSS as minimal as possible. Their menu widget does not work if you switch of JS (but this was not a motivation for me to make this).&lt;p&gt;Tested on IE 11, Edge 12, latest Chrome stable and Firefox dev on Windows 10.&lt;p&gt;Source: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;dosyago-coder-0&amp;#x2F;mimic-bloomberg-menu-no-js&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;dosyago-coder-0&amp;#x2F;mimic-bloomberg-menu-no-j...&lt;/a&gt;&lt;p&gt;Maybe this post should be a Medium post titled &amp;quot;How I mimicked the Bloomberg menu widget without JavaScript.&amp;quot; I might write one if many people want that.</text></item></parent_chain><comment><author>analogmemory</author><text>Great job mimicking the menu with just pure CSS! You even got the fade&amp;#x2F;slide down effect mostly there.&lt;p&gt;From a UX perspective there&amp;#x27;s a reason they used Javascript. For example, if you hover over &amp;quot;Politics&amp;quot; and want to click on &amp;quot;2018 Women Candidates&amp;quot; naturally you move your mouse at an angle. Which causes you to lose the menu when it mouses over &amp;quot;Technology&amp;quot;. This is solved by tracking the mouse movement and holding the current menu open if the movement is at a specific angle&lt;p&gt;I&amp;#x27;d like to read your write up if you do it :)</text></comment>
<story><title>Show HN: Mimicking the Bloomberg menu widget without JavaScript</title><url>https://dosyago-coder-0.github.io/mimic-bloomberg-menu-no-js</url></story><parent_chain><item><author>dosy</author><text>Context: I like the Bloomberg site and their drop-down menu is cool. Purely as a challenge, I set out to mimick the styles and behaviour of that menu without using JavaScript and trying to keep the HTML&amp;#x2F;CSS as minimal as possible. Their menu widget does not work if you switch of JS (but this was not a motivation for me to make this).&lt;p&gt;Tested on IE 11, Edge 12, latest Chrome stable and Firefox dev on Windows 10.&lt;p&gt;Source: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;dosyago-coder-0&amp;#x2F;mimic-bloomberg-menu-no-js&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;dosyago-coder-0&amp;#x2F;mimic-bloomberg-menu-no-j...&lt;/a&gt;&lt;p&gt;Maybe this post should be a Medium post titled &amp;quot;How I mimicked the Bloomberg menu widget without JavaScript.&amp;quot; I might write one if many people want that.</text></item></parent_chain><comment><author>chrismorgan</author><text>The menu is functionally &lt;i&gt;completely broken&lt;/i&gt;. Because panel visibility is determined purely by :hover or :focus, as soon as you try to click on an item in the panel, that focus is lost and the panel disappears, taking your attempted click with it.&lt;p&gt;There are only three approaches that you can reasonably use here (they can be combined, too):&lt;p&gt;① Labels, which allow some rather nifty structure-breaking tricks on :hover;&lt;p&gt;② Change the .bmenu &amp;gt; a things from links (because you can’t nest links), and put the panel contents inside that node, then use :hover;&lt;p&gt;③ Use radio buttons and :checked.</text></comment>