Home

Email

Telephone

Onpne Form

Snail Mail Address

Ski Hire Facilities

Beginners Slopes

Intermediate Slopes

Local

Nearby

With instructor

Snow boarding

Expert

Night life

Snow Hotel

The Snowman

Ice Cavern

Ski Inn

From Airport

In Resort

Multiple Resorts

Where to go

What to do

Places of interest

National parks & Museums

Money Exchange

lift Passes

Insurance

Boots

Skis

Ski Wear

Goggles

Ski Schools

Snow Report

Austrian

German

French

English

Short Breaks

Privacy

Date : 30th December 2021

Click/Tap the three bar menu icon at the top right of the screen.




Information

This demonstrations uses just CSS, no javascript, jQuery, PHP or any other scripting language.

This is a multi-level tree menu that uses minimal CSS to have the tree stay open as you 'click/tap' navigate.

To open the menu simply click the three bar icon at the top right of the screen. This will then change to an 'X' which can be clicked to close the menu.

The menu panel will slide in from the right and the page height will be limited to 100% so that it cannot scroll while the menu is visible.

The menu will always start with the sub menus closed, even if the menu panel is closed while displaying a sub menu structure.

This makes use of radio inputs to keep the menu structure open. It uses the radio input id to open a new sub menu and also to keep any parent menu open. It does this using multiple classnames for each id and using the :checked status of these classnames to keep that tree structure open.

So this menu will work in an identical way to those created using javascript/jQuery.

I think that this is about as far as CSS can be taken to emulate javascript/jQuery tree menus, but who knows, maybe one day, CSS can be used to style parent elements.

The stylesheet is in the page head so that you can see how few lines of CSS are required, but please note the copyright information at the bottom of this page.

Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

1. If you wish to use this demonstration in your website(s) please email me seeking permission.

2. You may NOT place this demonstration on another site for others to download.

3. You may NOT redistrubute or resell this demonstration.

4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.

5. If you are using this on a personal web site then please retain the copyright comment in the stylesheet. A support donation would be appreciated for the use of this demonstration.

6. If you are using this on a commercial web site, or as a paying job for a client, then please e-mail me asking for permission - and in this case a support donation is required.

Please consider making a donation, every little helps.