انجمن وردپرسدسته بندی: قالب وردپرسعمودی کردن استایل زیرمنوهای یک منوی افقی در قالب وردپرس
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 پاسخ
jebrahim پاسخ داده شده3 سال قبل
سپیده جم پاسخ داده شده3 سال قبل
سلام دوسته عزیز به تگ های a کد  display:block  رو بدین و  تگ های  display: inline-block  را هم  \”block\” بدین و امتحان کنید هردو رو .  احتمالا درست میشه .اگر هم تمایل دارید آدرسه سایت رو بزارید تا کامل بتونیم بررسی کنیم و کدهای مورد نیاز رو براتون بفرستیم.    
jebrahim پاسخ داده در 3 سال قبل

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

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

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

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

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

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

سپیده جم پاسخ داده شده3 سال قبل
سلام  اگر با Inspect کروم آشنایی دارید  برید روی زیرمنوها Inspectکنید ببینید کدهای cssچی دادن  
jebrahim پاسخ داده در 3 سال قبل

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

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

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

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

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;
}
سپیده جم پاسخ داده شده3 سال قبل
سلام  خواهش میکنم --برای این کار روی همون زیر منو inspectبزنید بعد یا   ببینید with داده یا نداده -ببینید با دادن "position " یا اینکه "margin " میتونید جابه جا کنید حواستون به ریسپانسیو بودنشون هم باشه یه سوالتون رو که من یادم  بگم بهتون منو استیکی بود که گفتید position:fix   داده بودین  جاش تغیر کرده بود شما  باید دقیقا با دادن leftیا right یا topجاشو مشخص کند .
jebrahim پاسخ داده در 3 سال قبل

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

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

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

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

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

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

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

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

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

  1. position: fixed;
  2. top: 0px;
  3. z-index: 97799;

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

ادریس شاهی جان پاسخ داده شده3 سال قبل
با سلام دوست عزیز،
  • در رابطه با منوی چسبان یا Sticky Menu توصیه میکنم این مثال عملی ساده و کاملا واضح را ببینید و حتما کدهای CSS و JavaScript اون رو درک کنید تا بتوانید روی میزان اسکرول و در صورت نیاز موبایل هم این ویژگی رو کنترل کنید:

    کلیک کنید
دسته بندی:برچسب ها: