عمودی کردن استایل زیرمنوهای یک منوی افقی در قالب وردپرس

انجمن وردپرس › دسته بندی: قالب وردپرس › عمودی کردن استایل زیرمنوهای یک منوی افقی در قالب وردپرس

jebrahim پرسیده شده 3 سال قبل

سلام.
وقت بخیر. من یک قالب وردپرس فارسی دارم که sub menu ها در اون، بصورت ردیفی (افقی ) هستند. می خواهم بصورتی عمودی (ستونی) بشن. باید چیکار کنم؟! اینم کدهای css منوهای قالب:

Start your code here

/*-- منوی اصلی--*/
.main-menu{
line-height:28px;
direction: rtl;
padding-right: 5px;
overflow: hidden;
height:28px;
margin: 0 auto;
width:98%;
background: #fff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.main-menu ul{direction: rtl;margin: 0;padding: 0;}
.main-menu li{direction: rtl;display: inline-block;list-style: none;font-size:16px;font-weight: normal;text-align: center;padding-bottom: 0;height: auto !important;position: unset;height: 30px;margin-bottom: 0;}
.main-menu li.active a{background: none !important;font-size: 15px;color: #f00;font-family: "IRANSansWeb_Light";}
.main-menu li:hover>ul{visibility: visible;opacity: 1;color:#f00;}
.main-menu li a{font-family:"IRANSansWeb_Light";font-size: 12px;}
.main-menu li::after{content: " | ";color: #eee;font-size: 12px;padding-left:2px}
.main-menu li.menu-item-has-children::after{font-family: 'FontAwesome';content: "\f0d7  | ";color: #eee;font-size: 12px;padding-left:2px;float: left;}
.main-menu li>ul>li.menu-item-has-children::after{content: "";}
.main-menu ul>li:nth-last-child(1).menu-item-has-children::after{content: "\f0d7";}
.main-menu li:nth-last-child(1)::after{content: none;}
.main-menu li a{color: #555;padding: 5px;display:inline-block;opacity: 1;text-align: center;line-height:18px}
.main-menu li.menu-item-has-children:hover>a{color:#f00;opacity: 1;}
.main-menu li a:hover{color:#f00;}
.main-menu li>ul>li>a{box-shadow: none !important;}
.main-menu li.menu-item-has-children span.sub-arrow{float: left;margin-left: 0;color: transparent;user-select:none;-moz-user-select:none;-webkit-user-select:none;}
.rotatee{transform: rotate(180deg);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);margin-right: 0;padding-right:0;}
.main-menu li.menu-item-has-children span.sub-arrow::after{font-family: 'FontAwesome';content: "\f0d7";font-size: 12px;color: #eee;}
.main-menu li>ul{position: absolute;margin-top:-4px;background:#fff;border: 1px solid #eee;width:99.5%;visibility: hidden;opacity: 0;transition: 0.2s;-webkit-transition: 0.2s;-moz-transition: 0.2s;z-index: 9999;border-radius: 0;padding: 0;line-height: 30px;right: 0;}
.main-menu li>ul>li>ul{visibility: hidden;opacity: 0;display: block;margin: 0;}
.main-menu li>ul>li:hover>ul{visibility: visible;opacity: 1;float:right;color:#f00;}
.main-menu li>ul>li{display: inline-block !important;line-height: normal;text-align: center;padding-bottom:2px;float:right;}
.main-menu li>ul>li.menu-item-has-children::before{font-family: 'FontAwesome';content: "\f0d7";margin-top: 5px;margin-left: 5px;font-size: 12px;float: left;color: #eee;}
.main-menu li>ul>li:nth-last-child(1).menu-item-has-children::after{display:none;}
.main-menu li>ul>li>a{padding:0 5px;opacity: 0.7;}
.main-menu li>ul>li>a:hover{opacity: 1;color: #f00;}
.main-menu li > ul > li::after{content: " | ";color: #999;font-size: 12px;padding-left:2px}
.main-menu li>ul>li:nth-child(1){}
.main-menu li>ul>li::after{content: none;}
.main-menu li>ul>li>ul{width: 100%;margin: 0 !important;box-sizing: content-box;right: 0;}
.main-menu  li.current-menu-item a {
color: #f00;
}

jebrahim پاسخ داده در 3 سال قبل

بعلاوه اینکه، می خواهم این منو چسبان هم بشه. یعنی وقتی اسکرول می کنم به پایین صفحه، منو بچسبه به بالای صفحه. از افزونه sticky menu هم استفاده کردم اما کار نکرد. ظاهرا با کدهای قالبم سازکار نیست. کد position:fixed هم به استایل منو اضافه کردم اما کلا جای منو رو عوض کرد و چسبوند بالای صفحه! من می خواهم منو جاش توی قالب همین جایی که هست باشه، اما وقتی اسکرول می کنم، یا همین منو و یا یک منوی دیگر مثل همین منو بیاد بالای صفحه بچسبه و وقتی دوباره اسکرول می کنم به اول صفحه، اون منو چسبان محو بشه!
ممنون میشم از دوستان اگر کسی راه حلی داره کمک کنه.

11 پاسخ

0 امتیاز مثبت امتیاز منفی

jebrahim پاسخ داده شده3 سال قبل

0 امتیاز مثبت امتیاز منفی

سپیده جم پاسخ داده شده3 سال قبل

سلام دوسته عزیز به تگ های a کد display:block رو بدین و تگ های display: inline-block را هم \”block\” بدین و امتحان کنید هردو رو . احتمالا درست میشه .اگر هم تمایل دارید آدرسه سایت رو بزارید تا کامل بتونیم بررسی کنیم و کدهای مورد نیاز رو براتون بفرستیم.

jebrahim پاسخ داده در 3 سال قبل

سلام. متوجه نشدم. یعنی هرجایی که تگ a هست رو کد display:block; و هرجایی display: inline-block هست رو به display:block تبدیل کنم!؟

همین کار رو کردم ولی نشد!

یه نکته اینکه منوی اصلی می خواهم مثل تصویر همینطور افقی بمونه ها! زیرمنو ها می خواهم ستونی بشن فقط.

قالب رو دارم روش کار می کنم توی لوکال و هنوز آپلودش نکرده ام.

0 امتیاز مثبت امتیاز منفی

سپیده جم پاسخ داده شده3 سال قبل

سلام گر تمایل دارید همین جا یا اگر هم نه به ایمیلم آدرسه سایتتون رو بفرستید بررسی میکنم براتون --اگر دقیق بخوام بگم احتیاج به برسی کدها هست ایمیل : sepidejam69@gmail.com

jebrahim پاسخ داده در 3 سال قبل

سلام. ممنون. عرض کردم، توی لوکال دارم روش کار می کنم.

0 امتیاز مثبت امتیاز منفی

سپیده جم پاسخ داده شده3 سال قبل

سلام اگر با Inspect کروم آشنایی دارید برید روی زیرمنوها Inspectکنید ببینید کدهای cssچی دادن

jebrahim پاسخ داده در 3 سال قبل

آشنایی دارم. اما کل کدهای css منوها همین هایی هست که ارسال کرده ام

0 امتیاز مثبت امتیاز منفی

سپیده جم پاسخ داده شده3 سال قبل

سلام مجدد واقعیتش رو بگم اینطور سخته یه کم بررسی کردن نمیدوونم به جواب برسیم یا نه اما یه قطعه کدی دارین توی کدهای بالا ".main-menu li.menu-item-has-children span.sub-arrow " این رو برین پیدا کنید float رو بردارین disaplay رو بلاک کنین ببینین میشه و اینکه روی زیرمنوها اینسپکت بزنین ببینین بهتون چی میده مثلا همونجا display :block کنین float رو بردارین امیدوارم مشکلتون حل بشه نهایتا اسمه قالب رو بفرمایید ببینم نمونه اشو پیدا میکنم روش امتحان کنم

0 امتیاز مثبت امتیاز منفی

jebrahim پاسخ داده شده3 سال قبل

سلام. با راهنمایی شما تا یه حدی موفق شدم! ممنون!

اما الان مساله ای که هست:
1- باکس زیر منوها خیلی بزرگه! می خواهم سایزش متناسب باشه
2- می خواهم باکس هر زیر منویی دقیقا زیر منوی والد قرار بگیره!

0 امتیاز مثبت امتیاز منفی

jebrahim پاسخ داده شده3 سال قبل

کدهایی که تغییر دادم:

 
/*-- منوی اصلی--*/
.main-menu{
line-height:28px;
direction: rtl;
padding-right: 5px;
overflow: hidden;
height:28px;
margin: 0 auto;
width:98%;
background: #fff;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.main-menu ul{direction: rtl;margin: 0;padding: 0;}
.main-menu li{direction: rtl;display: inline-block;list-style: none;font-size:16px;font-weight: normal;text-align: center;padding-bottom: 0;height: auto !important;position: unset;height: 30px;margin-bottom: 0;}
.main-menu li.active a{background: none !important;font-size: 15px;color: #f00;font-family: "IRANSansWeb_Light";}
.main-menu li:hover>ul{visibility: visible;opacity: 1;color:#f00;}
.main-menu li a{font-family:"IRANSansWeb_Light";font-size: 12px;}
.main-menu li::after{content: " | ";color: #eee;font-size: 12px;padding-left:2px}
.main-menu li.menu-item-has-children::after{font-family: 'FontAwesome';content: "\f0d7 | ";color: #eee;font-size: 12px;padding-left:2px;float: left;}
.main-menu li>ul>li.menu-item-has-children::after{content: "";}
.main-menu ul>li:nth-last-child(1).menu-item-has-children::after{content: "\f0d7";}
.main-menu li:nth-last-child(1)::after{content: none;}
.main-menu li a{color: #555;padding: 5px;display:inline-block;opacity: 1;text-align: center;line-height:18px}
.main-menu li.menu-item-has-children:hover>a{color:#f00;opacity: 1;}
.main-menu li a:hover{color:#f00;}
.main-menu li>ul>li>a{box-shadow: none !important;}
.main-menu li.menu-item-has-children span.sub-arrow{display:block; margin-left: 0;color: transparent;user-select:none;-moz-user-select:none;-webkit-user-select:none;}
.rotatee{transform: rotate(180deg);-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);margin-right: 0;padding-right:0;}
.main-menu li.menu-item-has-children span.sub-arrow::after{font-family: 'FontAwesome';content: "\f0d7";font-size: 12px;color: #eee;}
.main-menu li>ul{position: absolute;margin-top:-4px;background:#fff;border: 1px solid #eee;width:99.5%;visibility: hidden;opacity: 0;transition: 0.2s;-webkit-transition: 0.2s;-moz-transition: 0.2s;z-index: 9999;border-radius: 0;padding: 0;line-height: 30px;right: 0;}
.main-menu li>ul>li>ul{visibility: hidden;opacity: 0;display: block; margin: 0;}
.main-menu li>ul>li:hover>ul{visibility: visible;opacity: 1;display:block; color:#f00;}
.main-menu li>ul>li{display: block !important;line-height: normal;text-align: right; padding-bottom:2px;}
.main-menu li>ul>li.menu-item-has-children::before{font-family: 'FontAwesome';content: "\f0d7";margin-top: 5px;margin-left: 5px;font-size: 12px; display:block; color: #eee;}
.main-menu li>ul>li:nth-last-child(1).menu-item-has-children::after{display:none;}
.main-menu li>ul>li>a{padding:0 5px;opacity: 0.7;}
.main-menu li>ul>li>a:hover{opacity: 1;color: #f00;}
.main-menu li > ul > li::after{content: " | ";color: #999;font-size: 12px;padding-left:2px}
.main-menu li>ul>li:nth-child(1){}
.main-menu li>ul>li::after{content: none;}
.main-menu li>ul>li>ul{width: 100%;margin: 0 !important;box-sizing: content-box;right: 0;}
.main-menu li.current-menu-item a {
color: #f00;
}

0 امتیاز مثبت امتیاز منفی

سپیده جم پاسخ داده شده3 سال قبل

سلام خواهش میکنم --برای این کار روی همون زیر منو inspectبزنید بعد یا ببینید with داده یا نداده -ببینید با دادن "position " یا اینکه "margin " میتونید جابه جا کنید حواستون به ریسپانسیو بودنشون هم باشه یه سوالتون رو که من یادم بگم بهتون منو استیکی بود که گفتید position:fix داده بودین جاش تغیر کرده بود شما باید دقیقا با دادن leftیا right یا topجاشو مشخص کند .

jebrahim پاسخ داده در 3 سال قبل

ممنون. منتها خیلی تلاش کردم، موفق نشدم.

این لینک دموی قالب هست. پیداش کردم:

http://islamic.demo-qaleb.ir/

0 امتیاز مثبت امتیاز منفی

سپیده جم پاسخ داده شده3 سال قبل

سلام مجدد وقتی روی هرکدوم از منوها برین زیر منوها با تگ ulبا کلاس "submenu" هستن که شما با ارث بری در css اگر آشنا باشید(first-child تا الی آخر) میتونید هرکدوم رو مشخص کنید و به صورت دلخواه دربیارین --تنظیمات قالبتون رو هم یه نگاهی کنید شاید این امکان رو داشته باشه . موفق باشید

jebrahim پاسخ داده در 3 سال قبل

سلام. متاسفانه آشنایی چندانی ندارم. خیلی تلاش کردم. منوها عمودی شد اما همچنان با اینکه زیرمنوی هر منوی والد دقیقا زیر عنوانش قرار بگیره مشکل دارم.
الان همه ی زیر منوها منتها الیه سمت راست منو قرار می گیرند. خیلی کدها رو دستکاری کردم ولی نشد 🙁

بعلاوه اینکه همچنان توی بحث شناور کردن منو مشکل دارم!

نمیشه به یه شکلی یه منوی شناور ایجاد کرد که در حالت اسکرول به بالای صفحه، مخفی بشه و وقتی اسکرول می کنیم پایین، منوی چسبان که به بالای مرورگر چسبیده، ظاهر بشه؟!

0 امتیاز مثبت امتیاز منفی

سپیده جم پاسخ داده شده3 سال قبل

سلام
برای ساختن این منو باید از css,jqاستفاده کنید –اصولا قالب های وردپرسی دارن این تنظیم رو —حالا شما میتونید مثلا از افزونه float menue استفاده کنید و منو شناور درست نید اگر قالب این تنظیم رو نداره ---این سه تا آیتم رو به قسمته "nav" و کلاس "main-menu" بدین یه استیکی منو ساخته میشه اما توی اسکرول به بالا یا پایین هست حذف نمیشه

position: fixed;
top: 0px;
z-index: 97799;

برای اون مشکله منوها هم کارتون رو آنلاین کردین بگین ببینیم چون الان احتمالا شماهم کد اضافه کردین برای این دمو که برای من فرستادین من هرچی بگم ممکنه به مشکل بخوریم این کار شدنیه به شرطی که من سایت شمارو ببینم

0 امتیاز مثبت امتیاز منفی

ادریس شاهی جان پاسخ داده شده3 سال قبل

با سلام دوست عزیز،

در رابطه با منوی چسبان یا Sticky Menu توصیه میکنم این مثال عملی ساده و کاملا واضح را ببینید و حتما کدهای CSS و JavaScript اون رو درک کنید تا بتوانید روی میزان اسکرول و در صورت نیاز موبایل هم این ویژگی رو کنترل کنید:

کلیک کنید

محصول جدیدافزونه پیشرو لاگین

محصول جدید
افزونه پیشرو لاگین