استفاده از منوی select در حال رسپانسیو

[alimir 795]

سلام دوستان.

در حال توسعه ی قالب امیران 98 به حالت رسپانسیو هستم.

تنها مشکل فرم رسپانسیو منوهاست...

چطور میتونم با یک دستور شرطی وقتی سایز مرورگر به یک اندازه ی خاصی رسید از حالت select برای منوها استفاده کنم؟!؟

[mehral 785]

اینجا یه نمونه برات ساختم

http://jsbin.com/oxusuy/1

[alimir 795]

خیلی ممنونم مهرال جان فقط یه مشکلی دارم که محتوای منوها رو داخل select نشون نمیده!!!

نام توابع و تغییرات اعمال شده در کدها به شرح زیره:

<div class="main-menu">
<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' =>'', 'menu_class' =>'topnav' ) ); ?>
</div>

$(document).ready(function($) {

  $("<select />", {
    'class': 'nav-option'
  }).appendTo(".main-menu");

  $('.main-menu .main-menu li').each(function() {
    var el = $(this), cur_link = el.children('a');
    if (!el.parent('ul').hasClass('children')) {
	  $('<option />', {
	    'value'   : cur_link.attr('href'),
	    'text'    : cur_link.text()
	  }).appendTo('.main-menu select');
    }
    else {
	  $('<option />', {
	    'value'   : cur_link.attr('href'),
	    'text'    : '-- ' +cur_link.text()
	  }).appendTo('.main-menu select');
    }
  });
  $('.main-menu select').change(function() {
    window.location = $(this).find('option:selected').val();
  });
});

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

[سعید شعبانی 2047]

من هم دنبال چنین قابلیتی هستم. اگر میشه یکی از دوستان یک آموزش کامل و جامع در مورد منو در حالت ریسپانسیو در انجمن بگذاره.

اینجا یه نمونه برات ساختم

http://jsbin.com/oxusuy/1

اینطور که فهمیدم. داخل این منو شما منوی اول را پنهان می کنید و منو دوم که به صورت سلکتور هست را نشان می دهید. نمیشه کاری کرد که از همون منوی اول استفاده کرد؟

ویرایش شده تیر 92 توسط سعید شعبانی

[alimir 795]

عاقا من مشکل نمایش رو با تغییر main-menu li به top-nav li حل کردم، فقط حالت نمایش زیر منوها رو مثل دمو نداره!!!

این رو چیکار باید کرد؟!؟

[mehral 785]

عاقا من مشکل نمایش رو با تغییر main-menu li به top-nav li حل کردم، فقط حالت نمایش زیر منوها رو مثل دمو نداره!!!

این رو چیکار باید کرد؟!؟

یه سورس آنلاین بم بده تا مشکلتو حل کنم

من هم دنبال چنین قابلیتی هستم. اگر میشه یکی از دوستان یک آموزش کامل و جامع در مورد منو در حالت ریسپانسیو در انجمن بگذاره.

اینطور که فهمیدم. داخل این منو شما منوی اول را پنهان می کنید و منو دوم که به صورت سلکتور هست را نشان می دهید. نمیشه کاری کرد که از همون منوی اول استفاده کرد؟

چرا راهش نباشه اون حالت یه جوری استفاده از آموزشایی عنوان menu off-canvas هست ... آموزش این حالت خودش چندین مورد میشه ... فرصت یار باشه بام یه آموزش کامل قرار میدم (فکر کنم قبلا درمورد طراحی رسپانسیو هم این جمله رو گفته باشم ... )

[alimir 795]

این بخشش مربوط به کدهای جاوا اسکریپته دیگه؟ چون من از استایل ها استفاده نکردم!!!

والا فعلا پوسته رو روی لوکال دارم ولی امشب روی یک هاستی آپلودش میکنم و لینکش رو میذارم اینجا...

باز هم ممنون.

[alimir 795]

سلام مهرال جان.

من قالب رو تو آدرس زیر بارگذاری کردم:

http://alimir.ir/themes/

وقتی سایز مرورگر کوچیک میشه و فرم select به نمایش در میاد همه چی به خوبی کار میکنه فقط در نمایش زیر منوها تغییری ایجاد نمیکنه!!!

[mehral 785]

این خط کد

if (!el.parent('ul').hasClass('children')) {

عبارت 'children' رو عوض کن و این عبارت رو قرار بده 'sub-menu'

[alimir 795]

واقعا ممنونم، مشکل حل شد.