Dynamic Drive CSS Library- SuckerTree Horizontal Menu by MohammadAmjadShaikh


									7/31/12                                        Dynamic Drive CSS Library- SuckerTree Horizontal Menu


                                                                                                         Advanced Search Usage Term s Subm it Contact

            Home      CSS Home       Blog     Tools       Forums

             CSS LIBRARY                    CSS Library: Horizontal CSS Menus: Here

              Horizontal CSS Menus
                                        SuckerTree Horizontal Menu
              Vertical CSS Menus
              Image CSS                 Author: Dynamic Drive

              Form CSS                  SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of
              DIVs and containers       sub menus. The trick to SuckerTree is a small adoptable piece of JavaScript that crawls the inner levels of
                                        a list menu and assigns the appropriate show/hide and positioning behavior to them. You can even have
              Links & Buttons           multiple SuckerTree menus on the same page.
              CSS3 demos
                                        See also: SuckerTree Vertical Menu.
              Browse All                      Demo:

                                            Item 1            Item 2        Folder 1        Item 3           Folder 2         Item 4

             CSS LAYOUTS                      The two bullet images used:

              Layouts Index
              Two Columns                     The CSS:
              Three Columns                 Select Code    Contract
              Fixed layouts                  sye ye"etcs>
                                            <tl tp=tx/s"
              Liquid Layouts
                                             scetemn l
              CSS Frames                     agn ;
                                             adn: ;
                                            pdig 0
                                             itsyetp: oe
                                            ls-tl-ye nn;
             WEB GRAPHICS                   }

              Free Graphics                  *o ee it tm*
                                            /Tplvlls ies/
                                             scetemn l i
                                            .ukrreeuu l{
             ONLINE TOOLS:                   oiin eaie
                                             ipa: nie
                                            dsly iln;
                                             la: et
                                            fot lf;
              Image Optimizer
                                             akrudclr FFF; *vrl eu akrud oo*
                                            bcgon-oo:#333 /oealmn bcgon clr/
              FavIcon Generator             }
              Email Riddler
                                             *o ee eu ik tm tl*
                                            /Tplvlmn ln iessye/
              htaccess Password
                                             scetemn l i {
                                            .ukrreeuu l a
              .htaccess Banning              ipa: lc;
                                            dsly bok
              Gradient Image Maker           it: 0x *it f o ee eu ik tm*
                                            wdh 9p;/Wdho tplvlmn ln ies/
              Button Maker                   adn: p p;
                                            pdig 1x8x
                                             odr p oi lc;
              Ribbon Rules                   odrlf-it: ;
                                            bre-etwdh 0
              DD Whois Service               etdcrto: oe
                                            tx-eoain nn;
                                             oo: ay
                                            clr nv;

                                             *s u ee eu/
                                             scetemn l i l
                                            .ukrreeuu l u{
                                             et ;
                                             oiin boue
                                             o: e; * o ed o hne s re au e y cit /
                                            tp 1m / n ne t cag,a tu vlestb srp *
                                             ipa: lc;
                                            dsly bok
                                             iiiiy idn

            Page Flip Creator- aXmag         *u ee eu it tm ud tl rm o ee it tm)/
                                            /Sblvlmn ls ies(nosyefo TplvlLs Ies*
                                             scetemn l i l i
                                            .ukrreeuu l u l{
                 Advertise Here              ipa: itie;
                                            dsly ls-tm
                                             la: oe
                                            fot nn;

                                             *l usqet u eu ees fst fe s ee u eu /
                                            /Alsbeun sbmn lvl ofe atr1tlvlsbmn *
                                             scetemn l i l i l
                                            .ukrreeuu l u l u{
                                             et 5p; * o ed o hne s re au e y cit /
                                            lf:19x / n ne t cag,a tu vlestb srp *
www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/                                                                                  1/4
7/31/12                                     Dynamic Drive CSS Library- SuckerTree Horizontal Menu
                                          et 5p; * o ed o hne s re au e y cit /
                                         lf:19x / n ne t cag,a tu vlestb srp *
                                          o: ;
                                         tp 0
                Tension Meters            * u ee eu ik tl /
                                         / Sblvlmn lnssye*
                Tensiometers for          scetemn l i l i {
                                         .ukrreeuu l u l a
                Rings/Plates &            ipa: lc;
                                         dsly bok
                Spinning Drop             it: 6p; *it f u eu ees/
                                         wdh 10x /wdho sbmn lvl*
                Tensiometers              oo: ay
                                         clr nv;
                                          etdcrto: oe
                                         tx-eoain nn;
                                          adn: p p;
                                         pdig 1x5x
                s slider                  odr p oi cc
                Fresh-Lock &             }
                Slide-Rite Zippers
                The best in               scetemn l i :oe{
                                         .ukrreeuu l ahvr
                recloseable               akrudclr lc;
                packaging                 oo: ht;
                                         clr wie

                                          *akrud mg o o ee eu it ik /
                                         /Bcgon iaefrtplvlmn ls lns*
                                          scetemn mifleio{
                                          akrud FFF r(ei/ro-ongf orpa etr ih;
                                         bcgon:#333ulmdaarwdw.i)n-eetcne rgt

                                          *akrud mg o usqet ee eu it ik /
                                         /Bcgon iaefrsbeun lvlmn ls lns*
                                          scetemn sbodrcn
                                          akrud FFF r(ei/ro-ih.i) orpa etr ih;
                                         bcgon:#333ulmdaarwrgtgf n-eetcne rgt

                                           tl #eaa *o  aarp i n) ht meitl olw ukrre
                                         *hm pipr{/Fraprgah(fay ta imdaeyflosscete
                                          eu d e o pcn ewe h w n E/
                                         mn,ad1mtpsaigbtentetoi I*
                                          adn-o: e;
                                         pdigtp 1m

                                          * ol ak o E *
                                         / HlyHc frI \/
                                           tl scetemn l i  la: et egt %
                                         *hm .ukrreeuu l {fot lf;hih:1;}
                                           tl scetemn l i   egt %
                                         *hm .ukrreeuu l a{hih:1;}
                                          * n /
                                         / Ed*


                                          srp ye"etjvsrp"

                                          /ukrre oiotl eu Sp 4h 6
                                         /SceTe Hrzna Mn (et1t,0)
                                          /y yai rv: tp/wwdnmcrv.o/tl/
                                         /B DnmcDie ht:/w.yaidiecmsye

                                          a eud="reeu" /ne ds f ukrre L eu, eaae y
                                         vrmnis[temn1]/Etri()o SceTe U mns sprtdb

                                          ucin ulsbeu_oiotl)
                                         fnto bidumnshrzna({
                                          o vr =; <eud.egh +)
                                         fr(a i0 imnislnt;i+{
                                            a lasdcmn.eEeetydmnisi)gtlmnsyaNm(u"
                                              o vr =; <laslnt; +)
                                             fr(a t0 tutg.egh t+{
                                                      f utg[]prnNd.aetoei=mnisi) /f hs s
                                                     i (last.aetoeprnNd.d=eud[]{/i ti i
                                            is ee umn
                                          /yaial oiin is ee umns o e egt f an eu tm
                                         /dnmclypsto frtlvlsbeu t b hih o mi mn ie
                                                      le /le f hs s  u ee eu u)
                                                     es{/es i ti i asblvlmn (l
                                          0.fstit+p" /oiin eu o h ih f eu tm ht ciae t
                                         []ofeWdh"x /psto mn t tergto mn ie ta atvtdi

                                          f wno.dEetitnr
                                         i (idwadvnLsee)
                                          idwadvnLsee(la" ulsbeu_oiotl as)
                                          le f wno.tahvn)
                                         es i (idwatcEet
                                          idwatcEet"nod, ulsbeu_oiotl
                                         wno.tahvn(ola" bidumnshrzna)

www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/                              2/4
7/31/12                                     Dynamic Drive CSS Library- SuckerTree Horizontal Menu


                                           The HTML:

                                         Select Code     Contract
                                          dv ls=scetemn"
                                         <i cas"ukrreeu>
                                          u d"reeu"
                                          l>a rf"" tl=bre-et p oi lc"Ie <a<l>
                                         <i< he=# sye"odrlf:1xsldbak>tm1/>/i
                                          l>a rf""Ie <a<l>
                                         <i< he=#>tm2/>/i
                                          l>a rf""Fle <a
                                         <i< he=#>odr1/>
                                            l>a rf""Sb tm .<a<l>
                                           <i< he=#>u Ie 11/>/i
                                            l>a rf""Sb tm .<a<l>
                                           <i< he=#>u Ie 12/>/i
                                            l>a rf""Sb tm .<a<l>
                                           <i< he=#>u Ie 13/>/i
                                            l>a rf""Sb tm .<a<l>
                                           <i< he=#>u Ie 14/>/i
                                          l>a rf""Ie <a<l>
                                         <i< he=#>tm3/>/i
                                          l>a rf""Fle <a
                                         <i< he=#>odr2/>
                                            l>a rf""Sb tm .<a<l>
                                           <i< he=#>u Ie 21/>/i
                                            l>a rf""Fle .<a
                                           <i< he=#>odr21/>
                                              l>a rf""Sb tm ..<a<l>
                                             <i< he=#>u Ie 211/>/i
                                              l>a rf""Sb tm ..<a<l>
                                             <i< he=#>u Ie 212/>/i
                                              l>a rf""Sb tm ..<a<l>
                                             <i< he=#>u Ie 213/>/i
                                              l>a rf""Sb tm ..<a<l>
                                             <i< he=#>u Ie 214/>/i
                                          l>a rf""Ie <a<l>
                                         <i< he=#>tm4/>/i
                                          b tl=cer et" >
                                         <rsye"la:lf; /

                                          p d"eaa>et f otn ee/>
                                         < i=ipr"Rs o cnethr<p

                                         Ads by Google    CSS Menu          Menu         CSS Menus          CSS

                                           Y OU R C OMMEN T S ( 314)                                                          C O DE INFO

                                        Got a question or need help customizing this CSS code? Post it in the CSS Forums.
                                        If you have a comment or suggestion instead, post it in the comments section
                                                                                                                            Rate this code:

                                        Comment Pages 1 of 32 pages 1 2 3 > Last »
                                                                                                                            3.7/5 from 266 votes

                                         Stylish AND lightweight... definitely worth the use!                               Date Posted: 09/14/2006
                                                                                                                            Revision History: None
                                                 Posted by Nathan on 09/14, 07:37 PM
                                                                                                                            Usage Terms: Click here

                                         Nice menu. What about a compatibility list on IE,FF,Opera and Safari?

                                                 Posted by Andrea on 09/15, 02:49 AM

                                         The menu was successfully tested in IE6, Firefox 1.5, Opera 9, and IE7
                                         RC1. Not sure about Safari yet, though appreciate any feedback on that
                                         and other browsers.

                                                 Posted by ddadmin on 09/15, 03:09 AM

                                         seems all good in safari

                                                 Posted by ixley on 09/15, 11:40 AM

                                         It doesn't work properly in IE6 or 7 for me. If i move my cursor down the

www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/                                                                                3/4
7/31/12                                     Dynamic Drive CSS Library- SuckerTree Horizontal Menu
                                         submenu, when it gets to bottom it wigs out. Then if i move my cursor
                                         back up the list, all the links stay on the hover state.

                                         This is what I see viewing this page in IE(6 & 7)

                                                 Posted by Miz on 09/17, 03:33 AM

                                         I agree with "Posted by Miz on 09/17, 01:33 AM". Even i tried to make it
                                         run on IE 6 and spend almost a whole day to figure out but it didnt

                                                 Posted by Deepak on 09/20, 11:43 AM

                                         For those having problems, please provide as much info on your system
                                         as possible (ie: OS, any other useful info), and whether the issue occurs
                                         with the demo you see here as well.

                                                 Posted by ddadmin on 09/20, 03:20 PM

                                         In IE(this works fine in firefox) Each "folder" has a space of a few pixels
                                         underneath it if you add 3 or more sub-menus. Is this a problem with
                                         the script or stylesheet?

                                                 Posted by jchalos on 09/21, 01:58 PM

                                         It seems as though the gap is present even in a single sub-menu. The
                                         space cosmetically doesn't bother me, but when there is text in the
                                         layer underneath, the menu is hidden when you bring the mouse over
                                         one of these gaps. I am not very familiar with the css nor the many bugs
                                         in ie's css processing, so any help is appreciated. I am using WinXP sp2,
                                         and ie 6.0.2900.

                                                 Posted by jchalos on 09/22, 03:12 PM

                                         Ok, I managed to fix it myself by using the following for IE

                                         /* Holly Hack for IE \*/
                                         * html .suckertreemenu ul li { float: left; height: 1%;}
                                         * html .suckertreemenu ul li a { height: 1%;}
                                         * html .suckertreemenu ul li ul li { float: left;}
                                         /* End */

                                         Hopefully this helps someone else.

                                                 Posted by jchalos on 09/25, 09:36 AM

                                        Comment Pages 1 of 32 pages 1 2 3 > Last »

                                        Commenting is not available in this weblog entry.

                                      C opyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the C SS codes.

                                                                                                        Home New Revised DHTML Menus Contact

www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/                                                                         4/4

To top