رفتن به مطلب

مشکل در css منو


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

سلام دوستان عزیز ، من از توی نت یک منو (مگا منو) پیدا کردم که با بوتسترپ ساخته شده ! خوبه ! ولی من میخوام وقتی دراپ داون باز شد با یه ترنیزیشنی یا انیمیشنی باز بشه . اینو وقتی کلیک میکنم در حالت عادی یهویی باز میشه . هر چقدرم تو سی اس اس مقدار ترنیزیشن دادم و فلان درست نشد . ممنون میشم راهنمایی کنید. سپاس 

<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm"> <a href="#" class="navbar-brand font-weight-bold d-block d-lg-none">Logo</a> <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button>
    <div id="navbarContent" class="collapse navbar-collapse">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item dropdown megamenu"><a id="megamneu" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle font-weight-bold text-uppercase">Main</a>
                <div aria-labelledby="megamneu" class="dropdown-menu border-0 p-0 m-0 ">
                    <div class="container">
                        <div class="row bg-white rounded-0 m-0 shadow-sm  ">
                            <div class="col-lg-7 col-xl-8">
                                <div class="p-4">
                                    <div class="row">
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading one</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading two</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading three</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading four</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5 col-xl-4 px-0 d-none d-lg-block" style="background: center center url(https://images.unsplash.com/photo-1533637267520-4dfd6aa7ee93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80)no-repeat; background-size: cover;"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">About</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Services</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Contact</a></li>
        </ul>
    </div>
</nav>

 

لینک به ارسال
در در ۱۴۰۰/۱۱/۲۳ در 21:09، Ali-Eghdam گفته است :

سلام دوستان عزیز ، من از توی نت یک منو (مگا منو) پیدا کردم که با بوتسترپ ساخته شده ! خوبه ! ولی من میخوام وقتی دراپ داون باز شد با یه ترنیزیشنی یا انیمیشنی باز بشه . اینو وقتی کلیک میکنم در حالت عادی یهویی باز میشه . هر چقدرم تو سی اس اس مقدار ترنیزیشن دادم و فلان درست نشد . ممنون میشم راهنمایی کنید. سپاس 


<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm"> <a href="#" class="navbar-brand font-weight-bold d-block d-lg-none">Logo</a> <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button>
    <div id="navbarContent" class="collapse navbar-collapse">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item dropdown megamenu"><a id="megamneu" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle font-weight-bold text-uppercase">Main</a>
                <div aria-labelledby="megamneu" class="dropdown-menu border-0 p-0 m-0 ">
                    <div class="container">
                        <div class="row bg-white rounded-0 m-0 shadow-sm  ">
                            <div class="col-lg-7 col-xl-8">
                                <div class="p-4">
                                    <div class="row">
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading one</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading two</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading three</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading four</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5 col-xl-4 px-0 d-none d-lg-block" style="background: center center url(https://images.unsplash.com/photo-1533637267520-4dfd6aa7ee93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80)no-repeat; background-size: cover;"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">About</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Services</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Contact</a></li>
        </ul>
    </div>
</nav>

 

سلام. شما فقط کد html رو گذاشتید. زحمت بکشید کدتون رو در سرویس هایی مثل این قرار بدید تا بشه سریعتر کمک کرد.

لینک به ارسال
در در ۱۴۰۰/۱۱/۲۵ در 00:54، yazdaniwp گفته است :

سلام. شما فقط کد html رو گذاشتید. زحمت بکشید کدتون رو در سرویس هایی مثل این قرار بدید تا بشه سریعتر کمک کرد.

https://bbbootstrap.com/snippets/dropdown-megamenu-64049191

لینک به ارسال

من میخوام تو این جی اس به جای هاور ، کلیک باشه ! ولی نمیشه . این حل بشه مشکلمم حل میشه کلا

$(document).ready(function () {
    $('.dropdown').hover(function () {
        $('.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

 

لینک به ارسال

با عرض سلام و وقت بخیر

کد زیر و تست کنید ببینید جواب میده:

$(document).ready(function () {
    $('.dropdown').click(function () {
      	if(!$(this).hasClass('open')) {
          	$(this).addClass('open');
            $('.dropdown-menu', this).stop(true, true).slideDown('fast');
        } else {
            $(this).removeClass('open');
        	$('.dropdown-menu', this).stop(true, true).slideUp('fast');
        }
    });
});

موفق و پیروز باشید.

لینک به ارسال
در 4 ساعت قبل، هادی خانزاده گفته است :

با عرض سلام و وقت بخیر

کد زیر و تست کنید ببینید جواب میده:


$(document).ready(function () {
    $('.dropdown').click(function () {
      	if(!$(this).hasClass('open')) {
          	$(this).addClass('open');
            $('.dropdown-menu', this).stop(true, true).slideDown('fast');
        } else {
            $(this).removeClass('open');
        	$('.dropdown-menu', this).stop(true, true).slideUp('fast');
        }
    });
});

موفق و پیروز باشید.

خیلی ممنون ، منو رو باز میکنه اما نمیبنده 

لینک به ارسال
در 13 ساعت قبل، Ali-Eghdam گفته است :

خیلی ممنون ، منو رو باز میکنه اما نمیبنده 

سلام و عرض ادب

ساختار منوتون رو هم قرار بدین تا بهتر کمکتون کنم.

لینک به ارسال
در 3 ساعت قبل، هادی خانزاده گفته است :

سلام و عرض ادب

ساختار منوتون رو هم قرار بدین تا بهتر کمکتون کنم.

<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm"> <a href="#" class="navbar-brand font-weight-bold d-block d-lg-none">MegaMenu</a> <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"> <span class="navbar-toggler-icon"></span> </button>
    <div id="navbarContent" class="collapse navbar-collapse">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item dropdown megamenu"><a id="megamneu" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle font-weight-bold text-uppercase">Mega Menu</a>
                <div aria-labelledby="megamneu" class="dropdown-menu border-0 p-0 m-0">
                    <div class="container">
                        <div class="row bg-white rounded-0 m-0 shadow-sm">
                            <div class="col-lg-7 col-xl-8">
                                <div class="p-4">
                                    <div class="row">
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading one</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading two</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading three</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <h6 class="font-weight-bold text-uppercase">Heading four</h6>
                                            <ul class="list-unstyled">
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Home</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">About</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Help</a></li>
                                                <li class="nav-item"><a href="" class="nav-link text-small pb-0 ">Account</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5 col-xl-4 px-0 d-none d-lg-block" style="background: center center url(https://images.unsplash.com/photo-1533637267520-4dfd6aa7ee93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80)no-repeat; background-size: cover;"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">About</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Services</a></li>
            <li class="nav-item"><a href="" class="nav-link font-weight-bold text-uppercase">Contact</a></li>
        </ul>
    </div>
</nav>

 

لینک به ارسال

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

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

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

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

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

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

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

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

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