[{"data":1,"prerenderedAt":603},["ShallowReactive",2],{"project-17400164":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":46,"post_text":49,"what":50,"said":74,"maker_in_thread":203,"shape":212,"grid":216,"attempts":565,"same_week":566,"maker_shows":38,"maker_hidden":595,"reader_version":596,"card":597},"17400164","mimic-bloomberg-menu-no-js","Mimicking the Bloomberg menu widget without JavaScript","title","Show HN: Mimicking the Bloomberg menu widget without JavaScript","https:\u002F\u002Fdosyago-coder-0.github.io\u002Fmimic-bloomberg-menu-no-js","dosyago-coder-0.github.io","dosy",1530017833,2018,355,132,55,2155,3,"legend","learning_science","css menu demo","web_app",[24,25,26,27],"css dropdown menu","no javascript","hover menu","bloomberg menu clone","mixed",-0.103,{"positive":31,"neutral":32,"mixed":33,"critical":34},12,16,7,18,53,{"execution":37,"design":40,"performance":42,"idea":44,"privacy":45},{"positive":38,"critical":39},5,10,{"positive":41,"critical":38},1,{"positive":41,"critical":43},0,{"positive":41,"critical":43},{"positive":41,"critical":43},[18,41,18,43,43,43,18,43,41,41,47,43,43,18,48,18,38,38,43,43,38,18,43,18,18,47,43,38,43,41,18,41,47,43,41,41,43,41,47,38],2,4,null,{"problem":51,"audience":49,"pricing":49,"motivation":58,"time_to_build":49,"stack":62,"openness":71,"stage":72,"team_size":73},{"value":52,"source":53,"evidence":54},"Reproduces a JavaScript-driven dropdown menu using only HTML and CSS","maker",[55],{"id":56,"by":11,"text":57},"17400200","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…",{"value":59,"source":53,"evidence":60},"A challenge to mimic the menu's styles and behaviour without JavaScript",[61],{"id":56,"by":11,"text":57},[63,67],{"value":64,"source":53,"evidence":65},"HTML",[66],{"id":56,"by":11,"text":57},{"value":68,"source":53,"evidence":69},"CSS",[70],{"id":56,"by":11,"text":57},"open_source","prototype","unknown",{"praise":75,"objections":99,"requests":140,"questions":168,"alternatives":180},[76,88],{"value":77,"source":78,"evidence":79},"Good job mimicking the menu with pure CSS","commenter",[80,84],{"id":81,"by":82,"text":83},"17402265","analogmemory","Great job mimicking the menu with just pure CSS! You even got the fade\u002Fslide down effect mostly there. From a UX perspective there's a reason they used Javascript. For example,…",{"id":85,"by":86,"text":87},"17400690","daylightsavings","Firstly, job well done. Secondly, what is the motivation of going pure CSS aside from the challenge of it? I once prefered Pure CSS stuff until I learned Javascript myself. Now…",{"value":89,"source":78,"evidence":90},"Works in several browsers for some commenters",[91,95],{"id":92,"by":93,"text":94},"17403299","Kiro","Nice try but it works fine in all browsers for me.",{"id":96,"by":97,"text":98},"17405602","SkyMarshal","Nice job. To add to the test db, works on Firefox 60.0.2 (64bit) on Ubuntu 18.04 too.",[100,115,122,129],{"value":101,"source":78,"evidence":102},"Menu closes when moving the cursor toward the submenu",[103,107,111],{"id":104,"by":105,"text":106},"17400431","elemakil","Pretty cool indeed! Found a bug with Chrome 67.0.3396.87 on Mac OS 10.11.6: When you hover over a menu item (e.g. \"Markets\"), the sub-menu updates based on the sub-items for the…",{"id":108,"by":109,"text":110},"17400397","pmilla1606","Well done! Moving the mouse to a child resets the position though. You may need some JS to do some fancy stuff like here:…",{"id":112,"by":113,"text":114},"17400538","psychometry","Awful usability. I expect that when hovering over a section and moving my cursor to the right I would stay within that section, but it always just reverts to home or whatever…",{"value":116,"source":78,"evidence":117},"Breaks keyboard and assistive technology use",[118],{"id":119,"by":120,"text":121},"17402967","malydok","I, on the other hand, would like to point out the lack of accessibility of this approach, it's unusable with a keyboard. Let's not forget about assistive technologies.",{"value":123,"source":78,"evidence":124},"Back button and # links cause problems",[125],{"id":126,"by":127,"text":128},"17401414","astura","Makes back button unusable. EDIT: ok, I see what they are trying to do, using # URLs whereas the \"real\" url would be an actual link that directs you to another page so the back…",{"value":130,"source":78,"evidence":131},"Clicking submenu links fails because panel disappears on hover loss",[132,136],{"id":133,"by":134,"text":135},"17400925","chrismorgan","The menu is functionally completely broken. 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…",{"id":137,"by":138,"text":139},"17401397","lucideer","I don't mean to be overcritical of someone learning to code—this is much more a criticism of people upvoting links without clicking them—why is this on the HN frontpage? It…",[141,153,160],{"value":142,"source":78,"evidence":143},"Add diagonal mouse-movement tolerance like Amazon and Mac menus",[144,145,149],{"id":81,"by":82,"text":83},{"id":146,"by":147,"text":148},"17404546","btown","You could just create an invisible :hover::before on the \u003Ca> tag that renders an invisible triangle that overlaps the neighbors. Since it's still part of the \u003Ca> tag, as long as…",{"id":150,"by":151,"text":152},"17404392","DonHopkins","You're right -- in fact it was at least 31 years ago! I just posted a comment about this with a link to the 1987 Apple Human Interface Guidelines and page snapshots explaining…",{"value":154,"source":78,"evidence":155},"Dismiss menu by clicking outside it",[156],{"id":157,"by":158,"text":159},"17404874","vanzorn","I love what you've done here! One recommendation (if it hasn't already been mentioned)... easy dismissal of the drop-down. Once I have opened the menu, if I choose not to click…",{"value":161,"source":78,"evidence":162},"Write-up of the technique",[163,167],{"id":164,"by":165,"text":166},"17400481","maneesh","I'd want to read it!",{"id":81,"by":82,"text":83},[169,173],{"value":170,"source":78,"evidence":171},"Why avoid JavaScript for this menu",[172],{"id":85,"by":86,"text":87},{"value":174,"source":78,"evidence":175},"Why not use the Son of Suckerfish approach",[176],{"id":177,"by":178,"text":179},"17400795","Grumbledour","Any specific reason why you haven't used the old \"Son of Suckerfish\" approach? [0] It would have solved the \"stay open on hover\" problem and made for much cleaner, more…",[181,192,199],{"value":182,"source":78,"evidence":183},"Amazon mega dropdown",[184,188],{"id":185,"by":186,"text":187},"17404401","mavci","http:\u002F\u002Fbjk5.com\u002Fpost\u002F44698559168\u002Fbreaking-down-amazons-mega-dropdown",{"id":189,"by":190,"text":191},"17405598","cachvico","Here's an article that reverse engineers Amazon's implementation; http:\u002F\u002Fbjk5.com\u002Fpost\u002F44698559168\u002Fbreaking-down-amazons-mega-dropdown - not the first implementation by a long…",{"value":193,"source":78,"evidence":194},"Stripe.com menu",[195],{"id":196,"by":197,"text":198},"17400746","amelius","I like the menu on Stripe.com. Make a pure CSS version of that and you're king :)",{"value":200,"source":78,"evidence":201},"Son of Suckerfish dropdowns",[202],{"id":177,"by":178,"text":179},{"comments":38,"answered":47,"key":204},[205,206,209],{"id":56,"text":57},{"id":207,"text":208},"17405581","I just added triangular hover regions based on the comments. Debug outlines showing the open paths to the submenus: https:\u002F\u002Fvgy.me\u002FnBfeiA.gif",{"id":210,"text":211},"17416940","That is cool.",{"commenters":213,"max_depth":214,"maker_replies":38,"first_comment_mins":38,"lifespan_hours":215},91,8,122,[217,219,223,224,228,232,236,238,242,245,247,250,252,255,257,260,262,264,267,269,271,273,276,279,282,285,288,291,293,294,297,300,303,306,308,311,313,316,319,321,325,327,331,334,336,338,343,348,351,354,357,360,364,367,371,373,374,376,380,383,386,388,391,394,396,399,402,405,408,410,413,415,416,419,422,425,428,431,434,435,437,440,443,444,446,447,449,452,455,456,458,460,463,466,467,468,470,471,474,477,480,482,483,486,490,493,495,498,500,502,506,509,512,514,517,519,522,525,527,529,531,534,537,540,543,546,549,553,556,558,561],[104,43,18,218,105,43],"project\u002Fmixed\u002Fexecution",[220,43,43,221,222,43],"17401318","commenter\u002Fneutral\u002Fexecution","jschwartzi",[108,41,18,218,109,43],[225,41,41,226,227,43],"17400425","project\u002Fcritical\u002Fexecution","albanberg",[229,41,18,230,231,43],"17400497","project\u002Fneutral\u002Fexecution","yscik",[233,41,43,234,235,43],"17400655","commenter\u002Fneutral\u002Fnone","ckluis",[237,41,18,230,134,43],"17400772",[239,47,43,240,241,43],"17404308","other\u002Fneutral\u002Fnone","tabtab",[243,47,43,240,244,43],"17404352","jcfrei",[246,47,43,240,241,43],"17404387",[248,47,43,240,249,43],"17404357","robbrown451",[251,47,43,240,241,43],"17404406",[253,47,43,234,254,43],"17406427","spiderfarmer",[256,47,43,234,241,43],"17408784",[258,47,43,240,259,43],"17404436","jonahx",[261,47,43,240,241,43],"17404743",[263,47,43,234,259,43],"17404952",[265,47,43,234,266,43],"17404976","furgooswft13",[268,47,43,234,241,43],"17405064",[270,47,43,240,266,43],"17404669",[272,47,43,240,241,43],"17404772",[274,18,18,230,275,43],"17400378","ddtaylor",[277,48,43,240,278,43],"17403861","Sawamara",[280,48,43,234,281,43],"17403883","g_delgado14",[283,48,43,284,278,43],"17411382","commenter\u002Fneutral\u002Fperformance",[286,38,43,240,287,43],"17402998","Kagerjay",[119,289,41,290,120,43],6,"project\u002Fcritical\u002Fnone",[292,289,43,234,241,43],"17404949",[126,33,41,226,127,43],[295,33,41,226,296,43],"17401605","vxNsr",[298,214,18,230,299,43],"17400963","Aardwolf",[301,214,43,234,302,43],"17401011","codetrotter",[304,214,43,234,305,43],"17401035","CaveTech",[137,307,41,226,138,43],9,[309,307,18,230,310,43],"17402855","mintplant",[312,307,18,230,138,43],"17406725",[314,39,43,240,315,43],"17400410","k8martian",[317,39,43,240,318,43],"17400479","nkrisc",[196,320,43,240,197,43],11,[322,320,43,323,324,43],"17402248","other\u002Fcritical\u002Fperformance","seba_dos1",[326,320,43,240,197,43],"17402557",[328,320,43,329,330,43],"17403095","other\u002Fneutral\u002Fexecution","bfred_it",[332,320,43,221,333,43],"17405468","hayyyyydos",[335,320,43,221,330,43],"17435788",[157,31,18,337,158,43],"project\u002Fmixed\u002Fdesign",[339,340,43,341,342,43],"17404329",13,"other\u002Fneutral\u002Fperformance","etaioinshrdlu",[344,345,38,346,347,43],"17401980",14,"project\u002Fpositive\u002Fperformance","bytematic",[349,345,18,350,151,43],"17404345","project\u002Fneutral\u002Fdesign",[352,345,18,350,353,43],"17405658","jehlakj",[96,355,38,356,97,43],15,"project\u002Fpositive\u002Fnone",[358,32,43,240,359,43],"17403901","nkg",[361,362,41,226,363,43],"17400830",17,"a_r_8",[365,362,43,240,366,43],"17401125","swyx",[368,362,38,369,370,43],"17401660","project\u002Fpositive\u002Fexecution","JoJoJoboop",[56,34,43,372,11,41],"maker\u002Fpositive\u002Fnone",[164,34,38,372,165,43],[85,34,18,375,86,43],"maker\u002Fmixed\u002Fidea",[377,34,38,378,379,43],"17400778","project\u002Fpositive\u002Fprivacy","mavidser",[381,34,43,234,382,43],"17403447","jrochkind1",[384,34,43,234,385,43],"17404001","sincerely",[387,34,43,234,249,43],"17404343",[389,34,43,234,390,43],"17405188","basica",[392,34,43,234,393,43],"17404737","rodorgas",[395,34,43,234,382,43],"17405174",[397,34,43,234,398,43],"17400794","ohitsdom",[400,34,43,234,401,43],"17403493","ThirdFoundation",[403,34,38,404,178,43],"17400867","project\u002Fpositive\u002Fidea",[406,34,43,234,407,43],"17400913","nebulous1",[409,34,18,350,178,43],"17401049",[411,34,43,284,412,43],"17401388","jensvdh",[414,34,43,234,138,43],"17401426",[177,34,18,337,178,43],[417,34,43,240,418,43],"17402414","nathancahill",[420,34,43,234,421,43],"17402763","xab9",[423,34,43,234,424,43],"17402961","pc86",[426,34,43,234,427,43],"17403584","tgarv",[429,34,43,234,430,43],"17403590","tbolt",[432,34,18,350,433,43],"17403723","chiefalchemist",[133,34,41,226,134,43],[436,34,38,369,310,43],"17402817",[438,34,18,230,439,43],"17402972","function_seven",[441,34,41,442,134,43],"17405273","maker\u002Fcritical\u002Fnone",[92,34,38,369,93,43],[445,34,41,226,241,43],"17404469",[81,34,18,337,82,43],[448,34,43,240,424,43],"17402974",[450,34,43,240,451,43],"17403147","def_true_false",[453,34,43,240,454,43],"17403794","__david__",[150,34,43,240,151,43],[207,34,43,457,11,41],"maker\u002Fpositive\u002Fexecution",[459,34,38,457,151,43],"17405905",[461,34,43,462,151,43],"17404739","other\u002Fneutral\u002Fidea",[464,34,43,462,465,43],"17405556","Rapzid",[189,34,43,240,190,43],[185,34,43,240,186,43],[469,34,43,240,151,43],"17404778",[146,34,18,350,147,43],[472,34,41,226,473,43],"17404640","andrewingram",[475,34,18,350,476,43],"17404979","kroltan",[478,34,43,234,479,43],"17405236","wyattpeak",[481,34,43,234,473,43],"17409769",[210,34,43,234,11,41],[484,34,43,240,485,43],"17403109","dmitrytokmakov",[487,34,41,488,489,43],"17403552","project\u002Fcritical\u002Fdesign","sungju1203",[491,34,41,488,492,43],"17403588","mariusmg",[494,34,18,337,433,43],"17403754",[496,34,41,442,497,43],"17405294","9935c101ab17a66",[499,34,38,372,235,43],"17419482",[501,34,43,372,11,41],"17422927",[503,504,43,240,505,43],"17401339",19,"gramstrong",[507,504,43,240,508,43],"17401738","cmpolis",[510,504,43,240,511,43],"17401773","chemochemo",[112,513,41,488,113,43],20,[515,513,43,240,516,43],"17400555","have_faith",[518,513,41,488,113,43],"17400603",[520,513,43,234,521,43],"17401193","microcolonel",[523,513,43,234,524,43],"17402102","themarkn",[526,513,43,234,521,43],"17405111",[528,513,43,234,113,43],"17412741",[530,513,43,240,407,43],"17400872",[532,513,43,533,82,43],"17402277","commenter\u002Fneutral\u002Fidea",[535,513,41,226,536,43],"17400605","alexggordon",[538,513,43,234,539,43],"17400687","jypepin",[541,513,41,226,542,43],"17400701","jstanley",[544,513,41,488,545,43],"17401510","onion2k",[547,513,18,350,548,43],"17401051","currysausage",[550,513,18,551,552,43],"17401589","project\u002Fneutral\u002Fidea","Sir_Cmpwn",[554,513,38,457,555,43],"17402334","franciscop",[557,513,43,457,11,41],"17402488",[559,513,38,560,555,43],"17402556","project\u002Fpositive\u002Fdesign",[562,563,18,350,564,43],"17405358",21,"bobthechef",[],[567,572,577,582,586,591],{"id":568,"name":569,"points":570,"category":571},"17365150","Why Do I Procrastinate?",611,"productivity",{"id":573,"name":574,"points":575,"category":576},"17373465","Material Dashboard",436,"dev_tools",{"id":578,"name":579,"points":580,"category":581},"17405722","B2blaze",359,"languages",{"id":583,"name":584,"points":585,"category":581},"17398506","The Vue.js Handbook",262,{"id":587,"name":588,"points":589,"category":590},"17377088","Kanji RNN",166,"ai",{"id":592,"name":593,"points":594,"category":576},"17385051","Instagram-scraper",165,false,"v2",{"id":598,"name":5,"line":6,"ai":595,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":599,"top":18,"kw":600,"maker":11,"domain":10,"tier":19,"attempts":43,"strip":601,"url":9,"mix":602,"praise":77,"objection":101,"sub":21},17400164,-0.1,[24,25,26,27],"3130003011200343550053033205013120110125",[31,32,33,34],1794036567250]