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> لینک به ارسال
پست های پیشنهاد شده
لطفا برای ارسال دیدگاه وارد شوید
شما بعد از اینکه وارد حساب کاربری خود شدید می توانید دیدگاهی ارسال کنید
ورود به حساب کاربری