Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 438194" data-attributes="member: 1872">Nice work for your first conversion.I've forked it and made it JavaScript-less. So the animation when you hover over the button to show the sub-menu is done with pure CSS.<a href="https://codepen.io/Markshall/pen/gdrQaB" target="_blank">https://codepen.io/Markshall/pen/gdrQaB</a>Feel free to steal it.I also noticed you had your font as &quot;Helvetica Neue Bold&quot;. It doesn't work like that unfortunately. You have to set it as just the font-face and then tell elements to have a different font-weight. You'll notice under .item, I've set a font-weight of 600 to make it appear bold like in the original picture you've shown.I've tidied up your code too, you had elements set you didn't need to set. The button with an icon as it's main text has a class of .with-icon to give it a different padding setting.</blockquote>

[QUOTE="Markshall, post: 438194, member: 1872"] Nice work for your first conversion. I've forked it and made it JavaScript-less. So the animation when you hover over the button to show the sub-menu is done with pure CSS. [URL]https://codepen.io/Markshall/pen/gdrQaB[/URL] Feel free to steal it. I also noticed you had your font as "Helvetica Neue Bold". It doesn't work like that unfortunately. You have to set it as just the font-face and then tell elements to have a different font-weight. You'll notice under [FONT=Courier New].item[/FONT], I've set a [FONT=Courier New]font-weight[/FONT] of [FONT=Courier New]600[/FONT] to make it appear bold like in the original picture you've shown. I've tidied up your code too, you had elements set you didn't need to set. The button with an icon as it's main text has a class of [FONT=Courier New].with-icon[/FONT] to give it a different [FONT=Courier New]padding[/FONT] setting. [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members