Handy XP Style Menu - CodeProject

Download source files - 58.1 Kb

Sample Image - leftmenu.jpg

Introduction

This is a pretty menu in XP style. Its is easy to setup and highly customizable. If you find it useful, please vote for me!!! See a working demo here.

The Frames page

<html>
<head>
<title>Left Menu</title>
</head>
 
    <frameset framespacing="0" border="false" frameborder="0" cols="170,*">
   <frame name="menu" src="leftmenu.htm" frameborder="0" marginwidth="0" 
           marginheight="0" framespacing="0" scrolling="no" noresize>
   <frame name="master" src="master.htm" frameborder="0" marginwidth="0" 
           marginheight="0" framespacing="0" scrolling="no" noresize>
    </frameset>
 
 <noframes>
    <body bgcolor="#FFFFFF">
    <br><br><center>
    <h1>No Frames!</h1>
    <h4>No frames in your browser!</h4>
    </center></body>
 </noframes>
</frameset>

</html>

The Target page

<html>
<head>
    <title>Left Menu</title>
    <link rel='stylesheet' href='leftmenu.css'>
</head>

    <body leftmargin="0" topmargin="0" marginwidth="0" 
                        marginheight="0" bgcolor="#ffffff">
        
        <table border=0 cellpadding='10' cellspacing=0><tr><td>

        This is the Target frame (master).
        <p><hr>
        Please visit my website: 
          <a href='http://www.industriavirtual.com.br' 
          target='_blank'>http://www.industriavirtual.com.br</a>
          
        <br>And don't forget to vote me!!!
        <br>Marcelo Franco.
        
        </td></tr></table>
    
        </body>
</html>

The Menu page

<html>
<head>
    <meta http-equiv='page-enter' content='blendtrans(duration=0.1)'>
    <script language="'javascript'" src='leftmenu.js'></script>
    <link href='leftmenu.css' type='text/css' rel='stylesheet'>
    
    <base target='master'>
</head>
<body bgcolor='#ffffff' marginheight='0' marginwidth='0' 
                                topmargin='0' leftmargin='0'>
<table border='1' cellpadding='0' cellspacing='0' width='100%' 
                      height='100%'><tr><td valign='top'>
    <table border='0' cellspacing='1' cellpadding='0' width='100%' 
                     height='100%' bgcolor='#f1f1ed'><tr><td valign='top'>
    
    <div id='masterdiv'>
    
        <div class='menu' onclick="SwitchMenu('sub1')">
            <img style='vertical-align: middle' width=20 height=20 
            src='icons/txtmenu.gif' border=0 hspace=3>Text Folders</div>
            
            <span class='options' id='sub1'>
                <div class='option' 
                       onmouseover="this.style.background='#D8E4F8'" 
                       onmouseout="this.style.background='#f5f5f5'">
                <a href='http://www.google.com'>
                      <img style='vertical-align: middle' 
                      width=16 height=16 src='icons/txtfolder.gif' border=0 
                      hspace=3>Text Links</a></div>
    
                <div class='option' 
                     onmouseover="this.style.background='#D8E4F8'" 
                     onmouseout="this.style.background='#f5f5f5'">
<a href='http://www.industriavirtual.com.br/master.asp?code=webpacks&subcode=basico'>
                  <img style='vertical-align: middle' width=16 
                  height=16 src='icons/txtfolder.gif' 
                  border=0 hspace=3>Text Links</a></div>
    
                <div class='option' 
                      onmouseover="this.style.background='#D8E4F8'" 
                      onmouseout="this.style.background='#f5f5f5'">
                <a href='http://www.google.com'>
                    <img style='vertical-align: middle' width=16 
                    height=16 src='icons/txtfolder.gif' border=0 
                    hspace=3>Text Links</a></div>
            </span>
   
    </div>
    
    <div class='menu'>
        <a href='http://www.industriavirtual.com.br' 
        target='_top' onClick='top.window.close()'>
    <img style='vertical-align: middle' width=20 
        height=20 src='icons/logoff.gif' border=0 
        hspace=3>Logoff</a></div>
    
    <tr><td align='center' valign='bottom'>
        <a href='http://www.industriavirtual.com.br' target='_blank'>
    <img src='industria.gif' width='125' height='13' 
        hspace='0' vspace='10' border='0' alt='Industria Virtual...'></a>
    
    </td></tr></table>
</td></tr></table>
</body>
</html>

That's All Folks.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Industria Virtual

Web Developer
Industria Virtual

Brazil

Member

Follow on Twitter

Taylor made web applications for you and your business.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

how to make a pop up window

amitpapa

5:24 7 Sep '09

plz send me
Sign In·View Thread·Permalink

too goog.......

Najmul Hoda

7:59 31 Mar '09

Very nice articl e.......... Najmul Hoda I want to be programmer till death.
Sign In·View Thread·Permalink

Problem downloading the latest version

SameerMughal

4:38 3 Mar '09

Hi there, Nice work. But I am still not sure wether it will allow me to incorporate the second child or not because I couldn't access the link to download. Does it allow FolderA -> FolderB -> Target(S)? Can you please paste a link to download the latest version because the link doesn't work. Thanks, Sameer. Sameer
Sign In·View Thread·Permalink

PanelBar using Jave

fcyjk,kl;

7:15 8 Sep '07

Hi,Do u know how to create something similiar to this(Panel bar) using java programming languange? pls give some guide. thanks
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Doesn't Allow Changes

JRA57

9:11 25 Jan '07

I downloaded two versions of the menu. When I unzip either version it runs fine. Whenever I make ANY edits at all, it stops working. If I delete one letter and then put it back. This is frustrating, and probably something simple. I've done file compares to no avail. Anybody able to help? Thanks in advance. JRA
Sign In·View Thread·Permalink	1.00/5 (3 votes)

OK PLease help ASAP!!!

Delver

5:29 26 Jul '06

This is a very cool menu.
I have a problem and I have two solutions but I dont know how to implement them.

Scenario:

You Exapnd the menu make it long. When you put your mouse over any part of a subitem it changes color and the mouse arrow changes to a hand. but whe you click nothing happens unless you click on the text or the icon in that submenu.

1 fix. Make the mouse icon chnage only when over the text on the subitem.
Make that whole section of that subitem respond to the click.

DO YOU GUYS UNDERSTAND THE QUESTION Unsure | :~

so good

ewebapp

15:24 23 Dec '05

firefox,ie,opera Pay attention to in the Ajax, ASp.net, Web2.0
Sign In·View Thread·Permalink	1.00/5 (2 votes)

Keeping Menu Open at Same Position After Page With No Frames

anthony_mast

20:40 4 May '05

I am using it in a scenario where I cannot use frames. Is there any way one can expand it to the last position after the page has loaded? Anthony
Sign In·View Thread·Permalink	2.33/5 (3 votes)

How to make open item stay open unless user close ?

junuki

11:09 1 Sep '04

This is absolutely great code.. Kudos for you ! I have one quesiton, though. If I want to make open item stay open unless user click it to close. What am I supposed to to ? How I could modify it ? Also what I am working on is to have a "Tree" menu in one of the menu (as sub menu). Do you have any examples like that ? Thanks in advance !
Sign In·View Thread·Permalink

Re: How to make open item stay open unless user close ?

fancellu

13:20 9 Sep '04

