TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে Weebly সাইটে উল্লম্ব নেভিগেশন মেনু যোগ করবেন?

2

Weebly সাইটে উল্লম্ব নেভিগেশন মেনু যোগ করা ব্যবহারকারীদের দ্রুত এবং দরকারী লিঙ্ক প্রদানের একটি সহজ উপায়। এটি একটি উইজেট হতে পারে যা ধারাবাহিকভাবে সব পৃষ্ঠায় সাইডবার হিসেবে রাখা হয় অথবা নির্দিষ্ট পেজে ব্যবহার করা যায় যেখানে আপনি চান বা ব্লগ সাইডবারে ব্যবহার করা যায়। এই নিবন্ধে আমরা মাল্টি-লেভেল সাব-মেনু সহ আপনার ওয়েবলি সাইটে উল্লম্ব মেনু উইজেট যুক্ত করার ধাপে ধাপে প্রক্রিয়াটি ব্যাখ্যা করব। মনে রাখবেন, আপনার থিমের উপর ভিত্তি করে টেক্সট এবং হভার রঙের তারতম্য হতে পারে।

  • নেভিগেশন মেনু উইজেটে সহজ সিএসএস এবং এইচটিএমএল কোড রয়েছে।
  • এটি একটি প্রতিক্রিয়াশীল উইজেট নয়, তাই প্রয়োজনে মাল্টি-লেভেল ব্যবহার করুন। আপনি যদি মোবাইল ব্যবহারকারীদের বা ব্লগ সাইডবারের জন্য লক্ষ্যবস্তু করেন তবে কেবলমাত্র একক স্তরের মেনু ব্যবহার করুন যা দৃশ্যমান এলাকায় ফিট করতে পারে।
  • মেনুর রঙ, প্রস্থ এবং উচ্চতা CSS এ কাস্টমাইজ করা যায়।
  • CSS/HTML পরিবর্তন করে আপনার প্রয়োজন অনুযায়ী অতিরিক্ত মেনু বা সাব-মেনু আইটেম যোগ করা যেতে পারে।
  • আপনি উইজেটটি যতটা চান সেখানে রাখতে পারেন।

"পৃষ্ঠা> একটি পৃষ্ঠা নির্বাচন করুন> এসইও সেটিংস> হেডার কোড " বিভাগের অধীনে নীচের সিএসএস কোডটি অনুলিপি করুন এবং আটকান । যদি আপনি অনেক পৃষ্ঠায় উইজেট যুক্ত করতে চান তাহলে "থিম> এইচটিএমএল / সিএসএস> সম্পদ> প্রধানের অধীনে কোড যোগ করুন। কম "।

ul#navmenu, ul#navmenu li, ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 200px; /*For KHTML*/ list-style: none; } ul#navmenu:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu li { float: left; /*For IE 7 lack of compliance*/ display: block !important; /*For GOOD browsers*/ display: inline; /*For IE*/ position: relative; } /* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; display: block; background: #EEE; color: #666; font: 18px/40px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; } /* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { background: #EEE; color: #666; } /* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; } /* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; } /* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; } ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 200px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; } ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; }

এটি তিনটি স্তরের সাব-মেনুগুলির জন্য এবং আপনি কোডে প্রতিলিপি 3 য় মেনু বিভাগ দ্বারা সাব-মেনু যোগ করতে পারেন।

যে পৃষ্ঠায় আপনি মেনু যোগ করতে চান সেখানে " এম্বেড কোড " উপাদানটির নীচে নীচের HTML কোড যুক্ত করুন:

<ul id="navmenu"> <li><a href="#">Web Design</a></li> <li><a href="#">Hosting Plans &nbsp ›</a> <ul> <li><a href="#">WordPress &nbsp ›</a> <ul> <li><a href="#">First Site</a></li> <li><a href="#">Second Site</a></li> <li><a href="#">Third Site</a></li> <li><a href="#">Fourth Site</a></li> </ul> </li> <li><a href="#">Weebly</a></li> <li><a href="#">Wix</a></li> </ul> </li> <li><a href="#">Site Builder &nbsp ›</a> <ul> <li><a href="#">WordPress &nbsp ›</a> <ul> <li><a href="#">Plan 1</a></li> <li><a href="#">Plan 2</a></li> <li><a href="#">Plan 3</a></li> <li><a href="#">Plan 4</a></li> <li><a href="#">Plan 5</a></li> </ul> </li> <li><a href="#">Weebly &nbsp ›</a> <ul> <li><a href="#">Plan 1</a></li> <li><a href="#">Plan 2</a></li> <li><a href="#">Plan 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Email Plans</a></li> <li><a href="#">Site Security</a></li> </ul>

মেনু বিবরণগুলি প্রতিস্থাপন করুন এবং # আপনার নিজের লিঙ্কগুলি দিয়ে সরান। এছাড়াও আপনার প্রয়োজন অনুযায়ী মেনু এবং সাব-মেনু আইটেম যোগ বা মুছে দিন।

এখন নিচের মত একটি মার্জিত উল্লম্ব মেনু দেখতে আপনার সাইটটি প্রকাশ করুন।

কিভাবে Weebly সাইটে উল্লম্ব নেভিগেশন মেনু যোগ করবেন?

উল্লম্ব নেভিগেশন মেনু উইজেট

দ্রষ্টব্য: একটি অনুভূমিক স্ক্রোল বার থাকবে যদি মেনুর পাশে আরেকটি উপাদান প্রস্থ দখল করে থাকে।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত