আসসালামু‘আলাইকুম কেমন আছেন সবাই? আজ আমি আপনাদের কে দেখাবো কিভাবে css3 দিয়ে চমতকার একটি মেনু তৈরি করা যায়। তবে চলুন শুরু করি।
নিচের কোড টুকু কপি করে .html এক্সটেনসন দিয়ে টেক্সট ফাইলে সেভ করুন।
মেনু টি দেখতে এরোকম হবে
আমি আলাদা কোনো ষ্টাইলসিট ফাইল ব্যাবহার করছিনা। একটা ফাইলের মধ্যেই css ও html কোড লিখছি।
<html>
<head>
<title>Simple CSS3 Menu</title>
<style type="text/css">
ul.navmenu {
background:#fff;
width:250px;
margin:auto;
padding:0;
list-style: none;
overflow:hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}
.navmenu li a {
width:225px;
padding-left:20px;
height:30px;
line-height:30px;
display:block;
overflow:hidden;
position:relative;
text-decoration:none;
font-size:14px;
color:#686868;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.navmenu li a:hover {
background:#efefef;
}
.navmenu li a.profile {
border-left:5px solid #008747;
}
.navmenu li a.messages {
border-left:5px solid #fecf54;
}
.navmenu li a.settings {
border-left:5px solid #cf2130;
}
.navmenu li a.logout {
border-left:5px solid #dde2d5;
}
.navmenu li:first-child a:hover, .navmenu li:first-child a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.navmenu li:last-child a:hover, .navmenu li:last-child a {
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navmenu li a:hover i {
color:#ea4f35;
}
.navmenu i {
margin-right:15px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.navmenu em {
font-size: 10px;
background: #ea4f35;
padding: 3px 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-style: normal;
color: #fff;
margin-top: 17px;
margin-right: 15px;
line-height: 10px;
height: 10px;
float:right;
}
.navmenu li.selected a {
background:#d7ece2;
}
</style>
</head>
<body>
<ul class="navmenu">
<li class="selected"><a class="profile" href="#"><i class="icon-user"></i>Menu Item 1</a></li>
<li><a class="messages" href="#"><i class="icon-envelope-alt"></i>Menu Item 2</a></li>
<li><a class="settings" href="#"><i class="icon-cog"></i>Menu Item 3</a></li>
<li><a class="logout" href="#"><i class="icon-signout"></i>Menu Item 4</a></li>
</ul>
</body>
</html>
লাইভ ডেমো দেখুন এখানে। সাইডবার টি তে এই মেনু ব্যাবহার করা হয়েছে।
Live Demo
এখানে CSS3 এর
-webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear;
কোড ব্যাবহার করা হয়েছে। এটি একটি অনেক কাজের জিনিস এটি JQuery ছাড়াই ট্রান্সলেশন ইফেক্ট দেয়।
এই মেনুটি ব্যাবহার করা হয়েছে alquranbd.com সাইটিতে
আল্লাহ হাফেজ। আবার দেখা হবে ইনশাআল্লাহ।
সময় থাকলে আমাদের অনলাইন প্রোজেক্ট টিতে একবার ঘুড়ে আসবেন আশাকরি ভালো লাগবে।
আমি অপঠিত দৈনিকী। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 9 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 14 টি টিউন ও 50 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
@ওয়ার্ডপ্রেস এক্সপার্ট: এগুলো বিভিন্ন ব্রাউজারে আলাদা ব্রাউজার ইঞ্জিনের স্যান্টেক্স। মজিলার syntex ব্যাবহার না করলে সমস্যা হয় না তবে কম শক্তিশালী ইঞ্জিন ওয়ালা ব্রাউজার যেমোন ইন্টারনেট এক্সপ্লোরার এসব syntex ব্যাবহার না করলে সমস্যা হয়ে পারে। কোড লেখার সময় border-radius: 5px ও -moz-border-radius: 5px; দুটোই ব্যাবহার করা হয় যাতে কোনো অবস্থাতেই পেজ css এ সমস্যা না হয়
@ ওয়ার্ডপ্রেস_এক্সপার্ট:
-webkit-,-moz-, এগুলো সাধারানত ব্রাউজার সাপোর্ট এর জন্য দেয়া হয়।
আপনি যদি moz না দেন তাহলে ওই ইফেক্ট মজিলাতে সাপোর্ট করবে না।
এটা মূলত CSS3 এর ইলিমেন্ট। CSS3 এর ইফেক্টগুলো সরাসরি সবব্রাউজারে সাপোর্ট করে না। তাই এটা ব্যাবহ্রত হয়। আপনি নিচে লিংকে আরো বিস্তারিত পাবেন।
http://www.w3schools.com/css/css3_borders.asp
আপনার টিউন টি পড়ে ভাল লাগল। কিন্তু কিভাবে বাংলায় html পেইজ বানাব তা বললে অনেক উপকৃত হতাম।
@মোঃ মমিনুল ইসলাম খান: এজন্য জেকুয়েরি লাগবে। সবচেয়ে সহজ বুদ্ধি হলো সার্চ দিয়ে একটি সাবমেনু ওয়ালা মেনু ডাউনলোড করে তার css এর সাথে এই মেনুর css গুলো একটু বুদ্ধহি খাটিয়ে রিপ্লেস করে দিন
@মোঃ মমিনুল ইসলাম খান: html পেজ বানাতে একটি টেক্সট ফাইলে এই কোড লিখে সেভ করুন তার পর ফাইল্টি রিনেম করে শেষে থেকে .txt বাদ দিয়ে .html লিখে সেইভ করুন
@অপঠিত দৈনিকী: আপনি বোধ হয় আমার প্রশ্নটি ঠিক মত বুঝতে পারেন নি? আমি ফাইলের এক্সটেনশন চেঞ্জ করে Html করে ফাইল সেভ করতে পারি। তাছাড়া, আমি বেসিক html ও Css ও পারি কথা হল। টেক্স এডিটরে বাংলায় ওয়েব পেইজ বানাতে পারিনা। কিভাবে বাংলায় পেইজ বানাব তা জানা থাকলে বলেন।
@মোঃ মমিনুল ইসলাম খান: ফাইল সেইভ করার সময় এঙ্কোডিং utf-8 দেবেন। নোট প্যাড ++ এ সরাসরি বাংলা লেখা যায়। তাছাড়া আপনি বাবগ্লা অক্ষরের হেক্স ভ্যালু ব্যাবহার করে ও বাংলা দেখাতে পারেন।
@মোঃ মমিনুল ইসলাম খান: @নীলোৎপল বেদী: এজন্য জেকুয়েরি লাগবে। সবচেয়ে সহজ বুদ্ধি হলো সার্চ দিয়ে একটি সাবমেনু ওয়ালা মেনু ডাউনলোড করে তার css এর সাথে এই মেনুর css গুলো একটু বুদ্ধহি খাটিয়ে রিপ্লেস করে দিন
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
ভাইয়া ,আমি ক্লাস ৮ এ পরি ,Html পারি এবং css ও হাল্কা পারি ,একটু একটা সমাধান দিবেন, এইখানে -webkit-border-radius: 5px;
-moz-border-radius: 5px; এরবদলে খালি border-radius: 5px দিলে হবে না?