رفتن به مطلب

ساخت منوی ریسپانسیو به صورت drop down list


hellow

پست های پیشنهاد شده

سلام دوستان میخواستم ببیبنم راه های ساخت منو های مثل سایت http://www.p30world.com/ که وقتی سایز صفحه کم میشه به صورت drop down list نشون میده چیه

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

لینک به ارسال

اگر فقط برای منو میخواهید این امکان رو اضافه کنید

کافیه در انتهای کد های سی اس اس قالبتون این کد رو اضافه کنید


/* Portrait tablet to landscape and desktop */
@media (max-width: 768px) {
.menu {

}
}

حالا میتونین اندازه های متفاوت نمایشگر ها رو وارد کنید و نسبت به اون کد مورد نظر منو رو قرار بدین

لینک به ارسال

درود.

ایتدا جی کوئری زیر و به جای .top-nav کلاس خودتون رو قرار بدید:


jQuery("<select />").appendTo(".top-nav");
jQuery("<option />", {
"selected": "selected",
"value" : "",
"text" : "برو به"
}).appendTo(".top-nav select");
jQuery(".top-nav ul li a").each(function() {
var el = jQuery(this);
jQuery("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo(".top-nav select");
});
jQuery(".top-nav select").change(function() {
window.location = jQuery(this).find("option:selected").val();
});

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


.top-nav select{display:none}

سپس در مدیا کوئری خود برای اندازه مورد نظر وارد کنید :


.top-nav ul{display:none}
.top-nav select{dipslay:block;width:50%;margin:5px auto;background:#eaeaea;color:#000}

لینک به ارسال

درود.

ایتدا جی کوئری زیر و به جای .top-nav کلاس خودتون رو قرار بدید:


jQuery("<select />").appendTo(".top-nav");
jQuery("<option />", {
"selected": "selected",
"value" : "",
"text" : "برو به"
}).appendTo(".top-nav select");
jQuery(".top-nav ul li a").each(function() {
var el = jQuery(this);
jQuery("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo(".top-nav select");
});
jQuery(".top-nav select").change(function() {
window.location = jQuery(this).find("option:selected").val();
});

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


.top-nav select{display:none}

سپس در مدیا کوئری خود برای اندازه مورد نظر وارد کنید :


.top-nav ul{display:none}
.top-nav select{dipslay:block;width:50%;margin:5px auto;background:#eaeaea;color:#000}

ممنون اونجوری که میخواستم شد فقط یه مشکل داره اونم اونه که منو های زیر مجموعه رو عادی نشون میده کد رو باید چیکار کرد که برای زیر مجموعه ها یک فلش قبلش باشه

لینک به ارسال

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


jQuery("<select />").appendTo(".top-nav");
jQuery("<option />",{
selected:"selected",value:"",
text:"برو به"
})
.appendTo(".top-nav select");
jQuery(".top-nav ul li a").each(function(){
var e=jQuery(this).parents("ul").length-1;var t="";if(e>0){t=" - "}if(e>1){t=" - - "}if(e>2){t=" - - -"}if(e>3){t=" - - - -"}
var n=jQuery(this).children("a");
jQuery("<option />",{
value:n.attr("href"),text:t+n.text()}).appendTo(".top-nav select")});
jQuery(".top-nav select").change(function(){window.location=jQuery(this).find("option:selected").val()
});

لینک به ارسال

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


jQuery("<select />").appendTo(".top-nav");
jQuery("<option />",{
selected:"selected",value:"",
text:"برو به"
})
.appendTo(".top-nav select");
jQuery(".top-nav ul li a").each(function(){
var e=jQuery(this).parents("ul").length-1;var t="";if(e>0){t=" - "}if(e>1){t=" - - "}if(e>2){t=" - - -"}if(e>3){t=" - - - -"}
var n=jQuery(this).children("a");
jQuery("<option />",{
value:n.attr("href"),text:t+n.text()}).appendTo(".top-nav select")});
jQuery(".top-nav select").change(function(){window.location=jQuery(this).find("option:selected").val()
});

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

لینک به ارسال

به این صورت تست کنید کلاس خودتون رو جای کلاس های بنده قرار بدید


jQuery("<select />").appendTo(".nav-primary");
jQuery("<option />",{
selected:"selected",
value:"",
text:"برو به"
}).appendTo(".nav-primary select");
jQuery(".nav-primary li").each(function(){
var e=jQuery(this).parents("ul").length-1;var t="";
if(e>0){t=" - "}
if(e>1){t=" - - "}
if(e>2){t=" - - -"}
if(e>3){t=" - - - -"}
var n=jQuery(this).children("a");
jQuery("<option />",{
value:n.attr("href"),text:t+n.text()}).appendTo(".nav-primary select")});
jQuery(".nav-primary select").change(function(){
window.location=jQuery(this).find("option:selected").val()
});

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

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

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...