Announcement

Collapse
No announcement yet.

category flyout menu?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    category flyout menu?

    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

    #2
    Re: category flyout menu?

    You can either hardcode the category tree in or do a custom solution like this one:
    http://www.itscheaperthantherapy.com/
    Lynda Freeman
    Paragon Publications
    www.paragonpubs.com
    [email protected]

    Comment


      #3
      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.
      Steve Strickland
      972-227-2065

      Comment


        #4
        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.
        Jason Fancett
        America's SPA-MART - "Where Spa Owners Shop SMART!"
        Check us out for all of your hot tub needs including spa covers, spa filters, spa chemicals and more.
        Miva Merchant forum users can use coupon code MIVAFORUM to receive $5 off your first order of $30 or more.

        Comment


          #5
          Re: category flyout menu?

          Linda,

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

          thanks

          Jeremy

          Comment


            #6
            Re: category flyout menu?

            It was a combination of a customized cattree module and custom menu script.
            Lynda Freeman
            Paragon Publications
            www.paragonpubs.com
            [email protected]

            Comment


              #7
              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

              Code:
              <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>

              Comment


                #8
                Re: category flyout menu?

                Originally posted by jeremy moff
                <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.
                Last edited by Biffy; 10-18-07, 04:11 AM.
                Steve Strickland
                972-227-2065

                Comment


                  #9
                  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

                  Comment


                    #10
                    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.
                    Steve Strickland
                    972-227-2065

                    Comment

                    Working...
                    X