ورود

View Full Version : سوال: مشکل با Dropdown ؟



redhat2
پنج شنبه 12 اردیبهشت 1392, 18:48 عصر
سلام به دوستان ، میخواستم یه سوال بپرسم ، من این dropdown که در زیر هست را طراحی کرد و همانطور هم که تویه css اون ددیه می شه ، tranistion براش طراحی کردم ولی این transtion در Chrome درست کار میکنه ولی تویه firefox کار نمیکنه . مشکلش چیه :


/*
Document : stylesheet
Created on : Apr 20, 2013, 8:02:41 PM
Author : Saeed
Description:
Purpose of the stylesheet follows.
*/
body{
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
.dropdown{
margin-top: 100px;
margin-right: auto;
margin-left: auto;
background: url("dropdown-closed.png");
width: 111px;
height: 37px;
-moz-transition: all 250ms linear 0s;
-webkit-transition: all 250ms linear 0s;
-o-transition: all 250ms linear 0s;
-ms-transition: all 250ms linear 0s;
}
.dropdown:hover{
cursor: pointer;
background: url("dropdown-opened.png");
-moz-transition: all 250ms linear 0s;
-webkit-transition: all 250ms linear 0s;
-o-transition: all 250ms linear 0s;
-ms-transition: all 250ms linear 0s;
}
.dropdown > li{
display: block;
direction: rtl;
}
.dropdown > li > a {
margin-right: 10px;
font-family: Tahoma;
font-size: 11px;
float: right;
margin-top: 10px;
text-decoration: none;
}
.dropdown:hover > li > a {
color: white;
}
.dropdown:hover > li > ul{
position: absolute;
margin-top: 38px;
display: block;
background: url("dropdown-list.png");
width: 148px;
height: 100px;
}


کد پیوست شد .

elahe471
جمعه 13 اردیبهشت 1392, 09:19 صبح
transition: all 250ms linear 0s;
این خط رو هم اضافه کنید . برای IE و کروم و فایر فاکس های جدید
این جدول رو هم ببینید :
Transition Browser Support (http://caniuse.com/css-transitions)

redhat2
جمعه 13 اردیبهشت 1392, 10:21 صبح
درست نشد .

2undercover
جمعه 13 اردیبهشت 1392, 16:35 عصر
علتش اینه که transition برای تغییر عکس پس زمینه فقط توی موتور webkit کار می کنه در نتیجه توی مرورگر هایی غیر از Safari و Chrome که از این موتور استفاده می کنند کار نمی کنه(من روی Opera هم که تست کردم کار نکرد)!

redhat2
دوشنبه 16 اردیبهشت 1392, 09:54 صبح
خوب اگه من بخوام یه همچین چیزی را با css3 بسازم به جای transition باید چی بنویسم . ؟

DeveloperStudio
دوشنبه 16 اردیبهشت 1392, 12:58 عصر
یه سر به اینجا بزن ، تمام خواص CSS 3 + پشتیبانی مرورگرها رو آموزش داده
مرجع آموزش CSS 3 (http://developer1.ir/CSS_3/Index.aspx)

redhat2
یک شنبه 22 اردیبهشت 1392, 09:30 صبح
خوب اگه من بخوام یه همچین چیزی را با css3 بسازم به جای transition باید چی بنویسم . ؟ یعنی میخاوم با همین عکس ها این رادرست کنم ، آیا راهی هست ، یعنی به جای transition ، باید از چی استفاده کنم تا بتونماین حالت ( transition ) را در مرورگر firefox اجراکنم. ؟