9 replies [Last post]
lizo
lizo's picture
Offline
Enthusiast
Leicester, England
Last seen: 11 years 2 weeks ago
Leicester, England
Joined: 2003-03-30
Posts: 51
Points: 0

I would like to have a menu system on my site that kind of resembles the one you get on Windows XP.

It doesnt have to scroll up and down and fade in and out like XP but just appear and dissappear.

The way I was thinking was to have a div with the menu title and the arrow image, then have another div below that resizes. Im just not sure how to go about doing this and whether it is possible to resize a div on the fly.

If anyone has seen anything similar or any tutorial sites could you let me know.

Thanks.

http//www.colormixer.tk
http//www.colourmixer.tk

Tags:
Daniel
Daniel's picture
Offline
Enthusiast
Last seen: 21 weeks 9 hours ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 76
Points: 0

Creating an XP style menu

Can you check the link to that image? I'm not seeing it here.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 48 weeks 4 days ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Creating an XP style menu

Could it be something like this you are after ?:
http://www.brothercake.com/scripts/navmeister/page.php

http//melbourne.ug.php.net

lizo
lizo's picture
Offline
Enthusiast
Leicester, England
Last seen: 11 years 2 weeks ago
Leicester, England
Joined: 2003-03-30
Posts: 51
Points: 0

Creating an XP style menu

Sad I dont know why the link isnt working, its the correct URL, heres the link.

http://www34.brinkster.com/colormixer/xpmenu.jpg

Thats not really what im after paCkeTroUTer, but it looks good and thanks anyway. Hopefully you can see the image now and youll know what im on about.

http//www.colormixer.tk
http//www.colourmixer.tk

lizo
lizo's picture
Offline
Enthusiast
Leicester, England
Last seen: 11 years 2 weeks ago
Leicester, England
Joined: 2003-03-30
Posts: 51
Points: 0

Creating an XP style menu

Eeeeek

Ok that link doesnt work either

Quote:
HTTP1.1 STATUS 403 Remote Access to this object forbidden This file cannot be directly accessed from a remote site, but must be linked through the Brinkster Member's site.

Ill try moving the file.

http//www.colormixer.tk
http//www.colourmixer.tk

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 48 weeks 4 days ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Creating an XP style menu

Just upload the picture here lizo... its something to do with brinkster not allowing you to link the file/pic to an outside resource...

http//melbourne.ug.php.net

lizo
lizo's picture
Offline
Enthusiast
Leicester, England
Last seen: 11 years 2 weeks ago
Leicester, England
Joined: 2003-03-30
Posts: 51
Points: 0

Creating an XP style menu

http://www34.brinkster.com/colormixer/images/xpmenu.jpg

Gdam it lol. The annoying thing is, if you copy and paste the link to the adress bar it works :?:

Ok ok I give up

Ive uploaded the image.

http//www.colormixer.tk
http//www.colourmixer.tk

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 48 weeks 4 days ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Creating an XP style menu

I was browsing Microsoft the other day and I found this featured/behaviour in its very own Web-site. Check it out

I did a quick test on Mozilla but it doesn't seem to work on it.

http//melbourne.ug.php.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 hours 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

disply or hide, switch class

To step back for a second, the trouble with the link is is know as hotlink protection. The idea behind it was to stop other sites using your images etc on your server.

It is possible to resize a div or make it appear. This example will hide or display an element such as a div.

function showorhide(id){
   if(document.getElementById(id)){    //check the element exists and can be accessed
       var ele = document.getElementById(id);    //get hold of the element
       if(ele.style.display=="none"){   //see if display property is set to non, switch classe
           ele.style.display="block";       
       }else{
           ele.style.display="none";     
       }
   }
}

You could also use a similar function to swap classes which would mean all the properties of the new class could be used.
function switchclass(id){
   if(document.getElementById(id)){    //check the element exists and can be accessed
       var ele = document.getElementById(id);    //get hold of the element
       if(ele.className=="link"){   
           ele.className="linksel";       
       }else{
           ele.className="link";     
       }
   }
}
Hope that helps.

lizo
lizo's picture
Offline
Enthusiast
Leicester, England
Last seen: 11 years 2 weeks ago
Leicester, England
Joined: 2003-03-30
Posts: 51
Points: 0

Creating an XP style menu

Thanks for the link 'paCkeTroUTer' but its not really the effect I am after and besides I cant get hold of the source for the menu. :?

Thanks Tony for the info on the images, ive never seen that before.
I tried your first example and I think I will be able to use that.

Thanks for all your help.

http//www.colormixer.tk
http//www.colourmixer.tk