খুব সহজে css3 দিয়ে তৈরি করুন animatted menu

Written by

আজ আমি আপনাদের দেখাব কিভাবে শুধু  css3 দিয়ে খুব সহজে  animatted menu তৈরি করা যায়। প্রথমে আপনার text editor open করুন। তারপর নিচের কোডটুকু কপি করে পেস্ট করুন।

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Dropdown menu</title>
</head>

<body>
<ul id=”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</body>
</html>

dropdown menu

এবার নিচের css কোডটুকু কপি করে head tag এর মাঝে পেস্ট করুন।

<style type=”text/css”>
/* CSS3 TRANSITION ONLY EFFECT */
#menu {
width:300px;
list-style:none;
padding-top:30px;
display:inline-block;
}

#menu li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111;
border-top:1px solid #111;
border-right:1px solid #333;
border-bottom:1px solid #333;
}

#menu li a {
color:#fff;
display:block;
padding:10px;
}

#menu li a:hover {
color:#00c6ff;
}

#menu li.effect {
-moz-transition: all 0.4s ease-in-out;
-moz-transform:translateX(0px);
-o-transition: all 0.4s ease-in-out;
-o-transform:translateX(0px);
-webkit-transition: all 0.4s ease-in-out;
-webkit-transform:translateX(0px);
}

#menu li.effect:hover {
-moz-transform:translateX(25px);
-o-transform:translateX(25px);
-webkit-transform:translateX(25px);
}
</style>

সম্পুর্ন কোডটি নিচের মত হবে

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Dropdown menu</title>
<style type=”text/css”>
/* CSS3 TRANSITION ONLY EFFECT */
#menu {
width:300px;
list-style:none;
padding-top:30px;
display:inline-block;
}

#menu li {
border-radius:3px 3px 3px 3px;
margin-top:5px;
width:150px;
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
background: -o-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111;
border-top:1px solid #111;
border-right:1px solid #333;
border-bottom:1px solid #333;
}

#menu li a {
color:#fff;
display:block;
padding:10px;
}

#menu li a:hover {
color:#00c6ff;
}

#menu li.effect {
-moz-transition: all 0.4s ease-in-out;
-moz-transform:translateX(0px);
-o-transition: all 0.4s ease-in-out;
-o-transform:translateX(0px);
-webkit-transition: all 0.4s ease-in-out;
-webkit-transform:translateX(0px);
}

#menu li.effect:hover {
-moz-transform:translateX(25px);
-o-transform:translateX(25px);
-webkit-transform:translateX(25px);
}
</style>
</head>

<body>
<ul id=”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</body>
</html>
এবার সেভ করুন .html file হিসেবে।

Article Tags:
· ·
Article Categories:
সিএসএস

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Shares