Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Pattern: Fly-out Menu

From Wiki
Jump to: navigation, search
croozeus (Talk | contribs)
(New page: Category:Mobile_Design Category:Mobile_Design_Patterns This design pattern is part of the Mobile Design Patterns series. ==Description== A ...)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.2 -->
[[Category:Mobile_Design_Patterns]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090511
 +
|author= [[User:Croozeus]]
 +
}}
 +
 
 +
[[Category:Mobile Design Patterns]]
  
  
Line 20: Line 42:
 
This component of web design may be used on websites the end user has more navigation but limited screen space. A fly-out menu may be used to reduce the screen space occupied by the navigation bar/column. The fly out menu can be accomplished in a horizontal or vertical navigation bar, as shown in screenshots, respectively.  
 
This component of web design may be used on websites the end user has more navigation but limited screen space. A fly-out menu may be used to reduce the screen space occupied by the navigation bar/column. The fly out menu can be accomplished in a horizontal or vertical navigation bar, as shown in screenshots, respectively.  
  
[[Image:Flyout1.jpg|500x540px]]
+
[[File:Flyout1.jpg|500x540px]]
  
 
In the above screenshot, the website has many navigation options and hence using fly-out menus is a good idea here.
 
In the above screenshot, the website has many navigation options and hence using fly-out menus is a good idea here.
Line 29: Line 51:
 
The fly-out menu works or appears when a mouse over event occurs. The fly-out menu may appear in the up or down direction. If the Menu bar is vertical the fly-out appear or pop-up sideways.
 
The fly-out menu works or appears when a mouse over event occurs. The fly-out menu may appear in the up or down direction. If the Menu bar is vertical the fly-out appear or pop-up sideways.
  
[[Image:Screenshot0038.jpg]]
+
[[File:Screenshot0038.jpg]]
  
 
==Exceptions==
 
==Exceptions==
Line 35: Line 57:
 
Pure fly-out menus may not be possible in devices accepting tactile input like S60 5th Edition devices like Nokia 5800 Xpress Music and Maemo internet tablets like Nokia N810. However, an adaptation of the fly-out menu - click able fly-out menus may be implemented in such devices.
 
Pure fly-out menus may not be possible in devices accepting tactile input like S60 5th Edition devices like Nokia 5800 Xpress Music and Maemo internet tablets like Nokia N810. However, an adaptation of the fly-out menu - click able fly-out menus may be implemented in such devices.
  
[[Image:Flyout.png|550x320px]]
+
[[File:Flyout.png|550x320px]]
[[Image:Flyout1.png|550x320px]]
+
[[File:Flyout1.png|550x320px]]
  
 
==Design Tips==
 
==Design Tips==
Line 47: Line 69:
  
 
--Submitted by [[User:Croozeus|Croozeus]] 01:18, 12 May 2009 (EEST)
 
--Submitted by [[User:Croozeus|Croozeus]] 01:18, 12 May 2009 (EEST)
 +
 +
* [[User:Croozeus#Articles on Mobile Design| See more articles on Mobile Design by Croozeus]]

Latest revision as of 03:26, 9 May 2012

Article Metadata
Article
Created: croozeus (11 May 2009)
Last edited: hamishwillee (09 May 2012)


This design pattern is part of the Mobile Design Patterns series.

Contents

[edit] Description

A list of clickable links or sub menu that appears when focus is on a particular menu item is known as a fly-out menu.

[edit] Advantage

  • Saves screen space for better utilization.

[edit] Disadvantage

  • Prima facie, fly-out menus have a drawback to hide the navigation options from the website audience and should be judged to be used appropriately.

[edit] Use when

This component of web design may be used on websites the end user has more navigation but limited screen space. A fly-out menu may be used to reduce the screen space occupied by the navigation bar/column. The fly out menu can be accomplished in a horizontal or vertical navigation bar, as shown in screenshots, respectively.

Flyout1.jpg

In the above screenshot, the website has many navigation options and hence using fly-out menus is a good idea here.


[edit] Use how

The fly-out menu works or appears when a mouse over event occurs. The fly-out menu may appear in the up or down direction. If the Menu bar is vertical the fly-out appear or pop-up sideways.

Screenshot0038.jpg

[edit] Exceptions

Pure fly-out menus may not be possible in devices accepting tactile input like S60 5th Edition devices like Nokia 5800 Xpress Music and Maemo internet tablets like Nokia N810. However, an adaptation of the fly-out menu - click able fly-out menus may be implemented in such devices.

Flyout.png Flyout1.png

[edit] Design Tips

  • The delay between the mouse over event and fly-out menu appear event should be kept minimum.
  • A potential problem encountered with fly-out menus is "sticking". To avoid this problem the fly-out menu should disappear as soon as the mouse over event is over. In other words, the user should be able to see the screen under the fly-out menu immediately as the mouse pointer leaves the button.



--Submitted by croozeus 01:18, 12 May 2009 (EEST)

  • croozeus
This page was last modified on 9 May 2012, at 03:26.
86 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×