প্রজাপতি

রেজিষ্টেশন করার জন্য আপনার নাম দিন

অথবা

Loding.....

হায় ! আমি মাজেদ, ট্রিপল-এম এটা আমার সংক্ষিপ্ত নাম। আমি সব সময় নতুন কিছু শিখার আগ্রহে থাকি কারন আমি তেমন কিছু জানিনা । তার জন্য আমি প্রজাপতিবিডি ডট কম এ একজন এডিটোর হিসাবে আ্ছি । আপনাদেন কাছ থেকে কিছু শিখার আশায় আশা করি আপনারা আমাকে সহযোগিতা করবেন। ধন্যবাদ !

kjdfklsdjfklasdjfkljasdkfjksdfj

যোগদানের তারিখঃ 09, Jun 2013 ইমেইলঃ majad.shohagh@gmail.com    

WordPress Mega Menu Tutorial 10 months Ago, June 5, 2016

WordPress Mega Menu Tutorial

লিখেছেনঃ
Loding.....
, June 5, 2016, 1:29 pm ওপেন সোর্স,ওয়ার্ডপ্রেস,ওয়েব ডিজাইন দেখা হয়েছে 412 বার 2 জন 600

Hello, Dear WordPress Developers, যারা wordpress mega menu বানাতে চান এবং কোন plugins এর সাহায্য ছাড়া তাদের জন্য এই পোষ্ট । এবার আমি আপনাকে দেখাবো কিভাবে  wordpress mega menu বানাতে হয় কোন রকম plugins এর সাহায্য ছাড়া Screenshot_5প্রথমে আপনাকে কিছু Categories Add করে নিন ।

তার পর Menu তে যান Image এর মত তৈরী করুন  Screenshot_2

এর পর আপনি যেই টাকে Headline হিসাবে ব্যবহার করতে চান তা নিচের Image টা দেখুন Screenshot_4

এর পর আপনাকে header.php তে এই function টা add করতে হবে look like images

2016-06-05_133501

এর পর শুধু এই কোড গুলু Add করুন ব্যাস হয়ে গেল আপনার Mega Manu/* Navigation Menu */

.main-navigation {
width: 100%;
float: left;
background-color: #228b22;
}

.main-navigation ul {
background-color: black;
margin: 0;
padding: 0;
position: relative;
width: 990px;
}

.main-navigation ul li {
list-style: none;
float: left;
}

.main-navigation ul li ul {
display: none;
float: left;
left: 0;
position: absolute;
width: 97%;
}

.main-navigation ul li ul li ul {
width: 100%;
}

.main-navigation ul li:hover ul{
display: block;
}

.main-navigation ul li ul li {
float: left;
position: relative;
width: 25%;
}

.main-navigation ul li ul li ul li {
float: left;
margin: 0;
padding: 0;
width: 100%;
}

.main-navigation ul li ul li a{
background-color: silver;
text-decoration: none;
color: #000;
display: block;
padding: 10px;
border-bottom: 1px solid #f00;
margin: 0 1px;

}

.main-navigation ul li a {
background-color: #000;
text-decoration: none;
color: #fff;
display: block;
padding: 10px;
border-left: 1px solid #fff;
}

.main-navigation ul li a:hover {
background-color: #f00;
text-decoration: none;
color: #fff;
display: block;
padding: 10px;
}

 

2 টি কমেন্ট “ WordPress Mega Menu Tutorial” পোষ্টে

  1. jahid

    ভালই কিন্তু অনেক ঝামেলার জিনিস অনেক সহজ ভাবে বলার জন্য ধন্যবাদ।

Leave a Reply

Your email address will not be published. Required fields are marked *

বিজয়
ইউনিজয়
ফোনেটিক
ইংলিশ