A M i R
5 سال پیش توسط A M i R مطرح شد
20 پاسخ

منوی ریسپانسیو با pure css

سلام وقت بخیر

  • چطور میتونم نقاط شکست برای ریسپانسیو بودن منو فقط با css خالص (css، html) رو مشخص کنم
    از مدیا کوئری استفاده نکردم
    یک منوی ساده برای بالای سایتم طراحی کردم که فقط میخوام در حالت دسکتاپ نمایش داده بشه که از این بابت مشکلی نداره ...
    اما در حالت دسکتاپ زمانی که عرض صفحه مرورگر رو کم میکنم بعد از یک حدی منو به هم میریزه و خیلی دیر منو hidden میشه ..
    میخوام قبل از اینکه منو به هم بریزه hidden بشه

سپاس


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
0

ممنون از شما

کافیه از دستورات mediaquery کمک بگیرید. برای این مورد اینجوری میشه:

@media only screen and (max-width: 1200px) {
                .main-top-menu{
                    display: none;
                }               
            }

یعنی وقتی عرض مرورگر به 1200 پیکسل یا کمتر میرسه، نمایش داده نشه.


A M i R
@mtp.civil 5 سال پیش مطرح شد
0

البته منو ریسپانسیو هست و در موبایل و تبلت نمایش داده نمیشه ، مشکل در ریسایز مرورگر هست


A M i R
@mtp.civil 5 سال پیش مطرح شد
0

یعنی هیچ کسی نبود کمک کنه ؟


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

سلام
کدهای خودتون رو همراه با عکس از خروجی قرار بدین.


A M i R
@mtp.civil 5 سال پیش آپدیت شد
0

عکس از خروجی
http://uupload.ir/files/hur0_111.jpg

کدهای استایل

.container-menu-top{
    margin: auto 350px;
}
.main-top-menu{
    width: 100%;
    background-color: rgba(92,92,92,1);
    float: right;
}
.main-top-menu ul{
    list-style-type: none;
    background-color: #5c5c5c;
    margin: 0;
    padding: 0;
    overflow: auto;
    text-decoration:none;
}
.main-top-menu li{
    display: inline;
    float: right;
    color: rgba(255,255,255,.8);
    border-color: rgba(255,255,255,.25);
    border-right-width: 1px;
    border-right-style: solid;
    line-height:38px;
    padding:0 10px;
}
.main-top-menu li a:hover{
    color: #dedede;
}
.main-top-menu li a{
    text-decoration: none;
    color: #fff;
}
.main-top-menu li:first-child{
    border: 0;
}
.main-top-menu .right-menu{
    width: 50%;
    float: right;
    font-size: 13px;
}
.main-top-menu .left-menu{
    width: 50%;
    float: left;
    color: #fff;
    font-size: 12px;
}
.container-left{
    float: left;
}
@media (max-width:1700px){
    ul li{
        float: none;
        display: block;
    }
}

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

دوست گرامی
کدهاتون رو درست قرار بدین، الان بهم ریخته هستش.
کدهای html رو هم بزارید.

اگر فقط می خواید مخفی بشه هم خب، یک شرط ساده در ابعاد مدنظرتون با mediaquery میذارید و داخلش display: none می کنید.


A M i R
@mtp.civil 5 سال پیش مطرح شد
0

بله فقط میخوام وقتی به عرض 1200px رسید hidden بشه
میشه بیشتر توضیح بدید


A M i R
@mtp.civil 5 سال پیش آپدیت شد
0

@milad
کدهای html

<div class="main-top-menu hidden-xs">  
<div class="container-menu-top">  
<div class="right-menu">  
<ul>  
<li>test 1</li>  
<li>test 2</li>  
<li>test 3</li>  
<li>test 4</li>  
</ul>  
</div>  
<div class="left-menu">  
<div class="container-left">  
<ul>  
<li><a href="#">تماس با ما</a></li>  
<li><a href="#">سوالات متداول</a></li>  
<li><a href="#">درباره ما</a></li>  
</ul>  
</div>  
</div>  
</div>  
</div>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
0

لطفا کد های خودتون رو بین دو سری ``` قرار بدهید تا بهتر نمایش داده شود.
راهنما قرار دادن کدها: https://roocket.ir/articles/learn-use-markdown
بعدش در خدمتم.


A M i R
@mtp.civil 5 سال پیش مطرح شد
1

@milad
انجام شد.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
0

ممنون از شما

کافیه از دستورات mediaquery کمک بگیرید. برای این مورد اینجوری میشه:

@media only screen and (max-width: 1200px) {
                .main-top-menu{
                    display: none;
                }               
            }

یعنی وقتی عرض مرورگر به 1200 پیکسل یا کمتر میرسه، نمایش داده نشه.


A M i R
@mtp.civil 5 سال پیش آپدیت شد
1

@milad
ممنون از توجه و پیگیری شما
به خوبی کار کرد
یک سوال دیگه هم داشتم چطور میتونم به این منو فقط از زیر padding بدم که از لوگو فاصله بگیره و به لوگو نچسبه ؟


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

خواهش می کنم، زنده باشی.

مثلا می تونید به عنصر .main-top-menu حاشیه ی پایینی بدین:

.main-top-menu {
      margin-bottom: 30px
}

یا اینکه برعکس کار کنید و به نگهدارنده ی سطر ِ لوگو تون padding بدین.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
A M i R
@mtp.civil 5 سال پیش آپدیت شد
1

@milad
میشه کاری کرد که این منو وقتی صفحه مرورگر رو ریسایز میکنیم هم عرض سایت تغییر اندازه بده ؟

  • در حالتی که مرورگر ریسایز نشده ، این منو هم عرض سایت هست ، اما بعد از ریسایز مرورگر عرض منو دیگه هم عرض سایت نیست
    برای اینکه درک بهتری داشته باشید اسکرین شات ضمیمه شد ( داخل اسکرین شات با فلش قرمز رنگ مشخص کردم)
    http://uupload.ir/files/p2ne_menu-box.jpg

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

بله، مطمئنا میشه.
شما باید سطر فهرست تون رو با سطر پایینی که مربوط به جستجو-لوگو میشه هماهنگ کنید.

احتمالا در اینجا حاشیه اضافی دادید که با سطر پایینی هماهنگ نیستش:

.container-menu-top{
    margin: auto 350px;
}

این دوتا رو هم، نیازی نیست که عرض 50 درصد بهشون بدین:

.main-top-menu .right-menu{
    width: 50%;
    float: right;
    font-size: 13px;
}
.main-top-menu .left-menu{
    width: 50%;
    float: left;
    color: #fff;
    font-size: 12px;
}

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

بعلاوه بهتون توصیه می کنم دوره ی flexbox موجود در سایت رو ببینید، به کمک این دوره با بکارگیری خصوصیت flexbox, جریان کاری و قرارگیری عناصر رو خیلی بهتر می تونید مدیریت کنید.


A M i R
@mtp.civil 5 سال پیش آپدیت شد
1

@milad

.container-menu-top{
    margin: auto 350px;
}

این حاشیه واسه این هست که در حالت تمام عرض مرورگر ، منویی که برای بالای سایت درست کردم هم عرض قسمت پایین سایت باشه
اسکرین شات رو مشاهده کنید: http://uupload.ir/files/j2e6_222.jpg

اما زمانی مشکل به وجود میاد که عرض مرورگر رو کم میکنم ، این منو کوچیکتر از عرض قسمت پایین سایت میشه :
اسکرین شات رو مشاهده کنید: http://uupload.ir/files/p2ne_menu-box.jpg

ممنونم


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

کدهاتون رو ناقص می ذارید، خب من نمی دونم بصورت کلی چه کردین.

کد های html , css مربوط به سطر اول و سطر دوم رو قرار بدین تا بتونم راهنمایی تون کنم.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

عزیز جان اینطوری که نمیشه متوجه شدش کدوم به کدومه.
شما بهتره بکمک inspect element خود مرورگر، تشخیص بدین سطر دوم تون رو، بعدش این نگهدارنده ی <div class="container-menu-top"> رو براش قرار بدین.

من انقدری به وردپرس تسلط ندارم. نمی دونستم کدهاتون قراره تبدیل بشن.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام