I'm attempting to make a drop down navigation menu with some CSS3 transitions. However, when using visibility hidden/visible, iOS doesn't display the drop down (it just goes to the link). If I use display none/block, iOS will display the drop down menu on the first click of the parent element, but the transitions don't work in any browsers.
Is there a way to get these transitions to function correctly in browsers and the drop-downs to work in iOS without using javascript?
Drop down doesn't work in iOS:
nav ul li ul {
position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; }
Transitions don't work in browsers:
nav ul li ul {
position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99;
-webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; }
After thinking about this some more I found documentation that I hadn't seen before -- some of the weirdness you're experiencing might be because you are attaching behavior to a pseudo-element on something that isn't interactive by default (only anchors and form elements are clickable).
http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html
(Ignore my original comment about event.preventDefault...I forgot you were working with list items instead of anchors.)
I do, however, still think JS is the best approach since you can be very specific about events attached to any kind of element. You can just apply a CSS class and it will use the transition properties you already specified.
Like this:
// CSS
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; }
// JS
// you could bind mouseover/out here too if you want it to work on both desktop & mobile
$('nav ul li').bind('click', function(){
$(this).children('ul').toggleClass('visible');
});
If you want to be extra awesome you could make it keyboard accessible by adding tabIndex="0" to the list items :)
I found a solution for this. Essentially ios does not bind the click to the hover for anything that is display:block/none or visibility:hidden/visible. So you need to just "hide" the dropdown using the "left" to compensate for <=ie8 that does not support opacity.
So essentially use your 2nd example with a minor tweak:
nav ul li ul {
position: absolute; opacity: 0; left: -888em; top: 50px; z-index: 99;
-webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
-ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul {opacity: 1; top: 40px; left:0;}
Then just be sure not to use "all" in your transitions or it will animate the left attribute as well :)
The only issue with this method is that your transitions will only work on the way in not the way out.
Related
Im testing a template for use on mobile phones, but can't get it to work in Chrome for IOS. I suspect it to be webkit-transition.
It works fine i Google Chome for PC
Link to template
.ac-container article{
background:#fff;
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
Are you using (~) as in #menuToggle:checked ~ #primary_nav_wrap { position: absolute; left: 0;} to trigger the transition. An upgrade to iOS 9 prevents that from working..... Try using (+) instead of (~)
Thank you in advanced for taking the time to look at this. I am having issues when dragging a jQuery UI draggable object from my fixed sidebar to my image as shown below. The problem is two-fold:
1) Even though the z-index is set to 9999, the object is no longer visible when it is dragged out of the fixed sidebar.
2) When the draggable object is dropped, its position is shifted up and to the left about ~30 or 40px.
Issue one (1) visualized:
Issue two (2) visualized:
I have tried changing the CSS position attribute to all types (absolute, relative, static etc) in all combinations and cannot seem to get it to work as intended.
I was hoping someone might be able to point me in the right direction in regards to these two issues. If you would like to see a live example of these issues, please see this JSFiddle:
http://jsfiddle.net/m6pgfu5m/3/
Here are the most pertinitent CSS attributes:
.signatureTool {
z-index: 999999999;
}
.image {
border: 1px solid #DADADA;
position: relative;
width: 100%;
margin-bottom: 50px;
}
#wrapper {
margin-top: -17px;
padding-left: 250px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper {
z-index: 999;
position: fixed;
left: 250px;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #E9E9E9;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow: hidden;
}
#page-content-wrapper {
width: 100%;
position: relative;
padding: 20px;
margin-right: 0;
}
I have a list item (ul li) that is in my header of my site, and when it is in any browser, it works well, it works fine. But when I access the website on my ipad, the first and last link go down.
here is what I mean:
and this is on my iPad:
Here is the code:
#header #personals nav ul li {
display: inline-block;
margin: 0;
}
#header #personals nav ul li a {
padding: 25px;
margin: 0;
}
.settings {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
background: url('images/settings.png') no-repeat center 15px;
height: 20px;
width: 50px;
padding: 15px;
padding-bottom: 103px;
}
.calendar {
background: url('images/calendar.png') no-repeat center center;
padding: 15px;
height: 30px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 50px;
}
Here is the jsfiddle: JSFiddle
Try this
Remove the padding-bottom property on the .settings rule and change the 15px value on the background property to center.
.settings {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
position: relative;
background: url('http://i58.tinypic.com/21o4ikl.png') no-repeat center center;
height: 20px;
width: 50px;
padding: 15px;
}
How do I get this code to work on iOS?
My iPad won't show the translate property.
I have read about using -webkit-backface-visibility: hidden; and -webkit-transform: translate3d, but its not working.
.logo-box {
display: inline-block;
vertical-align:middle;
width:115px;
margin: 0px 10px 0px 10px;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
.logo-box:hover {
transform: translate(0,-20px);
-webkit-transform: translate(0,-20px); /** Safari & Chrome **/
-o-transform: translate(0,-20px); /** Opera **/
-moz-transform: translate(0,-20px); /** Firefox **/
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
In some cases, adding perspective helped me out. You may want to try adding it and see it if works. You can read about it here:
http://www.w3schools.com/cssref/css3_pr_perspective.asp
I want to make 3 image effect is iOS that match Bootstrap effects:
http://getbootstrap.com/css/#images
I figured out rounded corners & circle - but..the framed one is stumping me.
"img-thumbnail" - makes a thin grey rounded rectangle frame around the image.
How can this be done?
Any library that does it?
Thx
Its pretty simple. It's just css borders. Here is the original class code from the bootstrap source.
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}