وقت بخیر. من یک قالب وردپرس فارسی دارم که 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;
}
به تگ های a کد display:block رو بدین و تگ های display: inline-block را هم \”block\” بدین و امتحان کنید هردو رو . احتمالا درست میشه .اگر هم تمایل دارید آدرسه سایت رو بزارید تا کامل بتونیم بررسی کنیم و کدهای مورد نیاز رو براتون بفرستیم.
سلام. متوجه نشدم. یعنی هرجایی که تگ a هست رو کد display:block; و هرجایی display: inline-block هست رو به display:block تبدیل کنم!؟
همین کار رو کردم ولی نشد!
یه نکته اینکه منوی اصلی می خواهم مثل تصویر همینطور افقی بمونه ها! زیرمنو ها می خواهم ستونی بشن فقط.
قالب رو دارم روش کار می کنم توی لوکال و هنوز آپلودش نکرده ام.
گر تمایل دارید همین جا یا اگر هم نه به ایمیلم آدرسه سایتتون رو بفرستید بررسی میکنم براتون –اگر دقیق بخوام بگم احتیاج به برسی کدها هست
ایمیل : sepidejam69@gmail.com
سلام. ممنون. عرض کردم، توی لوکال دارم روش کار می کنم.
اگر با Inspect کروم آشنایی دارید برید روی زیرمنوها Inspectکنید ببینید کدهای cssچی دادن
آشنایی دارم. اما کل کدهای css منوها همین هایی هست که ارسال کرده ام
واقعیتش رو بگم اینطور سخته یه کم بررسی کردن نمیدوونم به جواب برسیم یا نه اما یه قطعه کدی دارین توی کدهای بالا
“.main-menu li.menu-item-has-children span.sub-arrow ” این رو برین پیدا کنید float رو بردارین disaplay رو بلاک کنین ببینین میشه و اینکه روی زیرمنوها اینسپکت بزنین ببینین بهتون چی میده مثلا همونجا display :block کنین float رو بردارین
امیدوارم مشکلتون حل بشه نهایتا اسمه قالب رو بفرمایید ببینم نمونه اشو پیدا میکنم روش امتحان کنم
سلام. با راهنمایی شما تا یه حدی موفق شدم! ممنون!
اما الان مساله ای که هست:
1- باکس زیر منوها خیلی بزرگه! می خواهم سایزش متناسب باشه
2- می خواهم باکس هر زیر منویی دقیقا زیر منوی والد قرار بگیره!
کدهایی که تغییر دادم:
/*-- منوی اصلی--*/ .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; }
خواهش میکنم –برای این کار روی همون زیر منو inspectبزنید بعد یا ببینید with داده یا نداده
-ببینید با دادن “position ” یا اینکه “margin ” میتونید جابه جا کنید
حواستون به ریسپانسیو بودنشون هم باشه
یه سوالتون رو که من یادم بگم بهتون منو استیکی بود که گفتید position:fix داده بودین جاش تغیر کرده بود شما باید دقیقا با دادن leftیا right یا topجاشو مشخص کند .
ممنون. منتها خیلی تلاش کردم، موفق نشدم.
این لینک دموی قالب هست. پیداش کردم:
وقتی روی هرکدوم از منوها برین زیر منوها با تگ ulبا کلاس “submenu” هستن که شما با ارث بری در css اگر آشنا باشید(first-child تا الی آخر) میتونید هرکدوم رو مشخص کنید و به صورت دلخواه دربیارین –تنظیمات قالبتون رو هم یه نگاهی کنید شاید این امکان رو داشته باشه .
موفق باشید
سلام. متاسفانه آشنایی چندانی ندارم. خیلی تلاش کردم. منوها عمودی شد اما همچنان با اینکه زیرمنوی هر منوی والد دقیقا زیر عنوانش قرار بگیره مشکل دارم.
الان همه ی زیر منوها منتها الیه سمت راست منو قرار می گیرند. خیلی کدها رو دستکاری کردم ولی نشد 🙁
بعلاوه اینکه همچنان توی بحث شناور کردن منو مشکل دارم!
نمیشه به یه شکلی یه منوی شناور ایجاد کرد که در حالت اسکرول به بالای صفحه، مخفی بشه و وقتی اسکرول می کنیم پایین، منوی چسبان که به بالای مرورگر چسبیده، ظاهر بشه؟!
سلام
برای ساختن این منو باید از css,jqاستفاده کنید –اصولا قالب های وردپرسی دارن این تنظیم رو —حالا شما میتونید مثلا از افزونه float menue استفاده کنید و منو شناور درست نید اگر قالب این تنظیم رو نداره —این سه تا آیتم رو به قسمته “nav” و کلاس “main-menu” بدین یه استیکی منو ساخته میشه اما توی اسکرول به بالا یا پایین هست حذف نمیشه
- position: fixed;
- top: 0px;
- z-index: 97799;
برای اون مشکله منوها هم کارتون رو آنلاین کردین بگین ببینیم چون الان احتمالا شماهم کد اضافه کردین برای این دمو که برای من فرستادین من هرچی بگم ممکنه به مشکل بخوریم این کار شدنیه به شرطی که من سایت شمارو ببینم
- در رابطه با منوی چسبان یا Sticky Menu توصیه میکنم این مثال عملی ساده و کاملا واضح را ببینید و حتما کدهای CSS و JavaScript اون رو درک کنید تا بتوانید روی میزان اسکرول و در صورت نیاز موبایل هم این ویژگی رو کنترل کنید:
لطفا وارد شوید یا ثبت نام کنید برای ارسال پاسخ
پاسخ داد 2 سال قبل
بعلاوه اینکه، می خواهم این منو چسبان هم بشه. یعنی وقتی اسکرول می کنم به پایین صفحه، منو بچسبه به بالای صفحه. از افزونه sticky menu هم استفاده کردم اما کار نکرد. ظاهرا با کدهای قالبم سازکار نیست. کد position:fixed هم به استایل منو اضافه کردم اما کلا جای منو رو عوض کرد و چسبوند بالای صفحه! من می خواهم منو جاش توی قالب همین جایی که هست باشه، اما وقتی اسکرول می کنم، یا همین منو و یا یک منوی دیگر مثل همین منو بیاد بالای صفحه بچسبه و وقتی دوباره اسکرول می کنم به اول صفحه، اون منو چسبان محو بشه!
ممنون میشم از دوستان اگر کسی راه حلی داره کمک کنه.