Office 2010 Style Ribbon Toolbar in HTML/CSS/JS


2011-06-08


I have created an implementation of the Office 2010 Ribbon toolbar that can be used in any website. It is written in HTML, CSS, and JS. Try a demo at https://okgodoit.com/ribbon/ (https://okgodoit.com/ribbon/) or watch the video on YouTube (https://www.youtube.com/watch?v=5YOpn2W-fQ8). Download the source from GitHub (https://github.com/OkGoDoIt/Office-Ribbon-2010).


Some highlights:



Light (silver) and dark (black) themes





2010-style Backstage feature (optional)





2 button sizes





Buttons can have a disabled state





Tabs, sections, and buttons can all have custom HTML (such as bold or entities) in their titles





Optional hot and disabled icon states





Full HTML in ScreenTip (tooltip) supported





So far I’ve tested it in Chrome, Firefox, Safari, and IE 8+. I’m still working on IE 7 compatibility, and I haven’t tested it on Opera. It uses the jQuery framework.






There’s still a lot of work left to be done, but I wanted to get this first version out there. Feel free to leave feedback and suggestions in the comments.


Update: I added this project to GitHub. Check there for updates and feel free to fork it and add your own improvements. (https://github.com/OkGoDoIt/Office-Ribbon-2010)