Lesson 14: .MainMenu_SubMenuItemActive
.MainMenu_SubMenuItemActive - Description
This additional style class is used by DotNetNuke to style the sub menu item for the page currently selected, hence the name 'Main Menu, Sub Menu Item Active'.
This CSS class is not found in default.css file, therefore, there is no original code for it.
.MainMenu_SubMenuItemActive - Example
To help us understand the DonNetNuke CSS Class .MainMenu_SubMenuItemActive better and the part of the menu that is affected. We will insert the following demonstration code border: solid 4px steelblue; background-color: khaki; height: 30px;. This demonstration code will display solid borders with a border color of 'green' and a weight of '4px', and background-color of 'orange' with a height of 30px.
The skin.css demonstration code:
.MainMenu_SubMenuItemActive { border: steelblue 4px solid; background-color: khaki; height: 30px; }
This image shows you the .MainMenu_SubMenuItemActive CSS class demonstration code being used in the skin.css file, for the DNN_Gray Fixed Width Skin, modified to use a Solpart Menu.
Note: The borders specified in the demonstration code display in the main menu sub menus, but when the mouse hovers over the sub menu item the borders disappear.
This image has the demonstration code for all the default.css classes, along with the .MainMenu_SubMenuItemActive CSS Class with a yellow background for the Sub Menu Item Active. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.
.MainMenu_SubMenuItemActive - Tips & Tricks
Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Sub Menu Active CSS Class. Click on the tips & tricks below to find out more or view all our Solpart Menu CSS Classes Tips & Tricks in one place.
To help maintain simplicity within your Solpart Menu CSS Classes we recommend that you leave blank or don't use Main Menu Root Menu Item Active or Main Menu Sub Menu Item Active CSS Classes.
How the code should appear in your CSS file. .MainMenu_RootMenuItemActive { /* blank, refers to rootmenuitemselected */ } .MainMenu_SubMenuItemActive { /* blank, refers to submenuitemselected */ }
How the code should appear in your CSS file.
.MainMenu_RootMenuItemActive { /* blank, refers to rootmenuitemselected */ } .MainMenu_SubMenuItemActive { /* blank, refers to submenuitemselected */ }
.MainMenu_SubMenuItemActive - Suggestions
Learn about the most common practices used in the DotNetNuke Solpart Menu, Main Menu, Sub Menu Item Active CSS Class. Click on the suggestions below to find out more.
Horizontal and Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_SubMenuItemActive CSS Class. Due to various web browsers and their limitations we recommend that you keep your DotNetNuke Horizontal and Vertical Solpart Menu, Main Menu, Sub Menu Item Active CSS Class Properties simple., i.e. /* blank */. We actually leave this one blank altogether and have found that the best results are often keeping things simple.
How the code should appear in your CSS file. .MainMenu_SubMenuItemActive { /* (not a DNN default) - CSSNodeSelectedSub - submenuitemactivecssclass */ /* blank, we recommend ignoring this one altogether, remember good code is keeping it simple */ }
.MainMenu_SubMenuItemActive { /* (not a DNN default) - CSSNodeSelectedSub - submenuitemactivecssclass */ /* blank, we recommend ignoring this one altogether, remember good code is keeping it simple */ }