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

"Thank you again for your continued support."

Marvin Haiman
The Metropolitan Police Department

Random testimonial   All testimonials