Smooth Multi Level Drop-Down Menu Using jQuery andrey понедельник, 22 июня 2015 г. No Comment

UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........

Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

]]>

And immediately before it, paste this code:

/*Some IE fixes*/
.ddsmoothmenu ul li {zoom:1;}
.ddsmoothmenu ul li {display:inline;}

.ddsmoothmenu{
font: 12px Verdana;
background : #ffffff none repeat scroll 0% 50%;
border : 1px solid #ececec;
margin : 5px 3px 5px 3px;
padding : 0;
width : 973px;
height: 30px;
}

.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }

/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Verdana; }

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: black;}

.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #BF0000;}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: white;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray;}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 7px; right: 4px;}

.rightarrowclass{position: absolute; top: 6px; right: 5px;}

/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0px; height: 0px; background: white; display:none; visibility: hidden;}

STEP #3

Now find (CTRL+F) this code in the template:

And immediately before it, paste this code:

UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........ 







Instructions To Follow:
STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:



]]>
And immediately before it, paste this code:


/*Some IE fixes*/
.ddsmoothmenu ul li {zoom:1;}
.ddsmoothmenu ul li {display:inline;}

.ddsmoothmenu{
font: 12px Verdana;
background : #ffffff none repeat scroll 0% 50%;
border : 1px solid #ececec;
margin : 5px 3px 5px 3px;
padding : 0;
width : 973px;
height: 30px;
}

.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }

/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Verdana; }

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: black;}

.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #BF0000;}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: white;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray;}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 7px; right: 4px;}

.rightarrowclass{position: absolute; top: 6px; right: 5px;}

/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0px; height: 0px; background: white; display:none; visibility: hidden;}


STEP #3


Now find (CTRL+F) this code in the template:



And immediately before it, paste this code:














                                Tweet
                              






                            by 
                            
                              Jillur Rahman
                            


                            Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
                          

                            Follow him @ 
                            
                              Twitter
                            
                            | 
                            
                              Facebook
                            
                            | 
                            
                              Google Plus
                            



                          Tags:
                          



DropDown




                              /
                            



jQuery




                              /
                            



Level




                              /
                            



Multi




                              /
                            



Smooth




                              /
                            



Using