DotNetNuke DNN Hosting

TreeMenu

The TreeMenu as default does not assign any CSS classes for its styling. Therefore we have taken these classes from the DNN-Blue skin.css file to demonstrate some of the styling options.

.TreeViewMenu

Tree View MenuStyles the overall container for the TreeMenu.


.TreeViewMenu
{
    width: 175px;
    background-color: #dfe5f2;
    border-right: orange 10px solid;
    border-top: purple 10px solid;
    border-left: blue 10px solid;
    border-bottom: green 10px solid;
}


.TreeViewMenu_Header

Styles the Head section of the TreeMenu.

.TreeViewMenu_Header
{
    border-right: red 10px solid;
    border-top: yellow 10px solid;
    border-left: pink 10px solid;
    border-bottom: cyan 10px solid;
}


TreeMenu Text Styling

The text styling as default for the TreeMenu is styled using the .Normal class.

The text styling for the Header text ‘Site Navigation’ is styled using the .Head class.


Default.css styling

Within the default.css file, these classes do not have any effect on the TreeMenu for the DNN-Blue skin.

.TreeMenu_Node
.TreeMenu_NodeSelected
A.TreeMenu_Node:link, A.TreeMenu_NodeSelected:link
A.TreeMenu_Node:visited, A.TreeMenu_NodeSelected:visited
A.TreeMenu_Node:active, A.TreeMenu_NodeSelected:active
A.TreeMenu_Node:hover, A.TreeMenu_NodeSelected:hover