وقت بخیر. من یک قالب وردپرس فارسی دارم که 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 هست رو به display:block تبدیل کنم!؟
همین کار رو کردم ولی نشد!
یه نکته اینکه منوی اصلی می خواهم مثل تصویر همینطور افقی بمونه ها! زیرمنو ها می خواهم ستونی بشن فقط.
قالب رو دارم روش کار می کنم توی لوکال و هنوز آپلودش نکرده ام.
سلام. ممنون. عرض کردم، توی لوکال دارم روش کار می کنم.
آشنایی دارم. اما کل کدهای css منوها همین هایی هست که ارسال کرده ام
سلام. با راهنمایی شما تا یه حدی موفق شدم! ممنون!
اما الان مساله ای که هست:
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; }
ممنون. منتها خیلی تلاش کردم، موفق نشدم.
این لینک دموی قالب هست. پیداش کردم:
سلام. متاسفانه آشنایی چندانی ندارم. خیلی تلاش کردم. منوها عمودی شد اما همچنان با اینکه زیرمنوی هر منوی والد دقیقا زیر عنوانش قرار بگیره مشکل دارم.
الان همه ی زیر منوها منتها الیه سمت راست منو قرار می گیرند. خیلی کدها رو دستکاری کردم ولی نشد 🙁
بعلاوه اینکه همچنان توی بحث شناور کردن منو مشکل دارم!
نمیشه به یه شکلی یه منوی شناور ایجاد کرد که در حالت اسکرول به بالای صفحه، مخفی بشه و وقتی اسکرول می کنیم پایین، منوی چسبان که به بالای مرورگر چسبیده، ظاهر بشه؟!
سلام
برای ساختن این منو باید از css,jqاستفاده کنید –اصولا قالب های وردپرسی دارن این تنظیم رو —حالا شما میتونید مثلا از افزونه float menue استفاده کنید و منو شناور درست نید اگر قالب این تنظیم رو نداره ---این سه تا آیتم رو به قسمته "nav" و کلاس "main-menu" بدین یه استیکی منو ساخته میشه اما توی اسکرول به بالا یا پایین هست حذف نمیشه
- position: fixed;
- top: 0px;
- z-index: 97799;
برای اون مشکله منوها هم کارتون رو آنلاین کردین بگین ببینیم چون الان احتمالا شماهم کد اضافه کردین برای این دمو که برای من فرستادین من هرچی بگم ممکنه به مشکل بخوریم این کار شدنیه به شرطی که من سایت شمارو ببینم
- در رابطه با منوی چسبان یا Sticky Menu توصیه میکنم این مثال عملی ساده و کاملا واضح را ببینید و حتما کدهای CSS و JavaScript اون رو درک کنید تا بتوانید روی میزان اسکرول و در صورت نیاز موبایل هم این ویژگی رو کنترل کنید:
کلیک کنید
لطفا وارد شوید یا ثبت نام کنید برای ارسال پاسخ
بعلاوه اینکه، می خواهم این منو چسبان هم بشه. یعنی وقتی اسکرول می کنم به پایین صفحه، منو بچسبه به بالای صفحه. از افزونه sticky menu هم استفاده کردم اما کار نکرد. ظاهرا با کدهای قالبم سازکار نیست. کد position:fixed هم به استایل منو اضافه کردم اما کلا جای منو رو عوض کرد و چسبوند بالای صفحه! من می خواهم منو جاش توی قالب همین جایی که هست باشه، اما وقتی اسکرول می کنم، یا همین منو و یا یک منوی دیگر مثل همین منو بیاد بالای صفحه بچسبه و وقتی دوباره اسکرول می کنم به اول صفحه، اون منو چسبان محو بشه!
ممنون میشم از دوستان اگر کسی راه حلی داره کمک کنه.