Websites are increasingly providing fly-out menus for navigation, along with other navigational system. The main reason for this is to reduce page clutter and to give user a well organized website. These menus are those which expand based on user interaction, such as pointing a mouse. The system consists of Main or Root menus, sub-menus and Items.

The preferred way to create dynamic menu (fly-out menu) is by using a HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). User can create unordered and nested menus in HTML and at the same time, CSS can be used to format sub-menus and items as well as for selective hiding/showing of the same. The downside of this approach is that if CSS is not enabled in the client browser, all menus will appear in the form of a nested list.

Another approach to creating the dynamic menu is purely using pure CSS. This can be accomplished using: hover property but works only if the browsers are capable of supporting CSS2. The menu can be made to dynamically populate sub-menu and/or item through nested lists. However, if the browsers are not capable of supporting CSS2, Javascripts may have to be used to achieve the desired results. The disadvantage of using Javascripts is that the users need to enable them in order to view the website properly.

There are also other methods available to create fly-out menus.  For example, PHP and MySQL can be used along with HTML for the purpose. However, the methods discussed earlier are the ones most widely used.

The convenience of using fly-out menus is a hot topic among web developers. Even though these provide a convenient way to present clutter free website, major challenges are still unresolved. Common challenges include users without mouse, such as screen readers, tablet PC and Smartphone users. Old browsers also pose considerable difficulty in implementing these types of web navigation systems. Another major issue is browsers not supporting Javascripts and/or users disabling them due to security concerns. Hence, advantages of dynamic web navigation system need to be carefully considered before implementation.

You might also like…

PROCESAMIENTO AJAX EN SCRIPTCASE

Ajax en los formularios de Scriptcase puede usarse para recargar un campo de tipo de select basado e...

IMPORTAR IMAGENES DE LA BASE DE DATOS Y UTILIZAR CLASES DE BOOSTRAP

Como muchas personas ya saben, Bootstrap es una biblioteca de front-end libre y de código abierto p...

TENDENCIAS DE DESARROLLO WEB PARA 2017

Usted verá en este post tendencias para 2017 en Diseño Web, en el medio digital y en el desarrollo...

Comment this post

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.