طراحی منوی سایت بصورت پاپ آپ

[sara_t]

سلام دوستان
من چطور میتونم یه منو مثه سایت hakmehr.com طراحی کنم.میخام وقتی روی دسکتاپ هست منو باشه و زمانیکه روی موبایل وب سایت باز میشه مثه مدال باشه دقیقا شبیه به منوی این سایت

[milan2004]

طراحی تون رو در یک پارشیال ویوایجاد کنید (Ui) بعد وقتی روی منو کلیک شد با ایجکس پارشیال ویو رو فراخوانی ودر داخل مودال بریزید

[ehsan_game]

همینجوره دقیقا

اخبار روز
جدیدترین اخبار روز ایران

[sara_t]

جناب میلان 2004 ببخشید من اصلن متوجه راه حلتون نمیشم

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

<div class="navbar navbar-default ">
                    <div class="directionrtl">
                        <div class="container">
                            <div class="navbar-header">
                                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">menu</button>
                            </div>                         
                            <div class="modal fade" id="myModal" role="dialog">
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <div class="navbar-collapse">
                                            <ul class="nav navbar-nav">
                                                <li class="dropdown active">
                                                    @Html.ActionLink("خانه", "Index", "Home")
                                                </li>                                            
                                                <li>@Html.ActionLink("مطلب", "Product", "Home", new { GroupId = Convert.ToInt32(3) }, null)</li>                                              
                                                <li>@Html.ActionLink("ارتباط با ما", "ContactUs", "Home")</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>

[sara_t]

بنظرتون اگر دوتا div مختلف بنویسم و برای هر مدیایی div های متفاوت رو نشون بدم اصولی هست؟یعنی دوبار کدهای منو رو یکبار در div مربوط به collaps ویکبار در div مودال قرار بدم؟

کلا چطور میتونم یه سایت داشته باشم که منوی ساده داشته باشه و وقتی به حالت موبایل میشه منو بصورت مدال باشه یا overlay

[Moien Tajik]

برای ساخت همچین چیزی شما باید از media query ها در css استفاده کنید و ویو مربوط به هر کدوم رو داخل یک پارشال قرار بدید .
با css چک کنید اگر Device که وارد سایت شما شده ، از یک سایزی کوچکتر بود ، منوی شما Collapse بشه و پارشال مربوط به منوی Modal نمایش داده بشه : https://www.w3schools.com/css/tryit....ive_mediaquery
نمونه ی Modal در کل صفحه : https://codepen.io/danbhala/pen/EKoNrO

[sara_t]

خیلی خیلی ممنونم

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

[milan2004]

خیلی خیلی ممنونم

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

باjsکنترل کنیدکه ازیه سایزی بزرگتر fade شه