Responsive CSS3 Side Navigation Menu
Slowly resize screen to see the width transition tgrant54 Great job! I love the design Sara Soueidan Thank u tgrant54! The design is not mine though, I just coded it :) kadeni great job .. perfect Sara Soueidan Thank u kadeni ^.^ tgrant54 well..Still great job coding it! I may fork this and use it in a site of mine.. Jupiter St John beautiful work as always Sara! :D Sara Soueidan Thank you Jupiter! :D and tgrant54 feel free to use it however u want :) Tim Pietrusky Nice concept! Karol Falkiewicz Nice work, but few thing to mention: 1) Add transition for all items, it will look much better :) 2) You got 1 bug in this hover. On small screen it only shows text when you hover on ICON (span item), not full square button (anchor) (so in some cases menu slides but without text). Karol Falkiewicz PS:, just change you span[...] ~.text declaration on hover to a:hover > .text Sara Soueidan Thank u so much Karol for your comment and notes, you're right I just saw and fixed it, thank u again :) Karol Falkiewicz No problem. Another thing: Change transition time on "a" tag and on span[class ^= "icon"] and set them to be identical, also use "all" property on a tag transition. This way after you move cursor away from hovered button on small screen menu you will see sliding back background with shadows, not only shadows as it is right now. Cheers :) Sara Soueidan OMG! the transitions between the "a" tags and the spans aren't identical because I FORGOT to change them; I mean, at first the transitions were different, then I changed them, but forgot to change them on the spans. Thanks for the heads up :) Sara Soueidan and I changed the transition property to "all" like u said :) looks better! Nick Klaus Well Done Sara Soueidan Thanks @Tim and @Nick :) Akash Soti That's pretty slick!! good job. Sara Soueidan Thank u Akash :) Renato Alves Good work man! Sara Soueidan Thanks Renato but I'm not a man :P Mariam Amazing! , Thank you :) Sara Soueidan Thank U Mariam :) Jupiter St John Nice changes :D It looks much better on mobile! I wanted to share something I found. to make any cross domain requests for Font Icons work in Firefox or in Codepen, here is a hta access rule you can add to your font folder to make them work in Firefox cross domain stylie :). Then you can just link to them in the options panel as an external CSS file if you want. check the js panel of my fork here http://codepen.io/jwebcat/pen/vrcfL It works with any font. Sara Soueidan Great, Jupiter! thanks a lot for sharing! I bookmarked your demo for later reference, thanks again :D Lopez Hugo May I ask where your icons come from ? They are neither in the HTML, CSS, or JS. From JQuery ?! (I want to add other icons to my fork) Lopez Hugo Found: http://codepen.io/heygrady/details/ofyje , see also in the CSS settings. Sara Soueidan hi Hugo :) yes I added font awesome's stylesheet in the CSS settings panel, it is hosted on twitter bootstraps Sara Soueidan bootstrap's CDN, u just link it and use the icon's class name in your HTML Sara Soueidan :)