next »

[banzai]

a very simple template using orizontal dropmenu with the nice script suckerfish
http://www.htmldog.com/articles/suckerfish/dropdowns/.

tested only on windows pc with Firefox,Opera and IE



preview link:
http://www.tattoocms.it/templates/step.html

Install:

1)upload assets folder in your MODx root
2)copy step-template.html in a new template
3)copy rightnews-chunk.txt in a new chunk and call it rightnews.

NOTE: If you have any kind of issue with show and hide search div - Update your scriptaculous js.

**************************************
UPDATED version 1.1

[zi]

Nice template

I like the effect on menu hover

Thanks for sharing.

regards,

zi

[jedi156]

This is a cool template but, the menu has a bug.

If you click on a top level menu item that has sub items, then when you hover on the same menu item there is a space between it and the sub items so you cant mouse down to them.

Thanks for all the cool templates.

[Dr. Scotty Delicious]

That is a DAMN fine template Banzai !  You are a tremendous resource to the MODx community.  thank you.

-sD-

[banzai]

This is a cool template but, the menu has a bug.

If you click on a top level menu item that has sub items, then when you hover on the same menu item there is a space between it and the sub items so you cant mouse down to them.

Thanks for all the cool templates.

very strange, i know this issue, but I believed to have resolved this problem.
Everything works fine, for me, with IE Opera and Firefox on 3 windows pc (xp sp1 and sp2), what kind of browser/os do you have?

thanks

[banzai]

That is a DAMN fine template Banzai !  You are a tremendous resource to the MODx community.  thank you.

-sD-

Thanks Scotty

[sottwell]

The dropdowns collapse as soon as you move the mouse off the top menu item. This is in FF 1.5.0.2/Mac and Safari. It looks as if there is a very narrow gap; sometimes they work if you move the mouse down really fast.

[jedi156]

I only use FF 1.5.0.2/XP sp2, but the problem is there with IE 6 too. Its only when a top menu item is in the here class. I did get it to work once, guess my mouse is not as fast as it once was

[banzai]

The dropdowns collapse as soon as you move the mouse off the top menu item. This is in FF 1.5.0.2/Mac and Safari. It looks as if there is a very narrow gap; sometimes they work if you move the mouse down really fast.

Thanks Susan , do you have this issue only for here class, like jedi??

I really need to buy a new mac (my old g4 is dead )

[Starbuck]

That's weird, I checked on Mac Panther Safari 1.3 and FF 1.0.7 - I see the gap possibly caused by padding that you can take out and use line-height for alignment instead, Safari is rendering some of the transparency incorrectly. But, for both the pop/drop works fine

[chris#]

Hello all,
 This is a really nice template.
I have found a couple of issues with it though.

1) the drop-down menu does not permit any selection of the items contained in it.
That is to say; when moving the mouse cursor down to any of the menu items,
the menu retracts to it's unactive state.
2) the search button is located over top of the search field. rendering it useless.

I notice others have indicated similar issues. Has development of this template ended?

Thank you for all your time and consideration.

P.S. I'm viewing this in Firefox (latest version).
Interesting that it seems to work just fine on the (your) templates page.

--Chris

[banzai]

