Kentico CMS 7.0 Controls

Creating a vertical drop-down menu using CSS styles

Creating a vertical drop-down menu using CSS styles

 Previous topic Next topic Mail us feedback on this topic!  

Creating a vertical drop-down menu using CSS styles

 Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

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:

 

controls_clip0017