TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Add CSS3 Flying Style Drop Down Menubar to Blogger
Hardik Mistri
May 08, 2020
6.8
k
0
1
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
Add CSS3 flying style DropDown menu-bar to blogger.
Add CSS3 Flying Style Drop Down Menu-bar to Blogger
Login to your Blogger Account.
From Dashboard >> Tamplate >> Edit HTML >> Proceed.
Don't forget to backup your template first.
Check the Expand Widget Templates box.
Find out (Press Ctrl+F) the Code ]]></b:skin>
Now Just before the ]]></b:skin> Paste the following Code
#flying
menubt,
#flying
menubt ul {
list-style
:
none
outside
none
;
margin
:
0
;
padding
:
0
;
height
:
500px
;
}
#flying
menubt {
font-family
:
"Lucida Sans Unicode"
,
Verdana
,
Arial
,
sans-serif
;
font-size
:
13px
;
height
:
36px
;
list-style
:
none
outside
none
;
margin
:
40px
auto
;
text-shadow
:
0
-1px
3px
#202020
;
width
:
980px
;
-moz-border-radius:
4px
;
-webkit-border-radius:
4px
;
border-radius:
4px
;
-moz-box-shadow:
0px
3px
3px
#cecece
;
-webkit-box-shadow:
0px
3px
3px
#cecece
;
box-shadow:
0 3px
4px
#8b8b8b
;
background-image
: -webkit-gradient(linear,
left
bottom
,
left
top
, color-stop(
0
,
#787878
), color-stop(
0.5
,
#5E5E5E
), color-stop(
0.51
,
#707070
), color-stop(
1
,
#838383
));
background-image
: -moz-linear-gradient(
center
bottom
,
#787878
0%,
#5E5E5E
50%
,
#707070
51%,
#838383
100%);
background-color
:
#5f5f5f
;
}
#flying
menubt ul {
left:
-9999px
;
position
:
absolute
;
top:
-9999px
;
z-index
:
2
;
}
#flying
menubt li {
border-bottom
:
1px
solid
#575757
;
border-left
:
1px
solid
#929292
;
border-right
:
1px
solid
#5d5d5d
;
border-top
:
1px
solid
#797979
;
display
:
block
;
float
:
left
;
height
:
34px
;
position
:
relative
;
width
:
105px
;
}
#flying
menubt li:first-child {
border-left
:
0
none
;
margin-left
:
5px
;
}
#flying
menubt li a {
color
:
#FFFFFF
;
display
:
block
;
line-height
:
34px
;
outline
:
medium
none
;
text-align
:
center
;
text-decoration
:
none
;
background-image
: -webkit-gradient(linear,
left
bottom
,
left
top
, color-stop(
0
,
#787878
), color-stop(
0.5
,
#5E5E5E
), color-stop(
0.51
,
#707070
), color-stop(
1
,
#838383
));
background-image
: -moz-linear-gradient(
center
bottom
,
#787878
0%,
#5E5E5E
50%
,
#707070
51%,
#838383
100%);
background-color
:
#5f5f5f
;
}
/* keyframes #animation1 */
@-webkit-keyframes animation
1
{
0%
{
-webkit-transform: scale(
1
);
}
30%
{
-webkit-transform: scale(
1.3
);
}
100%
{
-webkit-transform: scale(
1
);
}
}
@-moz-keyframes animation
1
{
0%
{
-moz-transform: scale(
1
);
}
30%
{
-moz-transform: scale(
1.3
);
}
100%
{
-moz-transform: scale(
1
);
}
}
#flying
menubt li>a:hover {
-moz-animation-name: animation
1
;
-moz-animation-duration:
0.7
s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-
direction
:
normal
;
-moz-animation-delay:
0
;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation
1
;
-webkit-animation-duration:
0.7
s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-
direction
:
normal
;
-webkit-animation-delay:
0
;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#flying
menubt li:hover>a {
z-index
:
4
;
}
#flying
menubt li:hover ul.subs {
left:
0
;
top:
34px
;
width
:
150px
;
}
#flying
menubt ul li {
background
:
none
repeat
scroll
0 0
#838383
;
box-shadow:
5px
5px
5px
rgba(
0
,
0
,
0
,
0.5
);
opacity:
0
;
width
:
100%
;
/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}
/* keyframes #animation2 */
@-webkit-keyframes animation
2
{
0%
{
margin-left
:
185px
;
}
100%
{
margin-left
:
0px
;
opacity:
1
;
}
}
@-moz-keyframes animation
2
{
0%
{
margin-left
:
185px
;
}
100%
{
margin-left
:
0px
;
opacity:
1
;
}
}
#flying
menubt li:hover ul li {
/* css3 animation */
-moz-animation-name: animation
2
;
-moz-animation-duration:
0.3
s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count:
1
;
-moz-animation-
direction
:
normal
;
-moz-animation-delay:
0
;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation
2
;
-webkit-animation-duration:
0.3
s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count:
1
;
-webkit-animation-
direction
:
normal
;
-webkit-animation-delay:
0
;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#flying
menubt li:hover ul li:nth-child(
1
) {
-moz-animation-delay:
0
;
-webkit-animation-delay:
0
;
}
#flying
menubt li:hover ul li:nth-child(
2
) {
-moz-animation-delay:
0.05
s;
-webkit-animation-delay:
0.05
s;
}
#flying
menubt li:hover ul li:nth-child(
3
) {
-moz-animation-delay:
0.1
s;
-webkit-animation-delay:
0.1
s;
}
#flying
menubt li:hover ul li:nth-child(
4
) {
-moz-animation-delay:
0.15
s;
-webkit-animation-delay:
0.15
s;
}
#flying
menubt li:hover ul li:nth-child(
5
) {
-moz-animation-delay:
0.2
s;
-webkit-animation-delay:
0.2
s;
}
#flying
menubt li:hover ul li:nth-child(
6
) {
-moz-animation-delay:
0.25
s;
-webkit-animation-delay:
0.25
s;
}
#flying
menubt li:hover ul li:nth-child(
7
) {
-moz-animation-delay:
0.3
s;
-webkit-animation-delay:
0.3
s;
}
#flying
menubt li:hover ul li:nth-child(
8
) {
-moz-animation-delay:
0.35
s;
-webkit-animation-delay:
0.35
s;
}
Go back Blogger and click Layout than Add Gadget >> HTML/Javascript.
Paste the below code and Save.
<
ul
id
=
"flyingmenubt"
>
<
li
>
<
a
href
=
"http://www.sr-site.com/"
temp_href
=
"http://www.sr-site.com/"
>
Home
</
a
>
</
li
>
<
li
>
<
a
class
=
"hsubs"
href
=
"#"
temp_href
=
"#"
>
Menu 1
</
a
>
<
ul
class
=
"subs"
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 1
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 2
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 3
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 4
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 5
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
class
=
"hsubs"
href
=
"http://www.sr-site.com/"
temp_href
=
"http://www.sr-site.com/"
>
Menu 2
</
a
>
<
ul
class
=
"subs"
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 1
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 2
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 3
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 4
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 5
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 6
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 7
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 8
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
class
=
"hsubs"
href
=
"#"
temp_href
=
"#"
>
Menu 3
</
a
>
<
ul
class
=
"subs"
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 1
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 2
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 3
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 4
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Submenu 5
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Menu 4
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Menu 5
</
a
>
</
li
>
<
li
>
<
a
href
=
"#"
temp_href
=
"#"
>
Menu 6
</
a
>
</
li
>
<
li
>
<
a
href
=
"http://www.sr-site.com/"
temp_href
=
"http://www.sr-site.com/"
>
Back
</
a
>
</
li
>
</
ul
>
Add CSS3 Flying Style Drop Down Menubar to Blogger
Next Recommended Reading
Twitter Style(glow) Textbox Using Css3 new features box-shadow