Milad123 285 ارسال شده در اسفند 92 گزارش بازنشر ارسال شده در اسفند 92 سلام به همگیخواستم بدونم آیا منو هم میتونه واکنش پذیر باشه؟ به احتمال زیاد میشهحالا میخوام بدونم چطوری میتونم این منو رو واکنش پذیر کنم؟ چون توی مرورگر وقتی کنترل و اسکرول رو میگیری و صفحه رو دور یا نزدیک میکنی منو بهم میریزه!! میخوام این اتفاق نیفته چون توی کروم زوم پیشفرض اگه اشتباه نکنم روی 110% هست و برای همین ان منو توی کروم بهم میریزه!!کد خاصی باید اضافه کنم تا این مشکل حل بشه؟ اگه کسی درستش کنه که دیگه خیلی ممنونش میشم! کدهای منو رو پیوست کردم.Menu.zip نقل قول لینک به ارسال
سعید شعبانی 2047 ارسال شده در اسفند 92 گزارش بازنشر ارسال شده در اسفند 92 بله ریسپانسیو میشه کرد ولی تعریفی که از ریسپانسیو دارید باید ببینیم چی هست؟ شما منوی ریسپانسیو را این می دونید که باید در تمام رزولوژن ها به یک شکل باشه و فقط اندازش تغییر کنه یعنی کوچک و بزرگ بشه؟ یا اینکه منو ریسپانسیو به شکلی باشه که کاربر در تمام دستگاه ها بتونه به محتوای منو به راحتی دسترسی داشته باشه. مثلا در pc منو به صورت کشویی باشه و داخل تلفن همراه با تغییر شکل به شکل یک دکمه باشه که با کلیک یا لمس دکمه منو به صورت زیر هم و فهرست وار نشون داده بشه؟ 4 نقل قول لینک به ارسال
Milad123 285 ارسال شده در اسفند 92 مالک گزارش بازنشر ارسال شده در اسفند 92 بله ریسپانسیو میشه کرد ولی تعریفی که از ریسپانسیو دارید باید ببینیم چی هست؟ شما منوی ریسپانسیو را این می دونید که باید در تمام رزولوژن ها به یک شکل باشه و فقط اندازش تغییر کنه یعنی کوچک و بزرگ بشه؟ یا اینکه منو ریسپانسیو به شکلی باشه که کاربر در تمام دستگاه ها بتونه به محتوای منو به راحتی دسترسی داشته باشه. مثلا در pc منو به صورت کشویی باشه و داخل تلفن همراه با تغییر شکل به شکل یک دکمه باشه که با کلیک یا لمس دکمه منو به صورت زیر هم و فهرست وار نشون داده بشه؟در درجه اول میخوام توی تمام رزولوشن ها بدون مشکل نمایش داده بشهولی اگه مورد دومم بشه عالیه نقل قول لینک به ارسال
سعید شعبانی 2047 ارسال شده در اسفند 92 گزارش بازنشر ارسال شده در اسفند 92 در درجه اول میخوام توی تمام رزولوشن ها بدون مشکل نمایش داده بشهولی اگه مورد دومم بشه عالیه خوب به نظر من استفاده از روش اول کاملا اشتباه هست چونکه مثلا اگر منو سایت شما کشویی باشه داخل موبایل به درستی کار نمی کنه. چون تلفن همراه مثل کامپیوتر نیست که بشه با موس روی المان ها ایستاد که عمل hover ایجاد بشه و زیر منو ها نشون داده بشند. شما باید در حالت ریسپانسیو با استفاده از مدیا کوئری ها و/یا جی کوئری کاری کنید تا منو به شکلی کار کند و نشان داده شود تا کاربران موبایل به راحتی به منو دسترسی پیدا کنند. این هم چندتا منو ریسپانسیو هست که می تونید ازشون استفاده کنید.http://www.webdesignerdepot.com/2013/11/25-awesome-responsive-menu-solutionshttp://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patternshttp://www.hongkiat.com/blog/responsive-web-nav 3 نقل قول لینک به ارسال
Milad123 285 ارسال شده در اسفند 92 مالک گزارش بازنشر ارسال شده در اسفند 92 خوب به نظر من استفاده از روش اول کاملا اشتباه هست چونکه مثلا اگر منو سایت شما کشویی باشه داخل موبایل به درستی کار نمی کنه. چون تلفن همراه مثل کامپیوتر نیست که بشه با موس روی المان ها ایستاد که عمل hover ایجاد بشه و زیر منو ها نشون داده بشند. شما باید در حالت ریسپانسیو با استفاده از مدیا کوئری ها و/یا جی کوئری کاری کنید تا منو به شکلی کار کند و نشان داده شود تا کاربران موبایل به راحتی به منو دسترسی پیدا کنند. این هم چندتا منو ریسپانسیو هست که می تونید ازشون استفاده کنید.http://www.webdesign...-menu-solutionshttp://exisweb.net/i...d-menu-patternshttp://www.hongkiat....ponsive-web-navنمیشه هیچ رقمه به روش اول فقط عمل کرد؟!چون به احتمال 90% من برای موبایل یه قالب دیگه استفاده میکنم و روی این قالب این منو وجود ندارهاین منو در واقع فقط برای کامپیوترهنسخه ی موبایل سایت قالبش فرق دارهاگه ممکنه یه راه حلی بگید که فقط توی رزولوشن های مختلف درست کار کنه کافیهمتشکرم نقل قول لینک به ارسال
سعید شعبانی 2047 ارسال شده در اسفند 92 گزارش بازنشر ارسال شده در اسفند 92 خوب الان که منوی شما هیچ استایلی نداره. لطفا استایل منو را هم قرار بدید تا راهنماییتون کنم. نقل قول لینک به ارسال
Milad123 285 ارسال شده در اسفند 92 مالک گزارش بازنشر ارسال شده در اسفند 92 خوب الان که منوی شما هیچ استایلی نداره. لطفا استایل منو را هم قرار بدید تا راهنماییتون کنم.این استایل 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;}کافیه یا بازم استایل های بیشتری لازمه؟ نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .