How to Create a Flashy Menu Using CSS

Today I’m going to show you how to create a flashy menu using CSS3. This tutorial is for beginners and can be completed fairly quickly. Make sure you click on the link below to see a demo of the menu and get the source code.
Download the Demo & Source
Final result:

The HTML

Our HTML document contains an unordered list and each list item is a link with an anchor tag. The span contains the name of the menu item.

1	<ul class="main-ul">

2	<li><a href="#"><span>Home</span></a></li>

3	<li><a href="#"><span>Article</span></a></li>

4	<li><a href="#"><span>Blog</span></a></li>

5	<li><a href="#"><span>Gallery</span></a></li>

6	<li><a href="#"><span>About</span></a></li>

7	<li><a href="#"><span>Contact Us</span></a></li>

8	<li><a href="#"><span>Alumini</span></a></li>

9	<li><a href="#"><span>Portfolio</span></a></li>

10

</ul>

The CSS

I am using a pattern for our page background from SubtlePatterns.

1

body{

2	background: #eee url(../images/white_paperboard.png) repeat top right;

3

}

Now let’s position menu list items. I am using 25% width for each item, so in each row four menu items can be positioned. I’m aligning text of each list item to center.

1	.main-ul li {

2	float:left;

3	position:relative;

4	width:25%;

5	text-align:center;

6

}

Next let’s position each anchor tag and change text decoration to none. I am using a light gray color background. I am also adding CSS3 transition effects to these elements with a duration of one second.

1	.main-ul li a {

2	display:block;

3	padding-bottom:20px;

4	padding-right:10px;

5	padding-top:10px;

6	padding-left:10px;

7	text-decoration:none;

8	position: relative;

9	z-index: 100;

10	background-color: rgba(164, 164, 164, 0.2);

11	-webkit-transition: all 1s;

12	-moz-transition: all 1s;

13	-o-transition: all 1s;

14	transition: all 1s;

15

}

I am using ‘Kotta One’ font for span text, normal font size and weight of 20px and 700 respectively. I’ve made the font color for the text in its hover state white.

1	.main-ul li a span{

2	display:block;

3	padding-top:10px;

4	font-weight:700;

5	font-size: 20px;

6	color: rgba(120, 120, 120, 0.9);

7	text-transform:uppercase;

8	font-family: 'Kotta One', serif;

9

}

10

11	.main-ul li:hover span{

12	color: #fff;

13

}

Here comes our main part, I have already added transition effect for the anchor tags. Now add hover effects for each anchor tag list item by changing its background color. So when someone hovers over each list menu item it will change background color to a new color. I’m also adding CSS3 transform rotate effects of 3 degrees.

1	.main-ul li:nth-child(1):hover a{

2	background-color: rgba(175,54,55,0.8);

3	-moz-transform: rotate(-3deg);

4	-webkit-transform: rotate(-3deg);

5	-o-transform: rotate(-3deg);

6	transform: rotate(-3deg);

7

}

Now repeat the above step for all list items with a new background color of your choice!

1	.main-ul li:nth-child(2):hover a{

2	background-color: rgba(199, 204, 73, 0.8);

3	-moz-transform: rotate(-3deg);

4	-webkit-transform: rotate(-3deg);

5	-o-transform: rotate(-3deg);

6	transform: rotate(-3deg);

7

}

8	.main-ul li:nth-child(3):hover a{

9	background-color: rgba(213, 135, 11, 0.8);

10	-moz-transform: rotate(3deg);

11	-webkit-transform: rotate(3deg);

12	-o-transform: rotate(3deg);

13	transform: rotate(3deg);

14

}

15	.main-ul li:nth-child(4):hover a{

16	background-color: rgba(51, 143, 144, 0.8);

17	-moz-transform: rotate(3deg);

18	-webkit-transform: rotate(3deg);

19	-o-transform: rotate(3deg);

20	transform: rotate(3deg);

21

}

22	.main-ul li:nth-child(5):hover a{

23	background-color: rgba(117,18,98,0.8);

24	-moz-transform: rotate(-3deg);

25	-webkit-transform: rotate(-3deg);

26	-o-transform: rotate(-3deg);

27	transform: rotate(-3deg);

28

}

29	.main-ul li:nth-child(6):hover a{

30	background-color: rgba(33, 136, 215, 0.8);

31	-moz-transform: rotate(-3deg);

32	-webkit-transform: rotate(-3deg);

33	-o-transform: rotate(-3deg);

34	transform: rotate(-3deg);

35

}

36	.main-ul li:nth-child(7):hover a{

37	background-color: rgba(109, 109, 109, 0.8);

38	-moz-transform: rotate(3deg);

39	-webkit-transform: rotate(3deg);

40	-o-transform: rotate(3deg);

41	transform: rotate(3deg);

42

}

43	.main-ul li:nth-child(8):hover a{

44	background-color: rgba(152, 120, 92, 0.8);

45	-moz-transform: rotate(3deg);

46	-webkit-transform: rotate(3deg);

47	-o-transform: rotate(3deg);

48	transform: rotate(3deg);

49

}

That’s it, we have accomplished a simple flashy menu, so that when someone hovers over our menu items simultaneously it will change background color and slightly rotate. Thanks for reading!