Categories

Accordion (1) AfterEffects (1) Application (2) Automobile (1) Banking (1) Chrome (1) Cinema4D (2) Coding (2) Corel Draw (1) CSS (4) CSS3 (11) Design (2) Dropdown (1) Film (1) Finance (1) FinTech (1) Gateways (1) HTML (4) HTML5 (4) JavaScript (7) KDE (2) Layout (1) Login (1) LungoJs (1) Menu (3) Menubar (2) Movies (1) Navigation (2) Open Source (4) Panel (1) Payment (1) Photo Gallery (1) Photoshop (2) PHP (3) Production (1) Rekonq (2) Sony Vegas Pro (1) Startups (1) Taskware (1) Technology (1) Ticker (1) Validation (1) Website (3) XHTML (1)
Showing posts with label Navigation. Show all posts
Showing posts with label Navigation. Show all posts

Tuesday, February 14, 2012

Menu - A new way!!


Website menus has always been lists modified with a lot of CSS. We have seen vertical menus, horizontal menus, dropdown menus, etc. So this time I planned on something different. I made a circular menu where the sub menus appear as bearings around the main circle. This menu can be extended on all sides to include more sub menus. Check out the code. It will surely be interesting I hope!!

Download files:

Note: The code has been optimized for Mozilla. Add the -webkit- and -o- commands for running it on Chrome, Safari or Opera.

Monday, January 2, 2012

4 exciting forms of navigation

This is a collection of the four easiest and most used navigations used in todays world. The collection contains a horizontal navigation bar, a windows like menubar, a vertical menubar, and a tabular grid containing items. The menus has been styled with bright colours and varying transparencies.
The HTML markup of most of the menus is as simple as an unordered list. In the tabular grid, it has been arranged in a simple table. All the effects of a menu has been given using the CSS. So all the focus in this example should be on the CSS instead of the HTML markup. The markup can be changed anytime. I've used a few CSS3 transitions in here, to highlight the menu items on hover. The code for them has been written with only the -webkit- vendor prefix, so it will run fine in chrome and safari but not in opera and mozilla. You can add the vendor prefixes for them though!

Download source: