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; }

"It is amazing how you guys have the tools that suits our needs to the "T" and I'm really glad to see that these tools are compatible with 3.5 as we would be moving there shortly."

Ramarao Prahalad
Texas Association of School Boards

Random testimonial   All testimonials