Lesson 11: .MainMenu_SubMenuItemBreadcrumb
.MainMenu_SubMenuItemBreadcrumb - Description
This additional style class is used by DotNetNuke to style the sub menu that is related to the breadcrumb, hence the name 'Main Menu, Sub Menu Item Breadcrumb'.
This CSS class is not found in default.css file, therefore, there is no original code for it.
.MainMenu_SubMenuItemBreadcrumb - Example
To help us understand the DonNetNuke CSS Class .MainMenu_SubMenuItemBreadcrumb better and the part of the menu that is affected. We will insert the following demonstration code border: solid 4px wheat; background-color: lightblue; height: 30px;. This demonstration code will display solid borders with a border color of 'green' and a weight of '4px', and background-color of 'blue' with a height of 30px.
Below you can view the demonstration .MainMenu_SubMenuItemBreadcrumb CSS code as it appears in the skin.css file used in the DNN_Gray Skin and images demonstrating what the demonstration code does to the Solpart Menu. Click on the images to view a live interactive demonstration of the CSS code in action with your own eyes.
The skin.css demonstration code:
.MainMenu_SubMenuItemBreadcrumb { border: wheat 4px solid; background-color: lightblue; height: 30px; }
This image shows you the .MainMenu_SubMenuItemBreadcrumb 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 menu, 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_SubMenuItemBreadcrumb CSS Class with a yellow background for the Sub Menu Item Breadcrumb. This helps to demonstrate the continuous change that is slowly taking place to the Main Menu.
.MainMenu_SubMenuItemBreadcrumb - Tips & Tricks
Learn about the most common practices used in the DotNetNuke Solpart Menu Main Menu Sub Menu Item Breadcrumb 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 Breadcrumb or Main Menu Sub Menu Item Breadcrumb CSS Classes.
How the code should appear in your CSS file. .MainMenu_RootMenuItemBreadcrumb { /* blank, refers to rootmenuitemselected */ } .MainMenu_SubMenuItemBreadcrumb { /* blank, refers to submenuitemselected */ }
How the code should appear in your CSS file.
.MainMenu_RootMenuItemBreadcrumb { /* blank, refers to rootmenuitemselected */ } .MainMenu_SubMenuItemBreadcrumb { /* blank, refers to submenuitemselected */ }
.MainMenu_SubMenuItemBreadcrumb - Suggestions
Learn about the most common practices used in the DotNetNuke Solpart Menu, Main Menu, Sub Menu Item Breadcrumb CSS Class. Click on the suggestions below to find out more.
Horizontal & Vertical Solpart Menu Property Suggestions - For the Default .MainMenu_SubMenuItemBreadCrumb 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 Breadcrumb 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_SubMenuItemBreadCrumb { /* (not a DNN default) - CSSBreadCrumbSub - submenuitembreadcrumbcssclass */ /* blank, we recommend ignoring this one altogether, remember good code is keeping it simple */ }
.MainMenu_SubMenuItemBreadCrumb { /* (not a DNN default) - CSSBreadCrumbSub - submenuitembreadcrumbcssclass */ /* blank, we recommend ignoring this one altogether, remember good code is keeping it simple */ }