رفتن به مطلب

ریسپانسیو کردن این منو


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

سلام به همگی

خواستم بدونم آیا منو هم میتونه واکنش پذیر باشه؟ به احتمال زیاد میشه

حالا میخوام بدونم چطوری میتونم این منو رو واکنش پذیر کنم؟ چون توی مرورگر وقتی کنترل و اسکرول رو میگیری و صفحه رو دور یا نزدیک میکنی منو بهم میریزه!! میخوام این اتفاق نیفته چون توی کروم زوم پیشفرض اگه اشتباه نکنم روی 110% هست و برای همین ان منو توی کروم بهم میریزه!!

کد خاصی باید اضافه کنم تا این مشکل حل بشه؟ اگه کسی درستش کنه که دیگه خیلی ممنونش میشم! :wub:

کدهای منو رو پیوست کردم.

Menu.zip

لینک به ارسال

بله ریسپانسیو میشه کرد ولی تعریفی که از ریسپانسیو دارید باید ببینیم چی هست؟ شما منوی ریسپانسیو را این می دونید که باید در تمام رزولوژن ها به یک شکل باشه و فقط اندازش تغییر کنه یعنی کوچک و بزرگ بشه؟ یا اینکه منو ریسپانسیو به شکلی باشه که کاربر در تمام دستگاه ها بتونه به محتوای منو به راحتی دسترسی داشته باشه. مثلا در pc منو به صورت کشویی باشه و داخل تلفن همراه با تغییر شکل به شکل یک دکمه باشه که با کلیک یا لمس دکمه منو به صورت زیر هم و فهرست وار نشون داده بشه؟

لینک به ارسال

بله ریسپانسیو میشه کرد ولی تعریفی که از ریسپانسیو دارید باید ببینیم چی هست؟ شما منوی ریسپانسیو را این می دونید که باید در تمام رزولوژن ها به یک شکل باشه و فقط اندازش تغییر کنه یعنی کوچک و بزرگ بشه؟ یا اینکه منو ریسپانسیو به شکلی باشه که کاربر در تمام دستگاه ها بتونه به محتوای منو به راحتی دسترسی داشته باشه. مثلا در pc منو به صورت کشویی باشه و داخل تلفن همراه با تغییر شکل به شکل یک دکمه باشه که با کلیک یا لمس دکمه منو به صورت زیر هم و فهرست وار نشون داده بشه؟

در درجه اول میخوام توی تمام رزولوشن ها بدون مشکل نمایش داده بشه

ولی اگه مورد دومم بشه عالیه ;)

لینک به ارسال

در درجه اول میخوام توی تمام رزولوشن ها بدون مشکل نمایش داده بشه

ولی اگه مورد دومم بشه عالیه ;)

خوب به نظر من استفاده از روش اول کاملا اشتباه هست چونکه مثلا اگر منو سایت شما کشویی باشه داخل موبایل به درستی کار نمی کنه. چون تلفن همراه مثل کامپیوتر نیست که بشه با موس روی المان ها ایستاد که عمل hover ایجاد بشه و زیر منو ها نشون داده بشند. شما باید در حالت ریسپانسیو با استفاده از مدیا کوئری ها و/یا جی کوئری کاری کنید تا منو به شکلی کار کند و نشان داده شود تا کاربران موبایل به راحتی به منو دسترسی پیدا کنند. این هم چندتا منو ریسپانسیو هست که می تونید ازشون استفاده کنید.

http://www.webdesignerdepot.com/2013/11/25-awesome-responsive-menu-solutions

http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns

http://www.hongkiat.com/blog/responsive-web-nav

لینک به ارسال

خوب به نظر من استفاده از روش اول کاملا اشتباه هست چونکه مثلا اگر منو سایت شما کشویی باشه داخل موبایل به درستی کار نمی کنه. چون تلفن همراه مثل کامپیوتر نیست که بشه با موس روی المان ها ایستاد که عمل hover ایجاد بشه و زیر منو ها نشون داده بشند. شما باید در حالت ریسپانسیو با استفاده از مدیا کوئری ها و/یا جی کوئری کاری کنید تا منو به شکلی کار کند و نشان داده شود تا کاربران موبایل به راحتی به منو دسترسی پیدا کنند. این هم چندتا منو ریسپانسیو هست که می تونید ازشون استفاده کنید.

http://www.webdesign...-menu-solutions

http://exisweb.net/i...d-menu-patterns

http://www.hongkiat....ponsive-web-nav

نمیشه هیچ رقمه به روش اول فقط عمل کرد؟!

چون به احتمال 90% من برای موبایل یه قالب دیگه استفاده میکنم و روی این قالب این منو وجود نداره

این منو در واقع فقط برای کامپیوتره

نسخه ی موبایل سایت قالبش فرق داره

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

متشکرم

لینک به ارسال

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

لینک به ارسال

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

این استایل sf-menu :


