Ali-Eghdam 3 ارسال شده در بهمن 00 گزارش بازنشر ارسال شده در بهمن 00 سلام دوستان عزیز ، من از توی نت یک منو (مگا منو) پیدا کردم که با بوتسترپ ساخته شده ! خوبه ! ولی من میخوام وقتی دراپ داون باز شد با یه ترنیزیشنی یا انیمیشنی باز بشه . اینو وقتی کلیک میکنم در حالت عادی یهویی باز میشه . هر چقدرم تو سی اس اس مقدار ترنیزیشن دادم و فلان درست نشد . ممنون میشم راهنمایی کنید. سپاس <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> نقل قول لینک به ارسال
yazdaniwp 1187 ارسال شده در بهمن 00 گزارش بازنشر ارسال شده در بهمن 00 در در ۱۴۰۰/۱۱/۲۳ در 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 رو گذاشتید. زحمت بکشید کدتون رو در سرویس هایی مثل این قرار بدید تا بشه سریعتر کمک کرد. 1 نقل قول لینک به ارسال
Ali-Eghdam 3 ارسال شده در بهمن 00 مالک گزارش بازنشر ارسال شده در بهمن 00 https://bbbootstrap.com/snippets/dropdown-megamenu-64049191 نقل قول لینک به ارسال
Ali-Eghdam 3 ارسال شده در بهمن 00 مالک گزارش بازنشر ارسال شده در بهمن 00 در در ۱۴۰۰/۱۱/۲۵ در 00:54، yazdaniwp گفته است : سلام. شما فقط کد html رو گذاشتید. زحمت بکشید کدتون رو در سرویس هایی مثل این قرار بدید تا بشه سریعتر کمک کرد. https://bbbootstrap.com/snippets/dropdown-megamenu-64049191 نقل قول لینک به ارسال
Ali-Eghdam 3 ارسال شده در بهمن 00 مالک گزارش بازنشر ارسال شده در بهمن 00 من میخوام تو این جی اس به جای هاور ، کلیک باشه ! ولی نمیشه . این حل بشه مشکلمم حل میشه کلا $(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'); }); }); نقل قول لینک به ارسال
هادی خانزاده 103 ارسال شده در بهمن 00 گزارش بازنشر ارسال شده در بهمن 00 با عرض سلام و وقت بخیر کد زیر و تست کنید ببینید جواب میده: $(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'); } }); }); موفق و پیروز باشید. نقل قول لینک به ارسال
Ali-Eghdam 3 ارسال شده در بهمن 00 مالک گزارش بازنشر ارسال شده در بهمن 00 در 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'); } }); }); موفق و پیروز باشید. خیلی ممنون ، منو رو باز میکنه اما نمیبنده نقل قول لینک به ارسال
هادی خانزاده 103 ارسال شده در بهمن 00 گزارش بازنشر ارسال شده در بهمن 00 در 13 ساعت قبل، Ali-Eghdam گفته است : خیلی ممنون ، منو رو باز میکنه اما نمیبنده سلام و عرض ادب ساختار منوتون رو هم قرار بدین تا بهتر کمکتون کنم. نقل قول لینک به ارسال
Ali-Eghdam 3 ارسال شده در بهمن 00 مالک گزارش بازنشر ارسال شده در بهمن 00 در 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> نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .