tt তে এটা আমার প্রথম টিউন । আশা করি ভুল গুলো ধরিয়ে দিবেন । গত এক মাস ধরে আমি ওয়েব ডিসাইন শিখতেছি । কিছুদিন আগে আমি
dropdown menu বানানোর টিউটোরিয়াল খুজছিলাম tt তে । এ বিষয়ে একটা টিউন পেয়েছিলাম কিন্তু সেটা একটু বড় টিউন ছিল । যা আমার গোবর মারকা মাথায় কিছুতেই ঢুকাতে পারছিলাম না । তবে অনেক চেস্টার পর আমি এটা শিখতে পেরেছি । এ জন্য ঐ টিউনার ভাই কে অনেক ধন্যবাদ । এরপর ও আমি টিউন টা করছি যাতে আমার মত নতুন শিক্ষনবিশরা সহজেই শিখতে পারেন ।
নিচে html এবং css code গুলি দিলাম । copy করে notepad এ paste করে page.html নামে save করুন ।
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li ul { display:none;} /*--for hiding dropdown menu item --*/
li:hover ul{ display:block;} /*--for showing dropdown menu item (hover)--*/
ul{padding: 0px; } /*--for stright below menu item--*/
li{ display:block; /*--for removing bullets--*/
float:left; /*--for horizontal line--*/
width:150px; /*--for menu width--*/
background-color:pink; /*--for normal background--*/
text-align:center;} /*--for text alignment--*/
a{ text-decoration:none; /*--for removing underline from link--*/
font-family:verdana; /*--for font style--*/
display:block; /*--for link to cover menu width--*/
padding:5px;} /*--for padding menu item (link)--*/
li a:hover{ color:lime; /*--for hover text color--*/
background-color:red;} /*--for hover background color--*/
div{background-color:black;
width:600px;
height:200px; /*--please select hide and width as you need--*/
margin-left:100px;
margin-top:100px;} /*--for positioning navigation menu bar on page--*/
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">search</a>
<ul>
<li><a href="#">google</a></li>
<li><a href="#">yahoo</a></li>
<li><a href="#">bing</a></li>
</ul>
</li>
<li><a href="#">blog</a>
<ul>
<li><a href="#">techtunes</a></li>
<li><a href="#">tunerpage</a></li>
<li><a href="#">pchelpline</a></li>
</ul>
</li>
<li><a href="#">cartoon</a>
<ul>
<li><a href="#">tom & jerry</a></li>
<li><a href="#">pink panther</a></li>
<li><a href="#">ben 10</a></li>
</ul>
</li>
<li><a href="#">sports</a>
<ul>
<li><a href="#">cicket</a></li>
<li><a href="#">football</a></li>
<li><a href="#">tennis</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
ব্যাখ্যা করার ইচ্ছা ছিল , কিন্তু সেহরির সময় হয়ে গেল । সবাই ভাল থাকবেন ।
**যারা জানেন তাদের প্রতি অনুরোধ , দয়া করে আমার ভুল থাকলে ধরিয়ে দিবেন এবং ভাল পরামর্শ দিবেন **
আমি amansdpr। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 2 টি টিউন ও 16 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
ভাই ডিসাইন কেন শিখতেছেন ডিজাইন শিখুন না (ডিজাইন বানান ভুল তাই একটু মজা করলাম আরকি )
আপনার মেনুটির CODING ভাল হয়েছে তবে যদি ভাল ডিজাইনার হতে চান তবে color ব্যবহারের এর প্রতি
সচেতন হোন । আপনার মেনুর color combination দেখে visitor দৌড়ে পালাবে !
আমি আসলে বাংলা লিখতে পারিনা এখন ও । বানান ভুলটা আমার চোখে যে পড়েনি তা নয় , কিন্তু অভ্যস্ত না হলে যা হয় । ঠিক করতে করতে শেষে ওভাবেই ছেরে দিয়েছি । আর color er কথা বলছেন … color এর কথা আমি ভাবিনি, শুধু নিয়ম টা দেখাতে চেয়েছি । এটাত just একটা practice. সাইট বানানোর সময় ইচ্ছে মত color আপনি add করতে পারবেন । তাই না ।
sorry , reply dite giye comment kore felesi. tobe “shopnobadi sifat” vai. apnar post ta thekei ami dropdown menu ta banano sikhesi.
apni ekon ki shiksen, ta jodi bolten tahole valo hoy.
ami javascrip e pa diye felesi. jodio html , css aro kototuku sekha dorkar ta janina.
tobuo overall web design bepar tar shate porichito hote chassi r ki. please guide korben amake.
@amansdpr: ভাই শুনে ভাল লাগল যে আমার মত অথর্ব্যের টিউন আপনার কাজে লেগেছে । আমি এখন HTML , XHTMLও JAVASCRIPT এর basic শেষ করে OBJECT এর কাজ শিখছি ।
আপনি যদি শুধুমাত্র web designer হতে চান তাহলে আপনাকে javascript শেষকরার পর JQUERY , HTML5 ও CSS3 শেখার পরামর্শ দিব ।
আর যদি আপনি wed developer হতে চান তাহলে আপনাকে javascript শেষ করার পর JQUERY , PHP , MYSQL , Worpress/ Magento শেখার পরামর্শ দিব । আর দক্ষতা বাড়ানোর জন্য HTML5 ও CSS3 ও শিখতে পারেন ।
@স্বপ্নবাদী সিফাত: vai othorboer tune to othorber oi kaje lagbe . . .( hehe vai mone kisu niyen na. ektu fun korlam. karon ami othorbo holeo apni othorbo na.. . .)
apnar adivce er jonno thanks. r apnar kisu kajer sample amake email korle khuboi upokrito hotam. karon ami bujte parsina html css koto tuku shiklam. mane practice korte partesina.
apnar sample pele expriment korte parbo.
email: [email protected]
@amansdpr: ভাই আমিও আপনার মত আন্ধা মানুষ । কুল কিনারা কিনারা খুঁইজা পাইতেছিলাম না তাই নিজেকে যাচাই করার জন্য কিছু STATIC HTML TEMPLATE download করে experiment চালাইছিলাম । সেগুলোর কোডিং আমরা যারা নতুন তারা সহজেই বুঝতে পারব । সেগুলো আপনাকে মেইল করতেছি ।
dropdown মেনু-র নিচে যেই content থাকবে, hover-এ সেটা নিচে চলে আসবে অর্থাৎ dropdown মেনু display হলে সেটা তার নিচের content-কে জুড়-পূর্বক নিচে ঠেলে দিবে। positioning-টা ভাল করে বুঝে নেন। একটু কোড অ্যাড করে নিন, ঠিক হয়ে যাবে…
li ul {
display:none;
position:absolute;
}
li:hover ul{
display:block;
width:100px;
}