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 just experimenting with your window and I must say that I am really so impressed with it.I am currently using teleik window but after I tried yours , I made my mind to move towards yours, what I really like about your components is the really simple API and it is light on browser, I made some tests comparing window to ... one and I must say your outtakes ..."

Ferasman

Random testimonial   All testimonials