Ant Design - Right arrow on horiozontal menu - antd
This is the base ANT horizintal menu:
The Navigation Threes has a sub-menu but the layout of an element with submenu is the same as menu, so it's impossible for the user understand that this menu, has sub elements.
I would like to add an arrow on right (like in vertical). There is a configuration for that, or i need to modify some CSS ?
Desidered result:
You need to add these styles to your css file, because in horizontal mode and has not added :before and after to .ant-menu-submenu-arrow class.
.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow {
position: absolute;
top: 50%;
right: 16px;
width: 10px;
-webkit-transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
transition: transform .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
}
.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
position: absolute;
width: 6px;
height: 1.5px;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .85)), to(rgba(0, 0, 0, .85)));
background-image: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .85));
border-radius: 2px;
-webkit-transition: background .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
transition: background .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
transition: background .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1);
transition: background .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
content: "";
}
.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
-webkit-transform: rotate(45deg) translateY(-2px);
transform: rotate(45deg) translateY(-2px);
}
.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
-webkit-transform: rotate(-45deg) translateY(2px);
transform: rotate(-45deg) translateY(2px);
}
.ant-menu-submenu-horizontal > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, .ant-menu-submenu-horizontal > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before {
background: -webkit-gradient(linear, left top, right top, from(#1890ff), to(#1890ff));
background: linear-gradient(90deg, #1890ff, #1890ff);
}
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
-webkit-transform: rotate(45deg) translateY(-2px);
transform: rotate(45deg) translateY(-2px);
}
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
-webkit-transform: rotate(-45deg) translateY(2px);
transform: rotate(-45deg) translateY(2px);
}
.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
-webkit-transform: rotate(-45deg) translateX(2px);
transform: rotate(-45deg) translateX(2px);
}
.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
-webkit-transform: rotate(45deg) translateX(-2px);
transform: rotate(45deg) translateX(-2px);
}
.ant-menu-submenu-open.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.ant-menu-submenu-open.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
-webkit-transform: rotate(-45deg) translateX(-2px);
transform: rotate(-45deg) translateX(-2px);
}
.ant-menu-submenu-open.ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow:before {
-webkit-transform: rotate(45deg) translateX(2px);
transform: rotate(45deg) translateX(2px);
}
One solution is you can remove the icon on Submenu and place it on the title props (it accepts react node)
<SubMenu
key="SubMenu"
title={
<span>
Navigation Three - Submenu <DownOutlined />
</span>
}
>
//menu items
</SubMenu>
Related
z-index reversed in iOS and Safari macOS
The z-index of these images is set so they should be staked blue, red, green but in iOS browsers and Safari on macOS the order is reversed so they display green, red, blue.
Here is a CodePen, the issue effects all iOS browsers and Safari on macOS.
https://codepen.io/W3-design/pen/pBOJyy
HTML:
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
SCSS:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
-webkit-transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
&:nth-of-type(1) {
z-index: 100;
top: 0;
}
&:nth-of-type(2) {
z-index: 90;
top: 80px;
}
&:nth-of-type(3) {
z-index: 80;
top: 160px;
}
&:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
-webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
opacity: 1;
z-index: 101;
}
}
}
I would like the z-index to be the same across all browsers.
Here you are:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
}
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: translateZ(-1000px) rotate3d(1, 0, 0, 55deg) rotate3d(0, 0, 1, -30deg);
}
img:nth-of-type(1) {
z-index: 100;
top: 0;
}
img:nth-of-type(2) {
z-index: 90;
top: 80px;
}
img:nth-of-type(3) {
z-index: 80;
top: 160px;
}
img:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1, 1.1);
opacity: 1;
z-index: 101;
}
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
UIBModal animation override
I am trying to override the default animation for UIBModal. However this is not working. The default animation runs only.
.modal.modal-slide-in-right .modal-dialog {
opacity: 0;
-webkit-transform: translate(20%, 0%);
-ms-transform: translate(20%, 0%);
-o-transform: translate(20%, 0%);
transform: translate(20%, 0%);
-webkit-transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
-o-transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
}
.modal.modal-slide-in-right.in .modal-dialog {
opacity: 1;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
http://plnkr.co/edit/YQ0eHIWrHlm90oW5oS4r?p=preview
You forget to insert your extra.css stylesheet into the index.html <link rel="stylesheet" href="extra.css"> Here is a working plunk
CSS animation issue iOS
This code works well on Mozilla Firefox, Google Chrome, and MS explorer. However, it doesn't work at all on mobile devices, particularly iOS. Please let me know what needs to be added or removed to make it function properly.
HTML
<div class="bg-grad">
<div class="clouds">
<div class="cloud x1"></div>
</div>
</div>
CSS
/* BG Gradients
~-----------------------------------------*/
.bg-grad {
background: #000;
background: transparent url("http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg") center bottom no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.bg-grad .bg-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 6;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.bg-grad .bg-layer.on {
opacity: 1;
}
/* Clouds
~-----------------------------------------*/
.cloud {
width: 100%;
height: 900px;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
background: transparent url('http://freepngimages.com/wp-content/uploads/2014/11/ten-party-balloons.png') left bottom no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#media (max-width: 550px) {
.cloud {
display: none;
}
}
.x1 {
-moz-animation: moveclouds 40s linear infinite;
-webkit-animation: moveclouds 40s linear infinite;
animation: moveclouds 40s linear infinite;
width: 2036px;
height: 1608px;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
https://jsfiddle.net/r2uuvubg/2/
CSS cross browser issue - rotate not working on Safari and Ipad and Iphones
I want to have vertical text and am using the Transform property to do this. However I cannot get it to work on on Safari and iphones / IPads.
Can anyone help?
The page is: http://www.hydrossolutions.com/
h3.aviaccordion-title {
-webkit-transform-style: preserve-3d;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: translateY(90deg);
-webkit-transform-origin:left bottom 0;
-moz-transform: translateY(90deg);
-moz-transform-origin: left bottom 0;
-ms-transform: translateY(90deg);
-ms-transform-origin:left bottom 0;
-o-transform: translateY(90deg);
transform: translateY(90deg);
transform: rotate(90deg);
transform-origin: left bottom 0;
padding:0 !important;
margin:0 !Important;
white-space: nowrap !Important;
display: block;
}
After lots and lots of searching I found that I needed to use: webkit-transform: rotate(90deg); instead of -webkit-transform: translateY(90deg);
h3.aviaccordion-title {
-webkit-transform-style: preserve-3d;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: translateY(90deg);
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left bottom;
-moz-transform: translateY(90deg);
-moz-transform-origin: left bottom;
-ms-transform: translateY(90deg);
-ms-transform-origin:left bottom;
-o-transform: translateY(90deg);
transform: translateY(90deg);
transform: rotate(90deg);
transform-origin: left bottom;
padding:0 !important;
margin:0 !Important;
white-space: nowrap !Important;
display: block;
}
CSS spinner/loading icon does not display on Safari/iPhone
I am developing a mobile web application, and need to incorporate a loading spinner.
I have found one from a helpful website, and works on IE, FF and Chrome, but for some reason does not work on Safari on my iPhone 4.
HTML:
<div class="overlay">
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS:
.overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
.loader {
width: 0px;
height: 0px;
margin: 50vh auto;
/*position: relative;*/
position: absolute;
left: 50%;
top: -100px;
}
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
transform-origin: 10px 35px;
transform: rotate(0deg);
animation: loader 0.8s infinite;
}
.loader > div:nth-child(2) {
transform: rotate(45deg);
animation-delay: 0.1s;
}
.loader > div:nth-child(3) {
transform: rotate(90deg);
animation-delay: 0.2s;
}
.loader > div:nth-child(4) {
transform: rotate(135deg);
animation-delay: 0.3s;
}
.loader > div:nth-child(5) {
transform: rotate(180deg);
animation-delay: 0.4s;
}
.loader > div:nth-child(6) {
transform: rotate(225deg);
animation-delay: 0.5s;
}
.loader > div:nth-child(7) {
transform: rotate(270deg);
animation-delay: 0.6s;
}
.loader > div:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0.7s;
}
#keyframes loader {
0% {
background: transparent;
left: -10px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
transform-origin: -10px 35px;
}
}
Plunker: http://plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview
Solution required prefixes, e.g:
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
-ms-transform-origin: 10px 35px;
-o-transform-origin: 10px 35px;
transform-origin: 10px 35px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: loader 0.8s infinite;
-moz-animation: loader 0.8s infinite;
animation: loader 0.8s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes loader {
0% {
background: transparent;
left: -10px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
-webkit-transform-origin: -10px 35px;
-moz-transform-origin: -10px 35px;
transform-origin: -10px 35px;
}
}
Plunkr: plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview