Java Script দিয়ে কম্বো মেনু তৈরী করুন.......

বিসমিল্লাহির রহমানির রাহিম, সবাই কেমন আছেন? অনেক ক্লান্তির মাঝেও বসে পড়লাম টিউন লিখতে, টিউন লিখতে একেবারে ইচ্ছা করে না তারপরে লিখি শুধুমাত্র আপনাদের জন্য...যাই হোক আজকে আপনাদের জন্য জাভা স্ত্রিপটের আরেকটি মজার জিনিস নিয়ে হাজির হয়েছি সেটা হল Java Script দিয়ে কিভাবে কম্বো মেনু তৈরী করবেন...............................................................................




প্রথম পদ্ধতি:-
প্রথমে আমি দুইটি ফাইল আপলোড করে দিয়েছি সেই গুলো ডাউনলোড করে নিন তার পর এই ফাইলটি Extract করে নিন তারপর এর মধ্য যেই দুইটি ফাইল আছে তার একটি রুট ফোল্ডারে রাখুন তারপর আপনার পিসিতে ড্রিমওয়েবার অন করুন তারপর Html এ ক্লিক করে একটি নতুন পেইজ নিন তারপর তা সেভ করুন ঐ রুট ফোল্ডারে অর্থাৎ সেভ করার সময় এই রুট ফোল্ডারটি দেখিয়ে দিন তার পর Code window তে চলে যান তার পর নিচের কোডটি দুই হেডের মাঝে পেস্ট করুন

 
চিত্র:১


<link rel="stylesheet" type="text/css" href="dhtmlcombo.css" />

<script type="text/javascript" src="dhtmlcombo.js">

/***********************************************

* DHTML Select Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>


এর পর Design widow তে চলে যান তার পর এক রো এবং দুই কলাম বিশিষ্ট একটি ট্যাবল নিন Insert-Table এ ক্লিক করুন অথবা Ctrl+Alt+T দিন

 
 চিত্র:২
ট্যাবল নেয়ার পর নিচের কোডটি কপি করুন তার পর ট্যাবলের যেকোন একটি সেলে কার্সর রাখুন অর্থাৎ ক্লিক করুন তারপর Code window তে চলে যান কোথাও ক্লিক না করে কিবোর্ড থেকে Ctrl+V চাপুন (অর্থাৎ কোডটি পেস্ট করুন) নিচে কোডটি দিয়ে দিলাম 


<!-- 1st example -->
<select id="webmaster" title="Web Master">
<option value="http://Tunerpage.com">Tunerpage</option>
<option value="http://www.php.net">PHP.net</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
<option value="http://www.dynamicdrive.com/style/">CSS Menus/ codes</option>
</select>

<script type="text/javascript">
//dhtmlselect("id_of_select_menu", "optional_width_of_select_box_px", "optional_width_of_drop_down_menu_px")
dhtmlselect("webmaster")

</script>


<!-- 2nd example -->
<select id="network" title="Tunerpage site link">
<option value="http://www.google.com">google.com</option>
<option value="http://www.yahoo.com">yahoo.com</option>
<option value="http://www.slashdot.com">SlashDot</option>
<option value="http://www.theregister.co.uk/">The Register</option>
</select>

<script type="text/javascript">
//dhtmlselect("id_of_select_menu", "optional_width_of_select_box_px", "optional_width_of_drop_down_menu_px")
dhtmlselect("network", "190px", "200px")

</script>


বুঝতে অসুবিধা হলে নিচে চিত্র দেখুন


চিত্র:৩


 চিত্র:৪


 চিত্র:৫

 
 চিত্র:৬

 

 চিত্র:৭

 দ্বিতীয় পদ্ধতি:-
আরেকটি সহজ পদ্ধতি যারা ড্রিমওয়েবার ইউজ করেন না বা নাই তাদের জন্য আমার দেয়া ফাইলের মধ্যে  নোডপেডটি অপেন করুন তারপর File-save as এ ক্লিক করুন তারপর index.html নামে সেভ করুন তারপর এইবার সেভ করা ফাইলটি খুলুন দেখুন মজা আপনি খুব সহজেই পেরে গেছেন………….
আজ এই টুকুতে থাক সবাই ভাল থাকুন সুস্থ থাকুন এই কামনায় শেষ করছি আজ...আল্লাহ হাফেজ.......

Safiul Hasan Rejvi

আমি একজন সাধারণ মানুষ ...সাধারণ মানুষ হিসেবে থাকতে চাই সব সময়........

Post a Comment

Previous Post Next Post