Using “Navigation Button” Menu

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(180) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Wednesday, November 7, 2012PrintSubscribe
Using “Navigation Button” Menu

Web applications may have a large number of pages. Traditional approach is to list the top level pages as menu options on every page.

Here is an example of Adventure Works web app based on the sample database with 91 tables and views. The menu presentation is “Standard Multi-Level”.  The menu option Products / Product / Product Review is selected in the screenshot.

Adventure Works sample with 'Standard Multi-Level' navigation menu created with Code On Time web application generator

The page user interface can be simplified by changing the menu presentation style to “Navigation Button”.

Select the project name on the start page of the application generator, choose Settings, and proceed to Layout.

Select “Navigation Button” as menu presentation style, click Finish, and generate the application.

Notice that the menu bar with top-level options has disappeared from the user interface of the page. There is also and “drop” arrow next to the application name in the page header.

Adventure Works sample with 'Navigation Button' menu created with Code On Time web application generator. The button in the page header is not active.

Move a mouse pointer over the application name and hover over menu options to select another page.

Adventure Works sample with 'Navigation Button' menu created with Code On Time web application generator. The button has been activated to select another page.

The site menu with “Navigation Button” style offers a minimalistic presentation even for the most complex navigation systems.