Comment out this for (var i=0; i
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Re: How to make open item stay open unless user close ?

junuki

7:06 10 Sep '04

Thanks a lot for your help !!
Sign In·View Thread·Permalink	1.00/5 (1 vote)

XP Layers

Drummos

18:32 27 Jul '04

I was able to add another layter to the XP menu you made but I havn't been successful at hiding the second layer at startup.   You'll see what I mean if you go to www.adventurersgates.com

Here's a snippit of my code: (I didn't change the .js doc cause I can't get anything I tried to work right lol)   I'd appreciate any help.

<div class='menu' onclick="SwitchMenu('sub3')"><img style='vertical-align: middle' width=20 height=20 src='icons/dbmenu.gif' border=0 hspace=3>Gates</div>

      <Span class='option' id='sub3'>
     <div class='menu' onclick="SwitchMenu('sub3a')"><img style='vertical-align: middle' width=20 height=20 src='icons/dbmenu.gif' border=0 hspace=3>Arduin</div>

          <span class='options' id='sub3a'>

<div class='option' onmouseover="this.style.background='#D8E4F8'" onmouseout="this.style.background='#f5f5f5'">

<a href='ArduinHist.html'><img style='vertical-align: middle' width=16 height=16 src='icons/dbfolder.gif' border=0 hspace=3>A History of Arduin</a></div>

Ally

The GUI of left menu has problem

enjoycrack

19:49 9 Jun '04

I realy like this article.The GUI is very impression But when I run it and click Tab button many times , there are no any text and icons on it's GUI Please help me
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Peace of art

Mohammad O. Ali

20:25 27 Apr '04

Dear Mr. Franco thats a really a nice piece of art i visited the your web site "http://www.industriavirtual.com.br" i would really appriciate it if you tell me how to do the fade trick Mohammad O. Ali
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Re: Peace of art

runmin

18:22 15 Nov '04

http://msdn.microsoft.com/workshop/samples/author/filter/slideshow.htm[^]
Sign In·View Thread·Permalink

How can i use this in VC

mailMonty

23:17 25 Feb '04

how can i use this really nice js in vc i can put in it in a webpage and call it from CHTMLView but how i handle the events C makes it easy to shoot yourself in the foot; C++ makes it harder, but when you do, it blows away your whole leg
Sign In·View Thread·Permalink

http://scam.ceroline.info/

4:07 4 Dec '07

http://scam.ceroline.info/ http://scam.ceroline.info/
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Very impressive

Peter Mayhew

4:33 23 Nov '03

I have been looking to create a menu for some time, and whilst creating a few in Macromedia Flash, I just happen to find yours! I was so impressed I had to give it a try!!

After a few hours tweeking my template and theme, I feel your menu now merges in quite nicely. (I'm no professional though!!)

I will place your name in a "credits page" along with a link, but give me a little bit of time as I'm still working in progress.

I have only one question. The scroll bar in Internet explorer is now a different colour. How did this happen?, and how can i change it? I'm not strictly a professional programmer like the rest of you guys so bear with me for asking a simplistic question!!

Regards

---
Peter M

Re: Very impressive

Marcelo Franco

9:14 23 Nov '03

Hi, Peter.

The trick to change the look of the scroll bar is quite simple. Just make a
few adjusts in the file "leftmenu.css":

body,td {

color: #000000;font-family:tahoma, verdana, helvetica; font-size: 11px;

font-weight:none;

 scrollbar-face-color: #ffffff;

 scrollbar-shadow-color: #006699;

 scrollbar-base-color : #ffffff;

 scrollbar-highlight-color: #006699;

 scrollbar-3dlight-color: #ffffff;

 scrollbar-darkshadow-color: #ffffff;

 scrollbar-track-color: #f8f8f8;

 scrollbar-arrow-color: #006699;

}

The script above is very compreensive. I's called from the leftmenu.htm
page:

<link href='leftmenu.css' type='text/css' rel='stylesheet'>

That's all. Forgive my bad english.

Re: Very impressive

Peter Mayhew

1:26 24 Nov '03

That great, thank you very much. Your english is fine, much better than me speaking Brazilian Is the downloadable code on CP the new version of your menu?, or the old version? --- Peter M
Sign In·View Thread·Permalink	1.00/5 (1 vote)

My other menu...

Marcelo Franco

7:14 6 Nov '03

http://www.codeproject.com/jscript/treemenu.asp
Sign In·View Thread·Permalink

Re: My other menu...

allia

7:36 6 Nov '03

Thanks for the tip!
Sign In·View Thread·Permalink

New version launched!!!

Marcelo Franco

1:11 6 Nov '03

Find it on: http://www.industriavirtual.com.br/codedemo/leftmenu/index.htm
Sign In·View Thread·Permalink	5.00/5 (2 votes)

Re: New version launched!!!

allia

6:12 6 Nov '03

Where can the source code of the new version be donwloaded and what has been changed from past release on codeproject? How many sub-levels can be inserted? Can I have "TestFolders"--> "TextLinks"-->"TextSubLinks" ? Thank you. Nice Work! I might use it instead of a 'tree' form.
Sign In·View Thread·Permalink

Re: New version launched!!!

Marcelo Franco

7:28 6 Nov '03

Update (2003/11/06): - Now you can click in any region of each option. Download updated version here.
Sign In·View Thread·Permalink	5.00/5 (2 votes)