Forums Archive Index > SmartMenus 5 > text-based navigation, HTML dropdown lists, table-like menus
Date: 7 Jun 2005 9:53 am
Hi,
We're very happy users of this menu script, having used it for several of our sites. We plan to use it on another site we're developing but are facing some problems in the implementation:
1. So far we've used the script on image-based navigation panels with image rollovers. We now need to use the script on a text-based navigation panel. How do we implement the script on text links as you've done on your site?
2. The menus get hidden under HTML dropdown list/menu elements on the page. Is there any way we can avoid this problem? I've seen this problem being avoided on other menu scripts.
3. On one of the menus, we will need to allow users to choose letters of the English alphabet (A, B, C, etc.). For this, we want to display the alphabet in a table-like structure with multiple columns and rows, with each cell containing a letter that will be linked. Is there any way this can be achieved?
Do let me know at the earliest. We have a really tight deadline.
Thanks and regards,
Chirag Kasbekar
TIC, India
Date: 7 Jun 2005 4:12 pm
Chirag wrote:
1. So far we've used the script on image-based navigation panels with image rollovers. We now need to use the script on a text-based navigation panel. How do we implement the script on text links as you've done on your site?
Well, it is really simple. Let's say you have the "sample_menu" menu defined. You can show it by a text link by setting the link like this:
<a href="some_link_may_be_placed_here" onmouseover="s_show('sample_menu',event)" onmouseout="s_hide()">Show the sample menu</a>
For more details please take a look at the "How to use the menus" section in the manual.
Chirag wrote:
2. The menus get hidden under HTML dropdown list/menu elements on the page. Is there any way we can avoid this problem? I've seen this problem being avoided on other menu scripts.
To enable the workaround feature in the SmartMenus for this problem just set s_hideSELECTsInIE=true at the EXTRAS section in your configuration file (s_arrays.js).
Chirag wrote:
3. On one of the menus, we will need to allow users to choose letters of the English alphabet (A, B, C, etc.). For this, we want to display the alphabet in a table-like structure with multiple columns and rows, with each cell containing a letter that will be linked. Is there any way this can be achieved?
You can use a special non-active menu item and add a custom HTML in it (a table in your case). Such item must have the DISABLED:true menu item property set. For instance, take a look at this menu (just copy/paste the code into the s_arrays.js file in the Basic Example folder to see how it looks like):
s_add(
{N:'sample',LV:1,MinW:130,T:40,L:30,P:true,S:s_CSSTop},
[
{DISABLED:true,U:'',Padding:0,T:'<table cellpadding="1" cellspacing="0" border="1"><tr><td><a href="http://www.smartmenus.org/">A</a></td><td>Letter A</td></tr><tr><td><a href="http://www.smartmenus.org/">B</a></td><td>Letter B</td></tr><tr><td><a href="http://www.smartmenus.org/">C</a></td><td>Letter C</td></tr><tr><td><a href="http://www.smartmenus.org/">D</a></td><td>Letter D</td></tr><tr><td><a href="http://www.smartmenus.org/">E</a></td><td>Letter E</td></tr><tr><td colspan="2">and so on...</td></tr></table>'}
]
);
You can add whatever HTML you like in such disabled menu item.
Date: 9 Jun 2005 1:01 am
Thanks, Vasil. As I've already told you, we've come to expect and appreciate prompt and useful service from you.
What you suggested works, and in fact we had tried some of these methods before, but we still have some issues:
1. When the menus are applied to text links in the way you suggested, they no longer seem to take relative positions, which causes alignment problems when screen resolutions are changed.
2. The 'workaround' feature you suggested using to hide dropdown lists/menus that are overlapping with the menus hides all the dropdown menus on the page -- even those that aren't overlapping with the DHTML menus. Is there any way of avoiding this problem so that only those HTML dropdowns disappear that appear on top of the DHTML menus?
Do let me know as soon as possible.
Thanks and regards,
Chirag Kasbekar, India
Date: 9 Jun 2005 4:13 am
Chirag wrote:
1. When the menus are applied to text links in the way you suggested, they no longer seem to take relative positions, which causes alignment problems when screen resolutions are changed.
Well, you can still use an image on your page to relatively position the menus. Or there is another trick- to use a special function for relative positioning which returns the position of the element that shows the menu (e.g. the text link in your case). But I think it's better to take a look by myself- I suppose I will be able to configure you menus in the best possible way. Please send me a small example ZIP and I will configure it ASAP.
Chirag wrote:
2. The 'workaround' feature you suggested using to hide dropdown lists/menus that are overlapping with the menus hides all the dropdown menus on the page -- even those that aren't overlapping with the DHTML menus. Is there any way of avoiding this problem so that only those HTML dropdowns disappear that appear on top of the DHTML menus?
If you are using SmartMenus v5.2 (or earlier) the effect you have described happens with all IE versions. But in v5.5 this feature is greatly improved and in IE 5.5+ the select boxes are elegantly overlapped by the menus. The select boxes will be hidden only in IE 5.0 which is very rarely used nowadays. So please upgrade to SmartMenus v5.5 and you will notice the difference. To upgrade to v5.5 you will not have to change your configuration file (s_arrays.js) at all- just replace the script files..
Date: 10 Jun 2005 1:23 am
Thanks Vasil, the script you sent me seems to work perfectly well. Keep up the good work!
Will get back to you if there are any further issues.