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)

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:

1 comment: