I have these two icons that I have placed at the bottom right of my page with a fixed position.
It is working perfectly on larger screens but the icons move as the screen is resized.
HTML
<div class="general_social_icons">
<nav class="social">
<ul>
<li class="w3_facebook">Facebook </li>
<li class="w3_g_plus">Google+ </li>
</ul>
</nav>
</div>
CSS:
.social {
position: fixed;
bottom: 0%;
right:0%;
width: 4%;
z-index: 9999;
}
.social li a{
font-size:.7em;
}
.social ul {
padding: 0px;
}
.social ul li {
display: block;
margin: 5px;
width: 310px;
text-align: left;
padding: 10px;
-webkit-border-radius: 30px 0 30px 30px;
-moz-border-radius: 30px 0 30px 30px;
border-radius: 30px 0 30px 30px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.w3_facebook{
background:#3b5998;
}
.w3_g_plus{
background:#dd4b39;
}
.social ul li:hover {
-webkit-transform: translate(-110px, 0);
-moz-transform: translate(-110px, 0);
-ms-transform: translate(-110px, 0);
-o-transform: translate(-110px, 0);
transform: translate(-130px, 0);
}
.social ul li a{
color:#212121;
}
.social ul li:hover a {
color: #fff;
text-decoration: none;
}
Here is the fiddle:https://jsfiddle.net/746d9nyc/2/
How can I make sure that the icons stay at the same position at any screen size as they are on full screen.
This is happening because your .social container has a percentage width.
To solve it either:
• assign a fixed width
.social {
width:27px;
}
• set a minimum width
.social {
min-width:27px;
}
The problem is that you have the width on .social set as a percentage.
.social {
position: fixed;
bottom: 0%;
right:0%;
width: 150px; // or some fixed value
z-index: 9999;
}
updated fiddle: https://jsfiddle.net/746d9nyc/3/
Related
In the actual version of the Chrome browser there is a little issue when transition of this code finishes: 1 pixel shift of the line height on the bottom (on hover of the links).
Also, I've noticed that in code snippets of jsfiddle and here it may not be visible, but on the CodePen and on my website this is what happens. Checked on Firefox - everything is fine and on every web site.
Here is snippet of Stack Overflow and CodePen:
https://codepen.io/Maxim222/pen/OQWWEB
body{
background:#111;
}
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
float:left;
position:relative;
}
li a{
padding:10px;
color:#fff;
text-decoration:none;
}
li a:before{
content:'';
-webkit-transform: scaleX(0);
transform: scaleX(0);
background-color: #fb0;
bottom: 0px;
height: 15px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
transition:all 1s;
}
li a:hover:before{
bottom:0;
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
<div>
<ul>
<li>Hello</li>
<li>Worldsdfsdf</li>
</ul>
</div>
From what I know, it's not your fault, it's a "glitch" with the scaleX param. If you use 0.99 as a value instead of 1, it should work fine.
body {
background: #111;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
position: relative;
}
ul li a {
padding: 10px;
color: #fff;
text-decoration: none;
}
ul li a:before {
content: '';
-webkit-transform: scaleX(0);
transform: scaleX(0);
background-color: #fb0;
bottom: 0px;
height: 15px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
transition: all 1s;
}
ul li a:hover:before {
bottom: 0;
transform: scaleX(0.99);
-webkit-transform: scaleX(0.99);
}
<div>
<ul>
<li>Hello</li>
<li>Worldsdfsdf</li>
</ul>
</div>
Making a slide down drop menu animation, if I set max height to 100% the <ul> will only extend its height to the first nested <li>. I can set the max-height in the Keyframe to 400%, but this causes to animation to go twice as fast in other drop downs with less submenus. The height of the <ul> before I hover over seems to be the full size when debugging, not sure why it gets limited in the animation.
And as a secondary question, will I run into browser support issues using animations like this?
JSFiddle
#keyframes slideDown {
0% {
max-height: 0%;
opacity: .2;
}
100% {
max-height: 400%;
opacity: 1;
}
}
#menuTabs {
float: left;
position: absolute;
margin-left: 0px;
background: #256AAA none repeat scroll 0% 0%;
width: 100%;
overflow: visible;
}
#menuTabs ul {
left: 50%;
margin: 0px;
clear: left;
float: left;
padding: 0px;
font-size: 15px;
position: relative;
text-align: center;
font-family: helvetica;
list-style: outside none none;
}
#menuTabs ul li {
margin:0;
padding:0;
right:50%;
float:left;
display:block;
list-style:none;
min-width: 170px;
max-width: 170px;
position:relative;
}
#menuTabs ul li a {
color:#000;
display:block;
background:#ddd;
padding:0px 50px;
line-height:1.3em;
text-decoration:none;
font-family:'Oxygen', sans-serif;
color: #FFF;
margin-top: 0px;
font-weight: bold;
padding: 15px 50px;
text-decoration: none;
background: #Blue;
}
#menuTabs ul li:hover > a {
visibility: visible;
text-decoration: none;
background: #CCC;
}
ul#menu li.selected a {
color: #000;
background-color: #fff;
}
#menuTabs ul li ul {
margin: 0;
padding: 0;
width: 100%;
visibility: hidden;
overflow: hidden;
position: absolute;
left: 0%;
max-height: 0%;
}
#menuTabs ul li ul a {
z-index: 1;
display: block;
font-size: 12px;
max-width: 70px;
min-width: 120px;
min-height: 22px;
overflow: visible;
position: relative;
padding: 14px 25px;
background: #256AAA none repeat scroll 0% 0%;
}
#menuTabs ul li ul a:hover {
background: #CCC;
}
#menuTabs ul li:hover ul {
visibility: visible;
position: absolute;
background: #CCC;
}
#menuTabs ul li:hover ul {
max-height: 0%;
animation-name: slideDown;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#menuTabs ul li ul li {
left: 0%;
display: block;
}
<div id="menuTabs">
<ul id="menu">
<li> Services
<ul id="class">
<li id="srv1"> SubMenu
</li>
<li id="srv2"> SubMenu2
</li>
</ul>
<li>Resources
<ul>
<li> SubMenu2</li>
<li> SubMenu3</li>
<li> SubMenu4</li>
<li> SubMenu5</li>
</ul>
</li>
</li>
</ul>
</div>
I would do it by just using transition instead of keyframes for that, it runs smoother, and much easier. I haven't found a way to do the dynamic height thing, so I think you'll have to pick a height with the max number of items you're possibility going to have.
jsfiddle
#menuTabs ul li ul {
...
max-height: 0;
transition: all .1s ease-out;
opacity: .5;
}
#menuTabs ul li:hover ul {
...
max-height: 400%;
transition: all .25s ease-in;
opacity: 1;
}
I've made a three level menu in HTML and CSS.
The menu works until the third level (under products). The third ul sub-menu isn't displaying properly. It's being aligned improperly. I want it to get out of it's parent menu and be positioned at the right.
Here is a jsfiddle with my code.
I've changed some postions of ul, li but they don't seem to be working for me.
CSS, HTML in the fiddle:
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#menucon {
width:100%;
background-color:#222;
}
#nav {
clear: both;
font-size: 12px;
height: 42px;
}
#nav ul {
background-color: #222;
background-color: rgba(34,34,34,0.70);
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
#nav ul.sec { z-index: 2; }
#nav ul.third { z-index: 3; border:2px solid red; }
#nav li {
background: url('menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 27px;
padding: 14px 30px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav ul.subs li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 27px;
padding: 13px 25px 0;
position: relative;
width:178px;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs.sec {
left: 0;
top: 41px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
position:absolute;
}
#nav li:hover ul.subs.third {
left: 60px; /* test */
top: 41px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
position:absolute;
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li.sec {position:relative;}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 32px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 400ms ease-out ;
-ms-transition: all 400ms ease-out ;
-o-transition: all 400ms ease-out ;
-webkit-transition: all 400ms ease-out ;
transition: all 400ms ease-out ;
}
#lavalamp:hover {
-moz-transition-duration: 4500s;
-ms-transition-duration: 4500s;
-o-transition-duration: 4500s;
-webkit-transition-duration: 4500s;
transition-duration: 4500s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp, #lavalamp.act1 {
left: 35px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp, #lavalamp.act2 {
left: 180px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp, #lavalamp.act3{
left: 345px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp, #lavalamp.act4 {
left: 486px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp, #lavalamp.act5 {
left: 620px;
}
<div id="menucon">
<ul class="innercon" id="nav">
<li>HOME PAGE</li>
<li>PRODUCTS
<ul class="subs sec">
<li class="sec">LEVEL 1
<ul class="subs third">
<li>LEVEL 2</li>
<li>LEVEL 2</li>
</ul>
</li>
<li>LEVEL 1</li>
<li>LEVEL 1</li>
<li>LEVEL 1</li>
<li>LEVEL 1</li>
<li>LEVEL 1</li>
</ul>
</li>
<li>CONTACT US</li>
<div id="lavalamp"></div>
</ul>
</div>
Here is a DEMO to try if it fits your problem.
You gonna have to add this just this css:
.third{
display: none;
}
li > ul.sec > li:hover > ul.third {
display: inline-block;
position: absolute;
left: 100%!important;
top: 0!important;
z-index: 9;
width: 150px;
}
Explanation:
when you hover your second level item (li) you will show your submenu 100% left, i.e. next to the hovered li and top: 0 will place it inline with the hovered li.
You can adjust the width and z-index for your needs.
is this what you wanted?
Your question is still kinda unclear what you want.
ul.sec {
overflow: visible !important;
}
.subs .third {
left: 228px !important;
top: 41px !important;
}
https://jsfiddle.net/gsw4jxy8/4/
I can't seem to find the issue that is causing my links to only be clicked on the white portion. It's a "3D" button by that, I mean it is a link with CSS rotate transitions. I'm not able to find any solutions so I'm looking for some help!
Here's the codepen link.
HTML:
<nav>
<ul>
<li>Home
</li>
<li>Plans
</li>
<li>Forums
</li>
<li>Team
</li>
</ul>
</nav>
CSS
* {
box-sizing: border-box;
}
nav {
background: #e9e9e9;
margin: -1rem 0rem;
z-index: 0;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 0.05rem;
}
nav ul li a {
display: inline-block;
padding: 1rem;
color: #000;
text-decoration: none;
transition: transform 0.3s ease 0s;
transform-origin: 50% 0px 0px;
transform-style: preserve-3d;
}
nav ul li a.current {
color: #ffc400;
}
nav ul li a: hover {
background: #e9e9e9;
color: #000;
transform: rotateX(90deg) translateY(-22px);
}
nav ul li a::before {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
padding: 4px 0px;
text-align: center;
line-height: 50px;
background: none repeat scroll 0% 0% #ffc400;
color: #FFF;
content: attr(data-hover);
transition: #ffc400 0.3s ease 0s;
transform: rotateX(-90 deg);
transform -origin: 50% 0px 0px;
}
Well the issue is that you're translating the link out of view so it cannot be clicked:
nav ul li a:hover {
background: #e9e9e9;
color: #000;
transform: rotateX(90deg) translateY(-22px);
}
The dead simple solution to this problem would be simply put an a element around the li element and change the current a element to a div, like so:
This way, the div and li elements that are being translated and rotated are surrounded by the clickable link.
<a href="#">
<li>
<div data-hover="Forums">Forums</div>
</li>
</a>
CSS:
* {
box-sizing: border-box;
}
nav {
background: #e9e9e9;
margin: -1rem 0rem;
z-index: 0;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
text-transform: uppercase;
font-size: 1.5rem;
letter-spacing: 0.05rem;
}
nav ul li div {
display: inline-block;
padding: 1rem;
color: #000;
text-decoration: none;
transition: transform 0.3s ease 0s;
transform-origin: 50% 0px 0px;
transform-style: preserve-3d;
}
nav ul li div.current {
color: #ffc400;
}
nav ul li div:hover {
background: #e9e9e9;
color: #000;
transform: rotateX(90deg) translateY(-22px);
}
nav ul li div::before {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
padding: 4px 0px;
text-align: center;
line-height: 50px;
background: none repeat scroll 0% 0% #ffc400;
color: #FFF;
content: attr(data-hover);
transition: #ffc400 0.3s ease 0s;
transform: rotateX(-90deg);
transform-origin: 50% 0px 0px;
}
And then adding a element styling to make everything work out:
nav ul a {
text-decoration: none;
}
Here's the updated pen.
I found this method of making one image featuring different social icons on it into different social links by using x and y icons to define the section of the image you want featured in a link.
The issue I'm having is that once I set up the code, the background image isn't showing up. If anyone could offer their insight into why this code isn't working as it shoul, it would be greatly appreciated!
CSS:
aside .social {
margin-top: 40px;
}
.social ul {
list-style-type: none;
margin: 0;
}
.social li {
display: block;
width: 24px;
height: 24px;
margin: 0 4px 6px 0;
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
line-height: 20px;
}
.social li:nth-child(8n+0) {
margin-right: 0;
}
.social li a, .social li a:active, .social li a:visited {
opacity: 0.5;
-moz-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
.social li a:hover {
opacity: 1;
}
.social li.facebook a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) 0 0; }
.social li.twitter a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -24px 0; }
.social li.youtube a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -48px 0; }
.social li.instagram a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -72px 0; }
.social li.google a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -96px 0; }
.social li.flickr a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -120px 0; }
.social li.linkedin a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -144px 0; }
HTML:
<h1>Find Us On</h1>
<div class="social">
<ul>
<li class="facebook"></li>
<li class="twitter"></li>
<li class="youtube"></li>
<li class="google"></li>
<li class="instagram"></li>
<li class="flickr"></li>
<li class="linkedin"></li>
</ul>
<div>
I have also created a JSFiddle for your convenience here: http://jsfiddle.net/HRHnY/
The code is rendering the list, it's just the background image isn't displaying...
Your anchors are collapsing to 0x0 because you have no content in them. They don't auto-expand to the size of the parent just because you have a background image. Explicitly give them a width/height like the li and you get http://jsfiddle.net/HRHnY/2/
Relevant CSS for the anchors:
display: block;
width: 24px;
height: 24px;
Alternatively you could set width and height to 100% of the parent instead of explicitly setting it.
Working jsFiddle Demo
The a elements, are inline and the width and height of them,
is calculated by the data within them.
So you must set them explicitly, add this rule to your CSS:
.social a {
display: inline-block;
width: 24px;
height: 24px;
}
TIP
It's better to write background-image only once in general selector:
.social a {
background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png);
}
And just change background-position for each element:
.social li.facebook a {
background-position: 0 0;
}
.social li.twitter a {
background-position: -24px 0;
}