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.


Similar Articles