.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
float: right;
padding: 15px 0 0;
position: relative;
margin: 20px 0 0 -20px;
font-family: 'BYekan', Tahoma;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 172px;
}
.sf-menu ul li {
width: 100%;
margin: 0;
padding: 10px 0;
background: rgba(0, 0, 0, 0.8);
}
.sf-menu ul li:hover {
background: transparent url(images/ie_fff_80.png) repeat;
background: rgba(255, 255, 255, 0.8);
}
.sf-menu li:hover { visibility: inherit }
.sf-menu li {
float: left;
position: relative;
padding: 0
}
.sf-menu a {
padding: 0 40px 30px 0;
display: block;
position: relative;
color: #fff;
text-transform: uppercase;
font-size: 14px;
}
.sf-menu li:hover > a, .sf-menu li > a:hover, .sf-menu li.current > a {
color: #ff0078
}
.sf-menu li li:hover > a, .sf-menu li li > a:hover, .sf-menu li li.current > a {
color: #000;
background: transparent url(images/ie_fff_80.png) repeat;
background: rgba(255, 255, 255, 0.8);
}
.sf-menu li li {
border-top: 1px solid #0F0F0F;
border-bottom: 1px solid #020202;
margin:0;
padding: 0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease
}
.sf-menu li li li:first-child {
border-top: 1px solid #222 !important
}
.sf-menu li li a {
font-size: 12px;
font-family: "Tahoma", Helvetica, Arial;
font-weight: normal;
padding: 8px 15px;
line-height: 20px;
color: #fff;
text-transform: none;
letter-spacing: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sf-menu li a span {
font-size: 12px;
font-family: tahoma;
font-weight: normal;
text-transform: none;
display: block;
color: #AFAFAF;
margin: 10px 0 0 0;
}
.sf-menu ul ul:before {
position: absolute;
width: 0 !important;
padding: 0 !important;
margin: 0 !important;
height: 0 !important;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #fff;
left: 0;
top: 0
}
.sf-menu i {
margin-right: 8px
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0px;
z-index: 10000;
top: 52px;
padding: 16px 0 0 0;
-webkit-animation: lr 0.4s;
animation: lr 0.4s;
}
.sf-menu li:hover ul li ul,
.sf-menu li.sfHover ul li ul,
.sf-menu li:hover ul li ul li ul,
.sf-menu li.sfHover ul li ul li ul {
left: 172px;
z-index: 999;
top: -1px !important
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 172px;
top: -1px !important;
padding: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 172px;
top: 0;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul { min-width: 1px }
a > .sf-sub-indicator {
display: inline !important;
width: 8px;
height: 10px;
padding: 0 0 0 6px !important;
}
.sf-menu li.back {
position: absolute;
padding: 0 !important;
margin: 0 !important;
bottom: -2px;
height: 2px !important;
overflow: inherit !important
}
.sf-menu li.back .left {
position: absolute;
padding: 0 !important;
margin: 0 !important;
height:2px !important;
width: 100% !important;
background: #ff0078;
}
.sf-menu {float: none !important;display: table;margin: 20px auto 0 !important}
.sf-menu a {padding: 0 28px 30px 0}
.sf-menu a { color: #FFF !important; padding: 0 0 10px 0 }
.sf-menu a:hover { background: transparent !important }
.sf-menu {width: 100%!important;display: none; margin: 4px 0 !important }
.sf-menu li li, .sfHover { background: none }
.sf-menu li { margin-bottom: 10px; margin-left: 0 }
.sf-menu.xactive { display: block !important; }
.sf-menu ul:before { content: ""; border-width: 0 0 0 0 !important }
.sf-menu > li.sfHover:before {color: #000;background: none;width: 0;height: 0px;}
.sf-menu li:hover ul, .sf-menu li.sfHover ul { padding: 0 !important }
ul.sf-menu li:hover ul, ul.sf-menu li.sfHover ul, ul.sf-menu li ul { margin-top: 4px; margin-bottom: 10px }
.sf-menu li { float: none !important; display: block !important; width: 100% !important;overflow: hidden; }
.sf-menu li a, .sf-menu ul li, { float: none !important; border: 0; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul {box-shadow: none;-webkit-animation: initial;animation: initial;-moz-animation: initial;-o-animation: initial; }
.sf-menu li li {left: 10px;border-top: 0;border-bottom: 0;}
.sf-menu ul {position:static !important; display: none !important; width: 100%; }

اینم استایل sub :


#submenu {
margin: 0px 0px;
width: 900px;
padding: 0px 30px;
text-transform: uppercase;
margin-right:-15px;
color:#fff;
}
#submenu ul {
width: 100%;
color:#fff;
float: left;
list-style: none;
margin: 0;
padding: 0 0px;
margin-right:80px;
margin-top:0px
}
#submenu li {
float: right;
list-style: none;
margin: 0;
padding: 0;
color:#fff;
}
#submenu li a {
color:#fff;
font-size:13px;
font-family: 'BYekan';
display: block;
margin: 0;
padding: 10px 10px 10px 20px;
text-decoration: none;
position: relative;
}
#submenu li a:hover, #submenu li a:active, #submenu li a .current_page_item a {
color: #ffffff;
font-family: 'BYekan';
background:#ff7324;
}
#submenu li a.sf-with-ul {padding-left: 10px;}
#submenu li li a, #submenu li li a:link, #submenu li li a:visited {
background-color:rgba(190, 82, 39, 0.5);
color: #ffffff;
font-size: 12px;
width: 148px;
margin: 0;
padding: 0px 10px;
line-height: 35px;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
text-transform: none;
position: relative;
position: relative;
}
#submenu li li a:hover, #submenu li li a:active {
background:#940df9;
color: #fff;
}
#submenu li ul {
z-index: 9999;
position: absolute;
right: -999em;
height: auto;
width: 160px;
margin: 0px 0px 0px 0px;
}
#submenu li ul a {width: 150px;}
#submenu li ul a:hover, #submenu li ul a:active {}
#submenu li ul ul {margin: -36px 169px 0 0;}
#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {right: -999em;}
#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {right: auto;}
#submenu li:hover, #submenu li.sfHover {position: static;}

کافیه یا بازم استایل های بیشتری لازمه؟

لینک به ارسال

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

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

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

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

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

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

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

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

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