ASP.NET Slide Menu Tutorial - Styles (Advanced)



Slide Menu has several properties to customize styles:
  • CSSPath - Path to CSS file.

  • CSSParent
  • CSSParentOver
  • CSSParentSelected

  • CSSChild
  • CSSChildOver
  • CSSChildSelected

  • CSSMenu
  • CSSChildrenBox

It is not necessary to set CSSPath property if your menu styles are directly on the page or in some common CSS file.
SlideMenu structure
This sample menu was built using the following ASP.NET code and the following CSS file.

Download Slide Menu for all examples source code and styles.
ASP.NET
<osm:SlideMenu runat="server" id="tutStyles" CSSPath = "tutorials/styles.css" CSSParent = "SMParent" CSSParentOver = "SMParentOver" CSSParentSelected = "SMParentSelected" CSSChild = "SMChild" CSSChildOver = "SMChildOver" CSSChildSelected = "SMChildSelected" CSSMenu = "SMMenu" CSSChildrenBox = "SMChildrenBox" Height = 70 SelectedId = c13 > <menuitems> <osm:Parent id="p1">Parent 1</osm:Parent> <osm:Child id="c11">Child 1</osm:Child> <osm:Child id="c12">Child 2</osm:Child> <osm:Child id="c13">Child 3</osm:Child> <osm:Child id="c14">Child 4</osm:Child> <osm:Parent id="p2">Parent 2</osm:Parent> <osm:Child id="c21">Child 1</osm:Child> <osm:Child id="c22">Child 2</osm:Child> <osm:Child id="c23">Child 3</osm:Child> <osm:Child id="c24">Child 4</osm:Child> </menuitems> </osm:SlideMenu>
CSS
.SMParent { background-color: gold; color: navy; font: 12px Arial; } .SMParentOver { background-color: crimson; color: white; font: 12px Arial; } .SMParentSelected { background-color: navy; color: white; font: 12px Arial; } .SMChild { font: 11px Arial; background-color: white; padding-left: 10px; } .SMChildOver { font: 11px Arial; background-color: blue; color: white; padding-left: 10px; } .SMChildSelected { font: 11px Arial; background-color: yellow; padding-left: 10px; } .SMMenu { width: 180px; background-color: #eeeeee; padding: 4px; border: 1px solid gray; } .SMChildrenBox { background-color: gray; }

"I have evaluated components from many of your competitors, and am impressed with how easy your controls are to use in comparison. I was able to get them up and running in a fraction of the time."

Lloyd, Douglas E
GE Healthcare

Random testimonial   All testimonials