Likno Software Blog – DHTML Menus, Javascript Menus, Drop Down Menus

Hello everybody!

We just wanted to let you know that we have added a brand new music-related example within the AllWebMenus application which you can access *free*!

view it online

Enjoy!

Hey everybody!

We are happy to inform you that the latest version of AllWebMenus - v5.2 build #804 - has been released!

Check out the new features and fixes added in this version:

- New "SEO CSS Menu Addin": Create SEO friendly menus (dropdown menus or sliding menus) through "sitemap-based SEO" or "on-page SEO". read more

- Themes and Examples are now combined into a single form.

- Added a new example (mega drop-down menu) into the application.

- The interface now remembers the last selected tab in the "UL/LI structure" form.

- Fixed an issue (IE6 only) where the "Hide Fix" for hiding "select boxes" didn't work properly.

- Fixed an issue where if an image was used along with text in an item, the image did not properly align vertically.

- Fixed an issue where a warning appeared in firefox 3.5 regarding -moz-opacity css declaration.

- Fixed an issue with the "Auto Highlight" feature: a sliding submenu was not opening if its parent item was clicked (and page was changing).

- Fixed a menu positioning issue when the "UL/LI" option was used: the menu was not positioned correctly on its positioning element.

- Added support for the "onclick event" and "link target" on "UL/LI" menu structures.

You can download the latest version at
http://www.likno.com/download.html

Hello everybody,

We just wanted to inform you that we have released new Mega Menus examples.

If you go to our example page, you will be able to see 2 Mega Menu examples available, as well as download their project file.

The examples are simple variations of the vertical mega drop-down menus found at the foodnetwork.com and actionenvelope.com websites:

http://www.likno.com/examples.html?example=mega_dropdown_menu1

http://www.likno.com/examples.html?example=mega_dropdown_menu2

As Jakob Nielsen (the "king of usability") says in his article on mega drop-down menus usability, mega menus have the following characteristics:

• Big, two-dimensional panels divided into groups of navigation options
• Navigation choices structured through layout, typography, and (sometimes) icons
• Everything visible at once — no scrolling
• Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs.

How is this menu created?

• Each submenu is a single item
• This item uses the "HTML - Full Mode" option at its "Text" property
• Using full HTML you enter any content you like at the submenu item

Hello everybody!

Just wanted to inform you that we have released 3 new templates...

Take a look at:

AllWebMenus Template 113

AllWebMenus Template 114

AllWebMenus Template 115

You can view all available templates at http://www.likno.com/awmtemplates.php

Since AllWebMenus v5.1.764, your menus can use 3 different styles for their groups and 3 different styles for their items:

•••• Main Group Style ••••
(initially assigned to the Main Menu Group, i.e. 1st level group)

•••• Main Items Style ••••
(initially assigned to the items of the Main Menu Group, i.e. 1st level items)

•••• Sub Groups Style ••••
(initially assigned to the 1st submenus stemming from the Main Menu items, i.e. 2nd level groups)

•••• Sub Items Style ••••
(initially assigned to the 1st submenu items contained in the above submenus, i.e. 2nd level items)

•••• Sub Groups Style+ ••••
(initially assigned to the rest of submenus stemming from the above items, i.e. 3rd level groups and beyond)

•••• Sub Items Style+ ••••
(initially assigned to the rest of submenu items contained in the above submenus, i.e. 3rd level items and beyond)

This is how a menu would look if the <Background Color> and <Border> on every item or group had the above colors that demonstrate the initial style assignments:

Note: The above assignments are the initial ones. If you wish, you can later change the assignments as wish.




Why is the 3rd style (i.e. "Style+") useful?



1. You can use themes that have different appearance on 3rd-level submenus and beyond:

Themes that use this technique: Juice, Fading Purple, FlatSky, Orange Bubbles (free, contained in your AllWebMenus by default)
You may also find extra themes using this technique from Theme Pack 36 and above at: http://www.likno.com/awmthemes.php

For example, at theme "Olive Plastic" (Theme Pack 36), its 3rd-level items (and beyond) use less padding than its 2nd-level items:

At the SlideTreeXP sliding menu theme (Theme Pack 38, "Sliding Menu Add-in" required), the 3rd-level items do not use an icon, while the 2nd-level items do:

Such arrangements would not have been possible if all submenus had the same style.



2. You can apply very interesting behaviors to sliding menus (available through the extra "Sliding Menu Add-in"), that combine both "sliding" and "non-sliding" cascading submenus!

For example, the SlideSummer sliding menu theme below (Theme Pack 37, "Sliding Menu Add-in" required)) uses a sliding submenu for all its Main Menu items, while the rest of its submenus are the standard non-sliding ones. Such "sliding/non-sliding" menu combinations are very suitable in many website layouts and would not have been possible if all submenus had the same style.



3. The 3rd-level submenus can differ from the 2nd-level submenus by only a small but very important detail, that allows for a different design if the parent group is horizontal or vertical.

At the following examples the 2nd-level submenu does not have a "Header" (its <Has Header> property is set to "No"), while the 3rd-level submenu (and beyond) needs to have a "Header" so that the design closes properly at top:

At the following sliding menu themes (Theme Pack 38, "Sliding Menu Add-in" required) the 2nd-level submenus are different than the 3rd-level submenus, either in colors, images or indentation:

Different colors & indentation:

Different icons & indentation:

Different indentation: