Getting Started with the JavaScript Menu
- Getting Started
- Setting Up ASP.NET Core MVC
- Accessibility
- Chart
- ASP.NET
- Overview
- Getting Started
- Design-time Support
- ItemTypes
- Chart Elements
- Chart Types
- Area Chart
- Bar Chart
- Bubble Chart
- Line Chart
- Pie Chart
- Sparklines
- Donut Chart
- Scatter Chart
- Spline Chart
- SplineArea Chart
- RangeArea Chart
- RangeBar Chart
- RangeSpline Chart
- StepLine Chart
- StepArea Chart
- PolarLine Chart
- PolarArea Chart
- PolarBar Chart
- PolarSpline Chart
- PolarSplineArea Chart
- PolarScatter Chart
- Combining Chart Types
- Data Binding
- Exporting
- Localization
- Selection
- Zooming and Panning
- Appearance and Styling
- Server Side Events
- Client Events
- Supported Browsers
- ASP.NET Core
- ASP.NET MVC
- JAVA Apache Wicket
- API
- allowUTCFormatting
- applyAnimation
- axisX
- axisTickText
- axisType
- categoricalValues
- decimalTicks
- drawColor
- drawWidth
- endOffset
- fixedEnd
- inverseOrder
- max
- min
- minorPlotStripColor
- minorPlotStripDashStyle
- minorPlotStripWidth
- minorTicksColor
- minorTicksHeight
- minorTicksRepeat
- minorTicksWidth
- offset
- plotBands
- plotLines
- plotStripColor
- plotStripDashStyle
- plotStripWidth
- startOffset
- swapLocation
- ticksColor
- ticksHeight
- ticksPlacement
- ticksRepeat
- ticksWidth
- title
- axisY
- axisTickText
- axisType
- decimalTicks
- drawColor
- drawWidth
- endOffset
- fixedEnd
- inverseOrder
- max
- min
- minorPlotStripColor
- minorPlotStripDashStyle
- minorPlotStripWidth
- minorTicksColor
- minorTicksHeight
- minorTicksRepeat
- minorTicksWidth
- offset
- plotBands
- plotLines
- plotStripColor
- plotStripDashStyle
- plotStripWidth
- startOffset
- swapLocation
- ticksColor
- ticksHeight
- ticksPlacement
- ticksRepeat
- ticksWidth
- title
- backgroundColor
- borderColor
- borderRadius
- borderWidth
- chartAreaBackgroundColor
- chartAreaBackgroundImage
- chartAreaBorderColor
- chartAreaBorderWidth
- chartAreaPaddingBottom
- chartAreaPaddingLeft
- chartAreaPaddingRight
- chartAreaPaddingTop
- chartLegend
- dataSeries
- enableAutoFit
- events
- exportOptions
- height
- isInverted
- margin
- primaryHeader
- secondaryHeader
- seriesPalette
- seriesSettings
- area
- bar
- bubble
- donut
- line
- pie
- polararea
- polarbar
- polarline
- polarscatter
- polarspline
- polarsplinearea
- rangearea
- rangebar
- rangesplinearea
- scatter
- spline
- splinearea
- steparea
- stepline
- seriesType
- theme
- tooltipSettings
- width
- zoomMode
- Getting Started
- Events
- How-To
- Methods
- Styling
- Supported Browsers
- ASP.NET
- Barcode
- QR Code
- TagCloud
- TreeMap
- Grid
- ASP.NET
- ASP.NET Core
- ASP.NET MVC
- JAVA Apache Wicket
- JavaScript
- API
- Settings
- altRowTemplate
- altRows
- columnReorder
- columns
- dataSource
- detailCollapseCssClass
- detailCollapseText
- detailExpandCollapse
- detailExpandCssClass
- detailExpandText
- detailTemplate
- editing
- exportOptions
- filtering
- grouping
- height
- maxHeight
- noRecordsTemplate
- noRecordsText
- paging
- resizing
- rowHover
- rowTemplate
- scrolling
- selection
- showHeader
- sorting
- toolbar
- Events
- Properties
- Methods
- addRow
- cancelEditing
- clearSelection
- collapseRow
- dataItem
- deleteRow
- destroy
- editCell
- editRow
- expandRow
- exportCsv
- exportExcel
- exportPdf
- filter
- hideColumn
- insertRow
- isHidden
- isLocked
- lockColumn
- page
- pageSize
- refresh
- reorderColumn
- revertChanges
- saveChanges
- scrollTop
- select
- selectedRowIndices
- showColumn
- sort
- ungroup
- unlockColumn
- Settings
- Getting Started
- Autogenerated Editors
- Binding to Data
- Cancel User Iteraction
- Change Options Dynamically
- Columns
- Custom Editors
- Exporting
- Filtering
- Footer Total Aggregates
- Grouping
- Hierarchy
- Paging
- RTL
- Scrolling
- Selection
- Sorting
- Templates
- Themes
- Validation
- API
- Accordion
- AutoComplete
- Button
- Calendar
- CheckBox
- ColorPicker
- ComboBox
- ContextMenu
- DataSource
- DatePicker
- DateTimePicker
- Draggable
- DropDown
- Droppable
- Editor
- ListBox
- LoadingPanel
- MaskedTextBox
- Menu
- MonthYearPicker
- NumericTextBox
- Pager
- ProgressBar
- RadioButton
- Rating
- RecursiveDataSource
- Slider
- SplitButton
- Splitter
- Switch
- Tabs
- TextBox
- TimePicker
- Timeline
- Tooltip
- TreeView
- Upload
- Window
The Menu widget allows you to choose one of many possible options. The underling element from which the widget is initialized can be a UL or DIV element. In order to render the component on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add a UL or DIV element to render the widget.
3. Initialize the widget.
<!DOCTYPE html> <html> <head> <title>Shield DropDown</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/light/all.min.css" /> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/shieldui-all.min.js" type="text/javascript"></script> </head> <body> <ul id="menu1"> <li data-href="#file"> <div>File</div> <ul> <li><a href="#xxx">Open</a></li> <li><a href="#yyy">Save</a></li> <li><a href="#zzz">Exit</a></li> </ul> </li> <li data-role="separator"></li> <li> <a href="#edit">Edit</a> <ul> <li href="#copy">Copy</li> <li data-class="css-class">Paste</li> <li>Cut</li> </ul> </li> <li disabled="disabled"> <div>Disabled Item</div> <ul> <li>Disabled 1</li> <li>Disabled 2</li> <li>Disabled 3</li> </ul> </li> <li data-icon-url="computer.png"> <div>Mega Menu</div> <ul> <li data-class="customcls"> <div style="width:400px;"> <p><a href="/">Shield UI Ltd.</a></p> <p><a href="/">Monsters, Inc.</a></p> <p>One paragraph</p> <p>Another paragraph</p> </div> </li> </ul> </li> <li data-icon-cls="xxx-icon-cls" data-class="right" data-href="#admin"> <div>Admin</div> <ul> <li>Login</li> <li>Register</li> <li>Help</li> </ul> </li> </ul> <script type="text/javascript"> $("#menu1").shieldMenu({ cls: "topmenu", events: { click: function(e) { console.log(e.item); console.log(e.element); } } }); </script> </body> </html>
To see an example of the control in action, along with all the required code, please refer to the following example.