Tell me how to make up this menu ? In the code that is on the site, something I can not figure out ...

    5 answers 5

    And I cheated: http://jsfiddle.net/WgPvd/

    CSS:

    /** * How to make 3-corner-rounded triangle in CSS (SO) * https://stackoverflow.com/q/14446677/1397351 */ .triangle, .triangle:before, .triangle:after { width: 250px; height: 250px; display: inline-block; float: left; transition: 300ms; } .reverse { transform: translateY(50%) rotate(90deg) skewY(30deg) scaleX(.866) !important; margin-left: -155px; margin-right: -35px; margin-top: -90px; } .triangle { overflow: hidden; position: relative; border-radius: 20%; transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); cursor: pointer; pointer-events: none; } .triangle:before, .triangle:after { position: absolute; pointer-events: auto; content: ''; background: gray; } .triangle:before { border-radius: 20% 20% 20% 53%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%); } .triangle:after { border-radius: 20% 20% 53% 20%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%); } .triangle:hover:before, .triangle:hover:after { background: orange; }
    • @lampa would be the perfect way. I already had pens on it to add to the collection, but to my surprise, it turned out that in Opera it works with a bug, Chrome and Safari works with a big bug, I don’t keep silence about the donkey. It's a shame :( - Deonis
    • @Deonis I probably skoruchil, everything is ok: dabblet.com/gist/4589858 - lampa

    Not so simple. Well, I understand that you want the same effect for the menu? It uses map images in conjunction with navigation list items, plus jQuery to create an effect. In order to understand the work of all this, take everything inside the nav tag ( including it ) and parse the scripts.js file: everything related to the element $ ('nav') and $ ('map [name = nav1] area ') .

    PS I pulled you all that is necessary, except cufon (you will figure it out yourself with the fonts ). Work, see here , do not forget about the connected plug-in in "External Resources".

      If you do not bother much, you can do so . there it is implemented through map

        There is a triangle on CSS . Maybe you need a geometric shapes on CSS

          And what's the problem there to understand? There is a list of absolute positioning units, in which the background is a picture, for non-paired ones the bottom one (the exact unit is porous with the bottom triangle) for paired ones the top one. When hovering, the transparency of the hoverIn block changes when leaving the block, the transparency of hoverOut changes.

          • there through the map is done, not by absolute positioning units - mountpoint
          • :) be more attentive. There are blocks in the list, the map is just for clicking, but all these highlights are made as I wrote - binliz