From the category archives:

CSS Menu

Italian map in css

Monday 20 April 09 by Onsitus in CSS Menu

Although, this italian map created in css could not be of as much interest for international users as for the italian’s one, I will post anyway this example here to give you an idea for future use and maybe the creation of other country’s map.

css italian map

This css italian map uses an image for each province positioned in an absolute way to the pixel to rebuild the complete italian map. The css property ‘opacity’ is used on the hover state of the links and render the relative information to the province visible using the property display.

Continue to read >>

{ 2 comments }

2 comments

Stay updated with our RSS Feed

Css image gallery

Tuesday 14 April 09 by Onsitus in CSS Menu

css gallery preview 1
css gallery preview 2

Always a bit curious to redo flash examples in css, I took the basic idea from the Flash gallery called Illusion created by FlepStudio.

This css gallery uses the same images for the vertical thumbnail (applied as background) and for their complete view on the hover state (element <img>) of the links with the related description (element <span>).

Those 2 elements are initially hidden using display:none; and made visible with display:block; applying a z-index superior to cover the thumbnail and positioned in an absolute way in relation to its <div> container.

Continue to read >>

{ 4 comments }

4 comments

Stay updated with our RSS Feed

css animated vertical menu

Vertical css menu with change of color and animated arrow on the hover state and selected state of the button

Continue to read >>

{ 0 comments }

0 comments

Stay updated with our RSS Feed

Preview of the css horizontal menu:

free css horizontal menu

Preview of the css vertical menu:

free css vertical menu

Black and white css menu in 2 versions (horizontal and vertical) with images visible on the hover state of the button.
Continue to read >>

{ 0 comments }

0 comments

Stay updated with our RSS Feed

Folder icon horizontal css menu 4

Wednesday 11 February 09 by Onsitus in CSS Menu

css icon menu preview

CSS horizontal menu with redimensioned icons on the hover state and positioned on the left or right with the css property float
Continue to read >>

{ 2 comments }

2 comments

Stay updated with our RSS Feed

css menu dropdown preview

Css menu horizontal drop down based on the tutorial How to create a basic css horizontal drop down menu.
Continue to read >>

{ 9 comments }

9 comments

Stay updated with our RSS Feed

Horizontal tab css menu - 2

Saturday 24 January 09 by Onsitus in CSS Menu

css tab menu preview

In the Photoshop section, it has been explained how to create a navigation menu.
This menu has then been converted into a Flash CS3 menu.

Next, my css version of the above menu.
Continue to read >>

{ 2 comments }

2 comments

Stay updated with our RSS Feed

Css menu drop down horizontal - 1

Thursday 22 January 09 by Onsitus in CSS Menu

Menu css drop down horizontal which open a second row with sub-links

This menu at fixed measure has been created using an unordered list and nested lists to contain the sub links playing with css property visible to hide and show the sub menu when necessary. The buttons ‘rollover’ effect is done using a unique image positioned with the css property background-position.

Continue to read >>

{ 1 comment }

1 comment

Stay updated with our RSS Feed