Thursday, May 15, 2008 Login
 janet.Menu JavaScript Sub Menus
This is an example page, to illustrate the configuration of the janet Menu to hide and show the sub menus using JavaScript. In the option given the sub-menus are hidden unless they have the same parent as the current page.

Configuration options for this menu style are:
id="Menu"
runat="server"
Style="arrows"
indent="  "
icons="false"
options="hideinitial=true"

The colours and bars between the menu items are defined in the stylesheet:

/* ================================
    CSS STYLES FOR janet.Menu
   ================================
*/ 
.janetMenu_level0
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: white;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:#993300;
}

.janetMenu_level0Over
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: white;
   border-top:1px solid #909090;
   border-bottom:1px solid #505050;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:#993300;
}
.janetMenu_level0Selected
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: white;
   border-top:0px solid #B40000;
   border-bottom:0px solid #640000;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:#993300;
}
/* ===================== */
.janetMenu_level1
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #993300;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:Transparent;
}
.janetMenu_level1Over
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #993300;
   border-top:1px solid #909090;
   border-bottom:1px solid #505050;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
   cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:Transparent;
}
.janetMenu_level1Selected
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #993300;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
    background-color:Transparent;
}

/* ===================== */
.janetMenu_level2
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
.janetMenu_level2Over
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    border-top: #999999 0px solid;
    border-bottom: #999999 0px solid;
    border-left: #999999 0px solid;
    border-right: #999999 0px solid;
   cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
.janetMenu_level2Selected
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    border-top: #F1F1F1 0px solid;
    border-bottom: #F1F1F1 0px solid;
    border-left: #F1F1F1 0px solid;
    border-right: #F1F1F1 0px solid;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}

.janetMenu_level2 td
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
.janetMenu_level2Over td
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
   cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
.janetMenu_level2Selected td
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #993300;
    cursor:pointer;
    width:100%;
    height:20px;
    text-decoration:none;
}
/* ===================== */
.janetMenu_SectionStart
{
    height: 0px;
}
.janetMenu_SectionDivide
{
    height: 0px;
}
.janetMenu_SectionEnd
{
    height: 0px;
}
.janetMenu_ItemStart
{
    height: 0px;
}
.janetMenu_ItemDivide
{
    height: 0px;
}
.janetMenu_Item1Divide
{
    height: 0px;
}
.janetMenu_Item2Divide
{
    height: 0px;
}
.janetMenu_Item3Divide
{
    height: 0px;
}
.janetMenu_ItemEnd
{
    height: 0px;
}
  

DotNetNuke Website design and hosting from £15.00 per month. More...

Looking for a website design company in the Thames Valley, call us on 01628 566178

DotNetNuke Modules
DotNetNuke Modules availalble from Janet Systems

DotNetNuke Skins
DotNetNukeSkins.gif

from Janet Systems

Copyright 2002-2008 Janet Systems Ltd. | Terms Of Use | Privacy Statement