I'll try to fix this bug soon as possible, but i can't see this bug with 3 pc with SP1 & sp2 using IE6, Firefox1.5, Netscape6 and Opera ... .
Actually i don't have a mac to test - i've tried to test Safari menu with vnc (http://www.snugtech.com/blog/) but still works for me

[jedi156]

You will not see the bug on your site because all of the top level menu items go to pages that use a another template.
You can see it on a default data or demo data or what ever its call during the install when you click on Quickstart Guide then mouse over Quickstart Guide then try to mouse down to the second level menu items. Not sure if I am explaining that well
I think its is because dropmenu's output before you click on the link is:
<li><a href="index.php?id=15" title="">Quickstart Guide</a>
Then after you click on it its:
<li class="here">Quickstart Guide

I realy hope you can get this fixed, so I can learn from you as I have similar problems with any drop down or fly out menus I try to get working with dropmenu.
Thanks

[davidm]

Bug aside, great template Banzai !

I join Scotty's praise about your work
Really, I don't know how do you find the time to do all this !!!

[chris#]

Hello,
 I haven't yet (no time) been able to completely debug all the issues with the dropdown
menu provided with this theme. But I did discover one problem. It seems that
the code provided in the archive contains the HTML entities of the operators;
as opposed to the acutal operators. That is to say; the & operator is
expressed as &amp;. The same is true for the ! operator, which is replaced
by the left or right bracket ([ or ] respectively). Thank you again for all your hard
work and this great template. I'm quite sure that the anomolies
associated with it will be easily overcome given adequate time.

P.S. I am aware that the FCKedit editor that comes with MODx corrupts code
and have it off by default.

FWIW I'm running this server on UNIX (FreeBSD) with Apache and PHP 4.4.2 and the
latest (most recent) version of MODx and have had no trouble running some very
complex DHTML/ Javascript and other PHP.

Thanks again.

Sincerely,
 Chris

[kickass]

GREAT template! Now I can figure out why your suckerfish work and mine don't!

oh, but I did spot an "oops". Down at the very bottom of your stylesheet you didn't complete the commented backslash hack to hide stuff from IEMac. It should read like this:

Code:

/* hide from IE mac \*/
#nav li {width:auto}
        /* end hack */

See http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html for more info.

[banzai]

Thanks a lot, kickass!! ...i'm very busy these day ....thanks for the help

[whitehat]

Thanks a lot, kickass!! ...i'm very busy these day ....thanks for the help

hi banzai,

I wondered if you solved the DropDown Bug, thats when you hover and try to go to the sublinks they dissapear.
 The template is very nice thought..

And another thing, the dropdown does not hover or shof anything on Firefox!!!

Cheers,
WhiteHat

[whitehat]

Thanks a lot, kickass!! ...i'm very busy these day ....thanks for the help

I solved my dropdown problem and in my case the problem was the flash banner under the DropDown Menu. As soon as I moved the Drop Down Under or on top of the banner of course after i set the parameter wmode of the flash banner to

Code:

<param name="wmode" value="transparent"/>

and changed some minor things in CSS  the menu started working just fine.
One other issue is the z-index of CSS (be carefull there 2).

Anyway I'm sending you also the modified css..

Hope it helps

Cheers,
WhiteHat

Code:

/* NAV - Son of Suckerfish Dropdowns http://www.htmldog.com/articles/suckerfish/dropdowns/ */

#nav, #nav ul {padding: 0;margin: 0;list-style: none}
#nav {background: #999 url("imgs/button_dn.gif") repeat-x;font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 0px 0 0px}
#nav li {position:relative;background: #999 url("imgs/button_dn.gif") repeat-x;float: left;width: auto;display:block;margin: 0;border-bottom: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;padding:0}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {border-bottom: none;text-decoration:none;cursor:pointer;color:#999;display: block;padding: 4px 10px 2px}
#nav a:hover {background: #999 url("imgs/button_up.gif") repeat-x;color:#81A021}

#nav li ul {border-bottom: 1px solid #999;border-left: 1px solid #999;border-right: 1px solid #999;background: #f6f6f6;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
-khtml-opacity:0.8;
width:11em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em;}

#nav li:hover ul, #nav li.sfhover ul {top:19px;left: 0;z-index:99999}
#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
#nav li li.last {border-bottom:none}
#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {
color:#000;
border-bottom: none;
padding: 3px 10px 2px;
width:11em}
#nav li li a:hover {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}

#nav li.active {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
#nav li.active ul {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
#nav li.active a:hover {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
#nav li.here {color:#000000;background:#F3F9E1 url("imgs/bgcloser.jpg") repeat-x; height:25px; width:auto;}
#nav li li.here {color:#000;
background: #D2DEB0;
padding: 3px 10px 2px;
width:11em;
}

#nav li.active li {border:none;border-top: 1px solid #EFEFEF}
#nav li.active li.last {border-bottom: none;}
#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
#nav li.active li a:hover {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}

#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}

/* hide from IE mac \*/
#nav li {width:auto}
/* commented backslash hack v2 \*/

[SoftDux]

Has anyone got a fix to the problem with the dropdown menu yet?


This is the only template with a workable dropdown menu that I could find, and would actually like to use it in my own template. Is that ok?