Docstoc

Dynamic Drive CSS Library- SuckerTree Horizontal Menu

Document Sample
Dynamic Drive CSS Library- SuckerTree Horizontal Menu Powered By Docstoc
					7/31/12                                        Dynamic Drive CSS Library- SuckerTree Horizontal Menu

                                                                                                                                              submit

                                                                                                         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.
              Other
              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
                                            .ukrreeuu{
              CSS Frames                     agn ;
                                            mri:0
                                             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
                                            psto:rltv;
                                             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;
                                            bre:1xsldbak
              Ribbon Rules                   odrlf-it: ;
                                            bre-etwdh 0
              DD Whois Service               etdcrto: oe
                                            tx-eoain nn;
                                             oo: ay
                                            clr nv;
                                            }

                                             *s u ee eu/
                                            /1tsblvlmn*
                                             scetemn l i l
                                            .ukrreeuu l u{
                                             et ;
                                            lf:0
                                             oiin boue
                                            psto:aslt;
                                             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
                                            vsblt:hde;
                                            }

            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
                                         }
                Surface
                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;
                www.dataphysics.de
                                          etdcrto: oe
                                         tx-eoain nn;
                                          adn: p p;
                                         pdig 1x5x
                s slider                  odr p oi cc
                                         bre:1xsld#c;
                Fresh-Lock &             }
                Slide-Rite Zippers
                The best in               scetemn l i :oe{
                                         .ukrreeuu l ahvr
                recloseable               akrudclr lc;
                                         bcgon-oo:bak
                packaging                 oo: ht;
                                         clr wie
                www.Fresh-Lock.com/
                                         }

                                          *akrud mg o o ee eu it ik /
                                         /Bcgon iaefrtplvlmn ls lns*
                                          scetemn mifleio{
                                         .ukrreeu.anodrcn
                                          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
                                         .ukrreeu.ufleio{
                                          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*

                                          /tl>
                                         <sye

                                          srp ye"etjvsrp"
                                         <cittp=tx/aacit>

                                          /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
                                          oms
                                         cma

                                          ucin ulsbeu_oiotl)
                                         fnto bidumnshrzna({
                                          o vr =; <eud.egh +)
                                         fr(a i0 imnislnt;i+{
                                            a lasdcmn.eEeetydmnisi)gtlmnsyaNm(u"
                                           vrutg=ouetgtlmnBI(eud[].eEeetBTgae"l)
                                              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
                                         afrtlvlsbeu
                                                            last.tl.o=last.aetoeofeHih+p"
                                                           utg[]syetputg[]prnNd.fstegt"x
                                          /yaial oiin is ee umns o e egt f an eu tm
                                         /dnmclypsto frtlvlsbeu t b hih o mi mn ie
                                                            last.aetoegtlmnsyaNm(a)
                                                           utg[]prnNd.eEeetBTgae""
                                          0.lsNm=mifleio"
                                         []casae"anodrcn
                                                     }
                                                      le /le f hs s  u ee eu u)
                                                     es{/es i ti i asblvlmn (l
                                                        last.tl.etutg[-]gtlmnsyaNm(a)
                                                       utg[]syelf=last1.eEeetBTgae""
                                          0.fstit+p" /oiin eu o h ih f eu tm ht ciae t
                                         []ofeWdh"x /psto mn t tergto mn ie ta atvtdi
                                                 last.aetoegtlmnsyaNm(a)
                                                utg[]prnNd.eEeetBTgae""
                                          0.lsNm=sbodrcn
                                         []casae"ufleio"
                                                     }
                                              last.aetoeomuevrfnto({
                                             utg[]prnNd.nosoe=ucin)
                                              hsgtlmnsyaNm(u"[]syevsblt=vsbe
                                             ti.eEeetBTgae"l)0.tl.iiiiy"iil"
                                             }
                                              last.aetoeomueu=ucin)
                                             utg[]prnNd.nosotfnto({
                                              hsgtlmnsyaNm(u"[]syevsblt=hde"
                                             ti.eEeetBTgae"l)0.tl.iiiiy"idn
                                             }
                                             }
                                           }
                                         }

                                          f wno.dEetitnr
                                         i (idwadvnLsee)
                                          idwadvnLsee(la" ulsbeu_oiotl as)
                                         wno.dEetitnr"od,bidumnshrzna,fle
                                          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

                                          /cit
                                         <srp>




                                           The HTML:

                                         Select Code     Contract
                                          dv ls=scetemn"
                                         <i cas"ukrreeu>
                                          u d"reeu"
                                         <li=temn1>
                                          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/>
                                            u>
                                           <l
                                            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
                                           <u>
                                          /i
                                         <l>
                                          l>a rf""Ie <a<l>
                                         <i< he=#>tm3/>/i
                                          l>a rf""Fle <a
                                         <i< he=#>odr2/>
                                            u>
                                           <l
                                            l>a rf""Sb tm .<a<l>
                                           <i< he=#>u Ie 21/>/i
                                            l>a rf""Fle .<a
                                           <i< he=#>odr21/>
                                              u>
                                             <l
                                              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
                                             <u>
                                            /i
                                           <l>
                                          /l
                                         <u>
                                          />
                                         <a
                                          /i
                                         <l>
                                          l>a rf""Ie <a<l>
                                         <i< he=#>tm4/>/i
                                          /l
                                         <u>
                                          b tl=cer et" >
                                         <rsye"la:lf; /
                                          /i>
                                         <dv

                                          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:
                                        below.

                                        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
                                         work.

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

                                         /* 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

				
DOCUMENT INFO
Categories:
Tags:
Stats:
views:83
posted:10/21/2012
language:Unknown
pages:4