Quantcast
Channel: CSS3 – Codeinsects IT
Viewing all articles
Browse latest Browse all 6
↧

How to use css3 animation in navigation menu ?

April 23, 2015, 10:36 am
$
0
0

Demo


Hi all, As we know almost all the browsers support css3. New css3 has reduced lots of javascript work and its also very lightweight.

Today I am going to show you, how to create a basic css3 based animation navigation menu

  1. First of all create a html page having basic html structure for navigation menu using ul li. like below 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    <html>
<head>
<title> CSS3 Navigation menu</title>
</head>
<body>
	<ul class="ui-menu">
		<li><a href="#"><span>Item 1</span></a></li>
		<li><a href="#"><span>Item 2</span></a></li>
		<li><a href="#"><span>Item 3</span></a></li>
		<li><a href="#"><span>Item 4</span></a></li>
		<li><a href="#"><span>Item 5</span></a></li>
	</ul>
</body>
</html>
  2. Now add some css code to make its look like navigation menu. like below 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    .ui-menu{
	margin:0;padding:0;
}
.ui-menu li{
	float:left;
	padding:0;
	list-style:none;
}
.ui-menu li a{
	border:1px solid;
	font-size:15px;
	font-family:arial;
	display:block;
	text-algin:center;
	padding:10px 25px;
	background: #606c88;
	background: -moz-radial-gradient(center, ellipse cover,  #606c88 0%, #3f4c6b 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#606c88), color-stop(100%,#3f4c6b));
	background: -webkit-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
	background: -o-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
	background: -ms-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
	background: radial-gradient(ellipse at center,  #606c88 0%,#3f4c6b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=1 );
	color:#fff;
	text-decoration:none;
}
  3. Now create custom animation effect using css3. Its very easy to write like below 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

    @-webkit-keyframes hovereffect {
  from {
    -webkit-transform: rotate(0deg); /* Safari */
  }
14%{
    -webkit-transform: rotate(-10deg); /* Safari */
}
28%{
    -webkit-transform: rotate(20deg); /* Safari */
}
42%{
    -webkit-transform: rotate(-10deg); /* Safari */
}
56%{
    -webkit-transform: rotate(15deg); /* Safari */
}
70%{
    -webkit-transform: rotate(-5deg); /* Safari */
}
84%{
    -webkit-transform: rotate(10deg); /* Safari */
}
 
  to {
    -webkit-transform: rotate(0deg); /* Safari */
  }
}
 
@-moz-keyframes hovereffect {
  from {
    -moz-transform: rotate(0deg); /* IE 9 */
  }
14%{
   -moz-transform: rotate(-10deg); /* IE 9 */
}
28%{
   -moz-transform: rotate(20deg); /* IE 9 */
}
42%{
    -moz-transform: rotate(-10deg);
}
56%{
   -moz-transform: rotate(15deg); /* IE 9 */
}
70%{
   -ms-transform: rotate(-5deg); /* IE 9 */
}
84%{
   -moz-transform: rotate(10deg); /* IE 9 */
}
 
  to {
   -moz-transform: rotate(0deg); /* IE 9 */
  }
}
@keyframes hovereffect {
  from {
    transform: rotate(0deg);
  }
14%{
    transform: rotate(-10deg);
}
28%{
    transform: rotate(20deg);
}
42%{
    transform: rotate(-10deg);
}
56%{
    transform: rotate(15deg);
}
70%{
    transform: rotate(-5deg);
}
84%{
    transform: rotate(10deg);
}
 
  to {
    transform: rotate(0deg);
  }
}
  4. Now call this custom effect in hover and focus state of a like below 
    1
2
3
4
5
6
7
8
9

    .ui-menu li a:hover span,.ui-menu li a:focus span{
	display:block;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-name: hovereffect;
  -webkit-animation-name: hovereffect;
  -moz-animation-name: hovereffect;
}

That’s it now if you will final file, it should be something like below. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

<html>
<head>
<title>css3 Animated Navigation</title>
<style type="text/css">
.ui-menu{
	margin:0;padding:0;
}
.ui-menu li{
	float:left;
	padding:0;
	list-style:none;
}
.ui-menu li a{
	border:1px solid;
	font-size:15px;
	font-family:arial;
	display:block;
	text-algin:center;
	padding:10px 25px;
	background: #606c88;
	background: -moz-radial-gradient(center, ellipse cover,  #606c88 0%, #3f4c6b 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#606c88), color-stop(100%,#3f4c6b));
	background: -webkit-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
	background: -o-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
	background: -ms-radial-gradient(center, ellipse cover,  #606c88 0%,#3f4c6b 100%);
	background: radial-gradient(ellipse at center,  #606c88 0%,#3f4c6b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=1 );
	color:#fff;
	text-decoration:none;
}
.ui-menu li a:hover span,.ui-menu li a:focus span{
	display:block;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-name: hovereffect;
  -webkit-animation-name: hovereffect;
  -moz-animation-name: hovereffect;
}
@-webkit-keyframes hovereffect {
  from {
    -webkit-transform: rotate(0deg); /* Safari */
  }
14%{
    -webkit-transform: rotate(-10deg); /* Safari */
}
28%{
    -webkit-transform: rotate(20deg); /* Safari */
}
42%{
    -webkit-transform: rotate(-10deg); /* Safari */
}
56%{
    -webkit-transform: rotate(15deg); /* Safari */
}
70%{
    -webkit-transform: rotate(-5deg); /* Safari */
}
84%{
    -webkit-transform: rotate(10deg); /* Safari */
}
 
  to {
    -webkit-transform: rotate(0deg); /* Safari */
  }
}
 
@-moz-keyframes hovereffect {
  from {
    -moz-transform: rotate(0deg); /* IE 9 */
  }
14%{
   -moz-transform: rotate(-10deg); /* IE 9 */
}
28%{
   -moz-transform: rotate(20deg); /* IE 9 */
}
42%{
    -moz-transform: rotate(-10deg);
}
56%{
   -moz-transform: rotate(15deg); /* IE 9 */
}
70%{
   -ms-transform: rotate(-5deg); /* IE 9 */
}
84%{
   -moz-transform: rotate(10deg); /* IE 9 */
}
 
  to {
   -moz-transform: rotate(0deg); /* IE 9 */
  }
}
@keyframes hovereffect {
  from {
    transform: rotate(0deg);
  }
14%{
    transform: rotate(-10deg);
}
28%{
    transform: rotate(20deg);
}
42%{
    transform: rotate(-10deg);
}
56%{
    transform: rotate(15deg);
}
70%{
    transform: rotate(-5deg);
}
84%{
    transform: rotate(10deg);
}
 
  to {
    transform: rotate(0deg);
  }
}
</style>
</head>
<body>
	<ul class="ui-menu">
		<li><a href="#"><span>Item 1</span></a></li>
		<li><a href="#"><span>Item 2</span></a></li>
		<li><a href="#"><span>Item 3</span></a></li>
		<li><a href="#"><span>Item 4</span></a></li>
		<li><a href="#"><span>Item 5</span></a></li>
	</ul>
</body>
</html>

And when you will open this in browser you will see output like above. you can hover on this to check effect

Thanks for reading this article. Later I’ll show, how to create custom animation effect step by step

↧
Search
Viewing all articles
Browse latest Browse all 6

Trending Articles

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Download: FK ft Shenky – Nakuyewa ”Prod by: Shenky”

February 16, 2017, 4:24 pm

How to win at Markstrat (Markstrat Tips and Tricks) – Vodites

January 5, 2014, 10:34 pm

Ominde Commission Report and Recommendations – Ominde Report of 1964

March 16, 2015, 5:14 am

Bureau of Internal Revenue: Regional Offices (Directory)

January 9, 2014, 11:06 pm

GO 53 on Enhancement of Ex-gratia upto 5 Lakhs Toddy Tappers in Telangana

March 26, 2017, 11:23 pm

Cakewalk CA-2A Leveling Amplifier v2.0.1.97 WiN, v2.0.1.96 OSX Incl Keygen

October 17, 2016, 7:20 am

Mp3 Download: Mdu - Kunjenjenjena

December 7, 2017, 8:16 am

How the kill the job , when DTP request running for long hours.

July 26, 2013, 2:41 am

Microsoft Intune から展開しているアプリのアップデートについて

October 17, 2016, 4:11 am

18-year-old girl was beaten for half an hour by two Northampton men in 'an...

September 1, 2017, 10:00 pm

Car crash in Dunton Bassett leaves driver in critical condition

October 7, 2014, 7:51 am

Macky 2, Two Others In Road Accident

March 29, 2015, 5:34 am

Application log 00000000000000089514: Could not convert queue DLVST90CLNT

May 14, 2015, 11:27 pm

Detroit mafia: D’Anna Brothers agree to plea deal

April 21, 2016, 6:56 am

Delivery block field greyed out using VA02

January 26, 2016, 2:52 pm

Muloraki Au

June 22, 2016, 1:44 am

【個人撮影】スマホのプライベート映像♪「中に出さないで///」カラオケ屋での生ハメ撮りが流出ｗ【リベンジポルノ】＠PornHub

October 12, 2017, 2:23 pm

BREAKING NEWS: Diamond Platnumz Is Reported Dead After Ghastly Car Accident

February 9, 2018, 4:56 am

FIAT 500 B0111 B0112

July 5, 2018, 10:31 am
Search