Milad123

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

7 پست در این موضوع قرار دارد

سلام به همگی

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

حالا میخوام بدونم چطوری میتونم این منو رو واکنش پذیر کنم؟ چون توی مرورگر وقتی کنترل و اسکرول رو میگیری و صفحه رو دور یا نزدیک میکنی منو بهم میریزه!! میخوام این اتفاق نیفته چون توی کروم زوم پیشفرض اگه اشتباه نکنم روی 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;}

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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری