Ever wanted to break free of those silly rectangles in web pages, but not sure how to do it? Use circles!
This example shows one way of creating a circular navigation using nothing but xhtml, css, and a bit of javascript. No Flash, no Silverlight, no SVG, no other plug-ins. Potential for a circular navigation is found in web logs, forums and product overviews (portfolios for instance) with a number of categories and sub categories.
So, what is there to know about this method? Can you do it, too?
- It validates as HTML5
- It uses CSS to position elements and gouvern the showing and hiding of sub categories
- It uses a bit of Javascript for one specific vendor's browser, which never was able to perform a hover an anything other than a hyperlink, but unfortunately proves to be the most-used browser of this day
- It can display nicely on phone browsers and other media appliances by adding a dedicated stylesheet
- It is tested on several current main browsers, however all tests were done using Microsoft's operating system, meaning we could use feedback from people using competitive systems like Apple, Linux, Unix, etc.
- It took me several weeks to develop, so if you use it, you are required to credit me.
If you have any feedback, please let us know! Thanks!
Need problem solving?
Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.