Outlook Style Menu with Collapsable Side Menu


Introduction

I have read an article at http://www.codeproject.com/useritems/XPMenu.asp which explains the dropdown XP style menu.

Just I would like to add new features,

  1. Collapsable side menu.

  2. Change the XP style menu in to Outlook style bar.(Using CSS File "SlideMenu.css")

I think that most developers suffer from the problem of the design of the menu, needs thier application GUI like Outlook or XP Style,

Therefore I think that this menu will provide solution to their problem.

Source code contains

  • SlideMenu.css file
  • menu.js file

Import Css file in your page

<LINK href="SlideMenu/images/SlideMenu.css" type="text/css" rel="stylesheet">

Collapsable side menu feature permit to hide side menu from page as a client script

Hide menu function:

<script type="text/javascript">

function lefthide()

{

var fr = parent.document.getElementById("sbCont");

if(fr.style.display=="")

{

fr.style.display="none";

change('outlookside', 'outlookBarExpand')

}

else

{

fr.style.display="";

change('outlookside', 'outlookBarcollapse')

}

}

function change(id, newClass)

{

identity=document.getElementById(id);

identity.className=newClass;

}

script>

I hope that I have succeeded in making this article and I wish to be useful to others.

0 comments:

Blog Archive