Creating a vertical drop-down menu using CSS styles |
|||||
Creating a vertical drop-down menu using CSS styles |
|
||
This topic shows an example of how the CMSListMenu control can render a vertical drop‑down menu. If you wish to create this example for yourself, please follow the tutorial in the Getting started topic, then continue with the following steps:
1. Set the HoverCSSClassName property value to: Vertical
The code of the CMSListMenu control should look like this:
<cms:CMSListMenu ID="CMSListMenu1" runat="server" HoverCSSClassName="Vertical" /> |
2. Add the following style definitions inside the <head> element:
<style type="text/css" media="screen">
/* Vertical menu class definitions*/ .Vertical { BORDER-RIGHT: #c2c2c2 1px solid; BORDER-TOP: #c2c2c2 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #c2c2c2 1px solid; WIDTH: 150px; BORDER-BOTTOM: #c2c2c2 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #e2e2e2 } .Vertical UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } .Vertical LI { POSITION: relative; FLOAT: left; WIDTH: 100% } .Vertical A { PADDING-RIGHT: 0px; BACKGROUND-POSITION: 0px 50%; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 140px; COLOR: black; PADDING-TOP: 2px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #e2e2e2; TEXT-DECORATION: none } .Vertical A:hover { BACKGROUND: #808080 no-repeat 0px 50%; COLOR: white } .Vertical UL UL { BORDER-RIGHT: #c2c2c2 1px solid; BORDER-TOP: #c2c2c2 1px solid; Z-INDEX: 100; LEFT: 100%; BORDER-LEFT: #c2c2c2 1px solid; WIDTH: 100%; BORDER-BOTTOM: #c2c2c2 1px solid; POSITION: absolute; TOP: -1px } #Vertical1 UL { DISPLAY: none } #Vertical1 LI:hover UL UL { DISPLAY: none } #Vertical1 UL LI:hover UL UL { DISPLAY: none } #Vertical1 LI:hover UL { DISPLAY: block } #Vertical1 UL LI:hover UL { DISPLAY: block } #Vertical1 UL UL LI:hover UL { DISPLAY: block }
</style> |
This modifies the CSS style of the menu so that it displays a vertical drop‑down menu.
The classes are defined in the <head> element only for this quick example, if you wish to use the control on a Kentico CMS website, it is recommended to define these classes in the stylesheet used by the website or specific page via the administration interface in Site Manager -> Development -> CSS stylesheets.
3. Save the changes to the web form. Now right-click it in the Solution explorer and select View in Browser. The resulting page should display a menu like this: