category flyout menu?

[jeremy moff]

How can I do a category fly out menu like the example menu at this web site?

http://babyfromheaven.com/content/un...-pregnancy.htm

Thanks

Jeremy

[lfreeman]

Re: category flyout menu?

You can either hardcode the category tree in or do a custom solution like this one:
http://www.itscheaperthantherapy.com/

[Biffy]

Re: category flyout menu?

No need to hard code the cat tree. Just add your CSS to the dynamic cat tree to accomplish pretty much any kind of flyout or dropdown menu you want. Google up CSS menus for a bewildering array of examples. If this is your first time doing this then I suggest using a cat tree module. You'll also need to understand some browser compatibility problems and CSS hacks to fix 'em.

If you do decide to hard code your links I strongly urge you to NOT use session IDs in the URLs.

[JFancett]

Re: category flyout menu?

I hardcoded ours. Our categories don't change a whole lot and when they do, I just update a file. I use the Milonic dhtml menu.

[jeremy moff]

Re: category flyout menu?

Linda,

What mod and css module did you use for itscheaperthantherapy.com?

thanks

Jeremy

[lfreeman]

Re: category flyout menu?

It was a combination of a customized cattree module and custom menu script.

[jeremy moff]

Re: category flyout menu?

I have gotten this far but am stuck on how to write the code in the sebenza cat tree module.

Here is an example of the flyout menu

http://www.langloispiano.com/miva-te.../popupmenu.htm

Here is my current cat tree menu code that has not been modified

<mvt:foreach iterator="tree" array="cattree">

   <mvt:if expr="g.Category_Code EQ l.settings:tree:code">

      <mvt:if expr="l.settings:tree:image">
        <div class="catimage"><img src="&mvt:tree:image;" border="0" alt="&mvt:tree:name;"><div><br>
      <mvt:else>
         <span class="catb"><a href="/c/&mvta:tree:code;/&mvta:tree:name;.html") class="catb">&mvt:tree:name;</a></span><br>
      </mvt:if>

   <mvt:else>

      <mvt:if expr="l.settings:tree:image">
         <a href="/c/&mvta:tree:code;/&mvta:tree:name;.html") class="catimage"><img src="&mvt:tree:image;" border="0" alt="&mvt:tree:name;"></a><br>      
   <mvt:else>
         <a href="/c/&mvta:tree:code;/&mvta:tree:name;.html") class="&mvt:tree:class;">&mvt:tree:name;</a><br>
      </mvt:if>

   </mvt:if>

</mvt:foreach>

[Biffy]

Re: category flyout menu?

<a href="/c/&mvta:tree:code;/&mvta:tree:name;.html") class="catimage"><img src="&mvt:tree:image;" border="0" alt="&mvt:tree:name;"></a>

First thing I see is a ")". I don't think that belongs in there, so you have a badly formed tag.

Second, you probably need to either div or span the CSS class. I know it's valid to do it like this, but Miva has a problem with it in the category tree for some unknown reason.

Third, the border attribute is not valid in either HTML 4.01 or XHTML. You need to CSS style the img tag border:0px;

Fourth, do you have a valid doctype declaration?

You can avoid a lot of problems by validating your code. Don't use the code in Miva, instead get the "generated source" from your web browser and validate that. You'll also want to validate your CSS stylesheets.

Google up "W3C Validator" to get the addresses.

Once you get valid code to work with, then you can do the CSS styling for a dropdown flyout menu. There's thousands of code examples on the web.

[jeremy moff]

Re: category flyout menu?

Steve,

Thanks for the catch on the bad tag.

As for validating a miva built store, is this possible? What doctype declarration do you suggest using?

I validate my non - miva sites with the Firefox web tool kit extension uses the "W3C Validator". I have not gotten that far with the new cat menu that I am trying to do.

My real question is how to write the cattree template code so it will output the correct code to work with the popup menu.

Thanks

Jeremy

[Biffy]

Re: category flyout menu?

You can validate with HTML 4.01 Strict with one exception - the dynamic URLs will throw errors. You can safely ignore these. Just get everything else to validate.

You can get close with XHTML 1.0 Strict but you'll get an error on your <br /> and <hr /> tags because Miva munges them. They still seem to work in the browsers but I don't trust it to stay in Strict mode, some browsers might switch to Quirks mode.

My best suggestion for the cattree code is to get either Sebenza's or Weiland's cattree module. They both work great and give you good places to hook into the various levels and add your HTML and CSS to them. The newly exposed cattree Miva code doesn't allow that very well.