(مهم) مشکل در طراحی قالب با بوت استرپ

[alirezakiani]

سلام دوستان من دارم یه قالب با بوت استرپ میسازم ، ولی توی ساخت ناوبار دچار مشکل شدم
مشکلم اینه :
با قطعه کد jquery زیر تونستم کاری کنم که وقتی موس رو nvbar hover میشه زیر منو ها نمایش داده بشه اما میخوام که در حالت sm و xs این تنظیمات (کد) از بین بره و به حالت پیش فرض برگرده (فقط با کلیک باز شه ) لطفا راهنمایی کنید کد رو چطور تغییر بدم؟ یا اصلا یه راهکار مناسب تر

<script type="text/javascript">
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function(){
$('ul.dropdown-menu',this).fadeIn();
} ,
function(){
$('ul.dropdown-menu',this).fadeOut();

}


);


});
</script>

[mojtaba05]

سلام، اگر هدفتون فقط نمایش زیرمنو هست و افکت خاصی مد نظر ندارید، بهتره به جای جاوااسکریپت از سی اس اس استفاده کنید:

@media screen and (min-width: 981px){
    li:hover ul {display: block}
} 

کد بالا فقط موقعی کار می کنه که صفحه نمایش بزرگتر از 980 پیکسل باشه.

اما اگر به هر دلیلی تمایل به استفاده از جاوااسکریپت دارید، می تونید اول عرض صفحه رو بدست بیارید و بعد شرط بگذارید که اگر عرض صفحه از فلان اندازه بیشتر بود، این کار (نمایش زیر منو با هاور) انجام بشه:

$(document).ready(function(){
    var screenWidth = $(window).width();
    if(screenWidth > 980){
        $('ul.nav li.dropdown').hover(function(){
            $('ul.dropdown-menu',this).fadeIn();
        } ,
        function(){
            $('ul.dropdown-menu',this).fadeOut();
        });    
    }
}); 

البته ممکنه خود بوت استرپ تابع یا کلاس پیش فرضی برای این کار داشته باشه، من بوت استرپ کار نکردم.

[hamidsh91]

سلام، اگر هدفتون فقط نمایش زیرمنو هست و افکت خاصی مد نظر ندارید، بهتره به جای جاوااسکریپت از سی اس اس استفاده کنید:

@media screen and (min-width: 981px){
    li:hover ul {display: block}
} 

کد بالا فقط موقعی کار می کنه که صفحه نمایش بزرگتر از 980 پیکسل باشه.

اما اگر به هر دلیلی تمایل به استفاده از جاوااسکریپت دارید، می تونید اول عرض صفحه رو بدست بیارید و بعد شرط بگذارید که اگر عرض صفحه از فلان اندازه بیشتر بود، این کار (نمایش زیر منو با هاور) انجام بشه:

$(document).ready(function(){
    var screenWidth = $(window).width();
    if(screenWidth > 980){
        $('ul.nav li.dropdown').hover(function(){
            $('ul.dropdown-menu',this).fadeIn();
        } ,
        function(){
            $('ul.dropdown-menu',this).fadeOut();
        });    
    }
}); 

البته ممکنه خود بوت استرپ تابع یا کلاس پیش فرضی برای این کار داشته باشه، من بوت استرپ کار نکردم.

سلام . در تکمیل فرمایش دوستمون برای بوت استرپ و از طریق css باید این کد رو اضافه کنید :

@media (min-width:997px) {

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
 }

} 

[alirezakiani]

دوستان عزیز ممنون از پاسختون
بایکم دستکاری کد ها مشکل حل شد!
ضمناً من ناوبارم رو navbar-fixed-top استفاده کردم آیا امکانش هست با یه همچین حالتی بگیم که در حالت sm وxs این حالت از بین بره؟

[hamidsh91]

شما کد جی کوئری قبلی رو کلا حذف کنید . اون کدی رو که گذاشتم بزارید فقط بجای 997px بنویسید از چه سایزی به بعد از طریق هاور اجرا باز بشه منو

[alirezakiani]

شما کد جی کوئری قبلی رو کلا حذف کنید . اون کدی رو که گذاشتم بزارید فقط بجای 997px بنویسید از چه سایزی به بعد از طریق هاور اجرا باز بشه منو

ممنون دوست عزیز
آیا امکانش هست که با همین css و important بگم که مثلا زیر منو ها با یه افکت خاصی مثلا از بالا به پایین ظاهر بشن؟ از css یا jquery استفاده کنم؟ کدومشون مناسبن؟

- - - Updated - - -

من هر چی کلاس میدم چیزی نمیگیره
میخوام وقتی موس روش هاور شد زیر منو ها از بالا به پایین آهسته ظاهر بشن باید چیکار کنم؟

[alirezakiani]

دوستان کارم اضطراریه کمک میکنید؟

[T.Toosi]

سلام، چرا از کلاس های خودش استفاده نمیکنید ؟ مثلا اگر کلاس visible-lg بدید فقط برای lg قابل نمایش است یا کلاس hidden-sm فقط صفحه سایز sm پنهان میکند.

[hamidsh91]

با سی اس اس که قطعا بهتره ، اما در صورتی که نیازی به افکت نداشته باشید.

در غیر اینصورت باید از جی کوئری استفاده کنید :

if (matchMedia('only screen and (min-width: 480px)').matches) {


    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        }, 
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
    
    } 

ما اینجا گفتیم که اگه عرض صفحه بیشتر از 480 بود کد رو اجرا کنه

- - - Updated - - -

اشباه کدرو نوشته بودم مجدد نگاه کنید.