মেনুবারে গ্রোয়িং ইফেক্ট যুক্ত করবেন যেভাবে।

আসসালামু আলাইকুম। সবাইকে সিএসএস ট্রিক্স এ স্বাগতম। গত টিউটোরিয়ালে দেখিয়েছিলাম কিভাবে খাজকাটা বর্ডার তৈরি করা যায় সিএসএস দিয়ে। এবার দেখাবো কিভাবে সিএসএস৩ এর মাধ্যমে মেনুবারে বা নেভিগেশন বারে সহজে গ্রোয়িং ইফেক্ট যুক্ত করা যায়। অর্থাৎ মেনুতে যে সাবমেনুর উপর এ মাউস রাখব সেটাই উপরে উঠে আসবে বা ভেসে উঠবে উপরে অর্থাৎ হভার ইফেক্ট। এক্ষেত্রে আলাদা ব্রাউজারের জন্য আলাদা কোড দিতে হয়।

সাধারণত নিচের ইমেজের মত দেখাবে মেনুটি-

before

হোম এর উপরে মাউস রাখলে সেটা উপরে নিচের ছবির মত উঠে আসবে-

menu
গ্রোয়িং ইফেক্ট এর জন্য নিচের কোড দিতে হবে-

[css]
.grower {
display: block;
margin: 0 auto;
width: 120px;
padding: 2px 5px;
border: 1px solid #2f2626;

background: #99cc00;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.grower:hover {
background: #009900;
border-color: rgba(237,95,0,1.0);

-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);

-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}[/css]

উপরের কোডে ব্যবহৃত  -moz-…….. কোডগুলো মজিলায় প্রদর্শনের জন্য আর  -webkit-… কোডগুলো গুগল ক্রোমে প্রদর্শনের জন্য।
এবার মেনুর সকল কোড একসাথে লিখলাম। নিচে দেখুন –

[css]<html><head><style>
ul li{display: block;
margin: 0 auto;
width: 120px;
padding: 2px 5px;
border: 1px solid #2f2626;}
ul li a{text-decoration:none;}
a:link{ color:#660000;}
a:hover{ color:#fff;}
.grower {
display: block;
margin: 0 auto;
width: 120px;
padding: 2px 5px;
border: 1px solid #2f2626;

background: #99cc00;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.grower:hover {
background: #009900;
border-color: rgba(237,95,0,1.0);

-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);

-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style></head>
<body>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">buy Widget</a></li>
<li><a href="#">About widget </a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">the Grind</a></li>
</ul>

</body></html>[/css]

উপরের কোডগুলো কপি করে নোটপ্যাডে নিয়ে grower.html দিয়ে সেভ করুন। ব্রাউজারে ওপেন করে দেখুন।
ডেমো দেখুন এখানে

Leave a Comment