Submenu using CSS by MohammadAmjadShaikh


									7/30/12                                                       Submenu using CSS

              Message [Page 1 of 1]

                                       Submenu using CSS on Wed Jan 05, 2011 1:39 am                                                                 1

                                                                        Submenu using CSSC r ea t i n g a su b m en u u si n g C S S

                                         Hello members,

                                         Today i am going to teach you how to create a submenu using only CSS,step by step.

                                         Tools you may need:
                                         + Notepad/WYSIWYG editor/Dreamweaver/Editpad Lite/Espresso(or just an HTML editor
                                         +Basic HTML Knowlege
                                         +Basic CSS Knowlege(since i am gonna teach you how to do the rest )
                                         +A computer

                                         Alright enough fun lets get working.

                                         Lets start with our HTML first.
                                         We are going to create an unordered list (aka <ul>) for the whole thing,and the <span> tags to do the
                                         submenu job(we could use a mixture of onother unordered list into a list(li) but i dont really like that

                                         We name our unordered list as nav:


                                                u d"a"

                                         Now let me show you how the submenu is going to be:
                                         Adding some links first:


                                                l>a rf""Ln<a<l>
                                               <i< he=#>ik/>/i
                                                 l>a rf""Ln<a<l>
                                                <i< he=#>ik/>/i

                                         And then the submenu into the 3rd link:


                                                l>a rf""Ln<a
                                               <i< he=#>ik/>
                                                        a rf""Sba ik/>
                                                       < he=#>unvLn<a |
                                                        a rf""Sba ik/>
                                                       < he=#>unvLn<a |
                                                !-n f umn->
                                               <-Edo sbeu-

                                         As you can see,we used the <span> tag to display the submenu and putted it into the list of the 3rd link.

                                         Now,lets start styling the navigation using css:                                                                                                             1/4
7/30/12                                                     Submenu using CSS
                                       Now,lets start styling the navigation using css:
                                       I will explain everything into the css code:


                                              u#a {
                                               *cnes h aiain n e lo e adn o eoyu a dt t**
                                              /*etr tenvgto adw as stpdigt zr(o cnei i)*/
                                                 agn ; adn: ;
                                                mri:0 pdig 0
                                               **h it f u aiain**
                                              /*Tewdho ornvgto**/
                                                    it: 0p;
                                                   wdh 90x
                                               **et laig o einn ut sus*/
                                              /*lf fotn frdsgigjs ise**
                                                 la: et
                                                fot lf;
                                               **e at h it o e ipae oiotl**
                                              /*W wn tels t b dslydhrznay*/
                                                 itsye oe
                                               **h oiin eu f h aiain*/
                                              /*tepsto stpo tenvgto**
                                                 oiin eaie
                                               **h ie f h ot no h aiain*/
                                              /*tesz o tefnsit tenvgto**
                                                 otsz: .e;
                                                fn-ie 13m
                                               **h oo f u aiain*/
                                              /*teclro ornvgto**

                                       You can edit everything and experiment with it,you can also use an image as a background in the
                                       navigation by replacing:






                                       Now lets work on the lists:


                                             lnv i
                                            u#a l {
                                             **sm xlnto**
                                                la: et
                                               fot lf;
                                             **ae xlnto**
                                            /*sm epaain*/
                                                agn ; adn: ;
                                               mri:0 pdig 0
                                             **h iie ewe h ik o ht t ok oe rfeinl*/
                                            /*tedvdrbtentelnss ta i losmr pofsoa**
                                                odrrgt p oi lc;
                                             **S o h ik**/
                                             lnv i
                                            u#a l a{
                                             **h adn no h aiain>pc no h aiain*/
                                            /*tepdigit tenvgto-saeit tenvgto**
                                                adn: 0x 5x
                                               pdig 1p 1p;
                                             **da o unvgtos*/
                                                ipa: lc;
                                               dsly bok
                                             **n neln o h aiain ik-il ok a**
                                            /**oudriefrtenvgto lnswl lo bd*/
                                                etdcrto: oe
                                               tx-eoain nn;
                                             **h oo f h aiain ik**
                                            /*teclro tenvgto lns*/
                                       You can also add hover effects on the links of the nav,by using the selector:
                                                oo: fff;
                                               clr #000

                                               lnv i :oe
                                              u#a l ahvr

                                       Now lets style the submenu:


                                               lnv i pn
                                              u#a l sa {
                                                    it: 0p;
                                                   wdh 90x
                                                 akrud 17c;
                                                 oo: ff
                                                clr #f;
                                                 la: et
                                                fot lf;
                                                 adn: 5x ;
                                                pdig 1p 0
                                                 oiin boue
                                                 ipa: oe
                                                dsly nn;
                                                 et ; o:5x
                                                lf:0 tp3p;

                                              }                                                                                             2/4
7/30/12                                                                Submenu using CSS

                                          And other little css things so that we avoid bugs and display the submenu correctly:


                                                    ltpa ihvr pn
                                                   u#onvl:oe sa {
                                                    *epand bv**
                                                   /*xlie aoe*/
                                                     ipa: lc;
                                                    dsly bok
                                                    ltpa i pn
                                                   u#onvl sa a{
                                                    **nie ipa**
                                                   /*Iln dsly*/
                                                    ipa: nie
                                                   dsly iln;
                                                    ltpa i pn :oe
                                                   u#onvl sa ahvr{
                                                    **js n neln eoain**
                                                   /**uta udriedcrto**/
                                                    etdcrto: neln;
                                                   tx-eoain udrie

                                          you will understand these,explained them in the above codes 2 times

                                          You can also use css3 rounded corners or css3 box shadows to make it look more proffesional :
                                          -Rockerman's Box-shadow Tutorial
                                          -Rockerman's CSS3 rounded corners tutorial


                                          [url="]Demo[/url] (Changed a little bit)

                                          Currently,the nav wont work in IE.Searching for a script though to update it.

                                                   Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written
                                                                                                                         permission from the administrators.

                                     Last edited by Nick on Fri Jan 07, 2011 1:06 am; edited 2 times in total

                                     Re: Submenu using CSS on Wed Jan 05, 2011 3:20 am                                                                          2

                                     Might wanna' provide a demo pal

                                     EDIT: Also, you might want to replace to name of the color "orange" to a hex value since it won't be valid. Here
                                     is one    #eaa500. There where 3 other errors too, here they are. Take a look...

                                        Enlarge this image C lick to see fullsize

                                     Should always make sure you CSS and HTML is valid

                                     I updated the border-radius tut

                                     Re: Submenu using CSS on Wed Jan 05, 2011 1:16 pm                                                                          3

                                     i know there are erros,i am trying to correct them

                                     Re: Submenu using CSS on Thu Jan 06, 2011 9:45 pm                                                                          4

                                     Does this method work in IE?
                                     Can you please add a demo to it?

                                     Re: Submenu using CSS on Fri Jan 07, 2011 12:12 am                                                                         5


                                            ankillien wrote:

                                            Does this method work in IE?
                                            Can you please add a demo to it?

                                     I am trying to fix the menu atm,so please bare until i update the tut and post a demo.
                                     Sorry for any inconvenience.

                                     EDIT:Fixed the nav,posted demo,now have to find a fix for IE(crap).

                                     Re: Submenu using CSS on Sat Jan 15, 2011 4:56 pm                                                                          6                                                                                                                        3/4
7/30/12                                                                        Submenu using CSS
                                                     Tutorial Accepted

               W e bArtz - The W e b De sign Forum   » W e b De signing & C oding   » Tutorials   » Submenu using CSS

              Similar topics

          »   Submenu using CSS
          »   What's the current time in your country?
          »   What is your motto for today?
          »   Link to Us Code
          »   Happy Birthday Kratos !                                                                            4/4

To top