I want to make some fancy social buttons with Font Awesome, CSS3 and lists in HTML. It should look like this. But now it is not possible to click on the anchor (a-tag).
How can I accomplish this?
ul {
list-style: outside none none;
}
ul li {
display: block;
float: left;
background-color: #099;
margin-right: 10px;
padding: 10px 0px;
text-align: center;
width: 40px;
opacity: 0.2;
transition: all 0.2s ease-in-out 0s;
}
li::before {
color: #FFF;
font-size: 35px;
}
ul li a {
color: transparent;
font: 0px/0 a;
white-space: nowrap;
}
ul li:hover {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul id="menu-social" class="menu">
<li id="menu-item-googleplus" class="fa fa-google-plus menu-item menu-item-googleplus">
Google+
</li>
<li id="menu-item-facebook" class="fa fa-facebook menu-item menu-item-facebook">
Facebook
</li>
</ul>
Add position relative to the li elements and then stretch the anchor.
ul li {
display: block;
float: left;
background-color: #099;
margin-right: 10px;
padding: 10px 0px;
text-align: center;
width: 40px;
opacity: 0.2;
transition: all 0.2s ease-in-out 0s;
/* Add position */
position:relative;
}
ul li a {
color: transparent;
font: 0px/0 a;
white-space: nowrap;
/* Stretch a element */
position: absolute;
left:0;
top:0;
width:100%;
height: 100%;
}
Related
I have a menu and submenu from one of the elements. The code is here: http://jsfiddle.net/mq5g6upe/ . I would like you to tell me how to implement vertical dropdown menu from element My project because now it not seem ok.
header.html
<header>
<div class="main">
<ul>
<li>Home</li>
<li>My projects
<ul class="my-projects-dropdown">
<li>Endless Blow
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>My Google Play link</li>
<li>About</li>
<li><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
</ul>
</div>
</header>
header.css
#container {
margin: 0 auto;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
}
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a:hover {
background-color: cyan;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
vertical-align: middle;
line-height: normal;
}
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
}
ul li:nth-child(5){
margin-left: 20px;
vertical-align: middle;
line-height: normal;
}
ul ul {
display: none;
position: absolute;
}
ul ul li {
float:none;
display:list-item;
position: relative;
}
Now there are three problems. First the submenu of items seems to overlap on another elements. Second there is a distance between the menu element My projects and first element of submen. Third outside jsfiddle in production (https://jakuwegiel.web.app/home) also submenu is moved a bit to right.
I forked your fiddle. check this https://jsfiddle.net/wrtxkz0d .
Made these changes in your css. Dropdown is working.
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
margin:0;
padding: 0;
}
ul ul li {
float:none;
display:list-item;
position: relative;
margin: 13px 0;
}
I've been wondering how could it be possible to implement transfer animation of borders (or box-shadow) from one element to another.
Here's raw example,
.item {
float: left;
width: 33.33%;
padding: 0;
text-align: center;
}
.item:hover {
box-shadow: 0 0 0 3px black;
/* border: 3px solid black; */
}
.sections {
width: 100%;
height: 100%;
margin: 0 auto;
}
ul {
list-style-type: none;
}
a:hover {
text-decoration: none;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="sections">
<ul>
<li class="item">Element 1
</li>
<li class="item">Element 2
</li>
<li class="item">Element 3
</li>
</ul>
</div>
</body>
</html>
In this case "borders" is box-shadow or border in .item:hover class. As you can see, borders appears and destroys on hover event, but I need borders flowing from one li element to another li element without destroying, keeping being visible all the time.
I swear I've seen such thing on several web sites, could you suggest something with this one maybe with help of javascript?
Maybe this can help you
I got this from Codepen this is not my code
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.two:hover ~ hr {
margin-left: 25%;
}
.three:hover ~ hr {
margin-left: 50%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<div class="container">
<ul>
<li class="one">Uno</li><!--
--><li class="two">Dos</li><!--
--><li class="three">Tres</li><!--
--><li class="four">Quatro</li>
<hr />
</ul>
</div>
Source: https://codepen.io/rm/pen/ldhon
Hope it works for you
html {
font-family: 'Josefin Slab', 'Comfortaa', sans-serif;
font-size: 1.2em;
background: #eee;
}
ul {
position: relative;
width: 27em;
height: 2em;
margin: 100px auto;
padding: 0;
white-space: nowrap;
}
ul li {
display: inline;
text-align: center;
}
ul li a {
position: relative;
top: 0;
left: 0;
right: 25em;
bottom: 0;
display: inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: .4em .2em;
color: #222;
text-decoration: none;
text-shadow: 0 1px 0 white;
/*transition*/
-webkit-transition: width .3s,right .3s;
-moz-transition: width .3s,right .3s;
-o-transition: width .3s,right .3s;
transition: width .3s,right .3s;
}
ul li:nth-child(1) a { width: 4em; }
ul li:nth-child(2) a { width: 4em; }
ul li:nth-child(3) a { width: 4em; }
ul li:nth-child(4) a { width: 12em; }
ul li:nth-child(5) a { width: 5em; }
ul li:last-child a::after {
content: "";
position: absolute;
right: inherit;
bottom: -3px;
width: inherit;
height: 38px;
background: #ccc;
pointer-events: none;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
border: 1px solid transparent;
background: transparent;
}
ul li:nth-child(1) ~ li:last-child a {
right: 25em;
width: 4em;
}
ul li:nth-child(2):hover ~ li:last-child a {
right: 21em;
width: 4em;
}
ul li:nth-child(3):hover ~ li:last-child a {
right: 17em;
width: 4em;
}
ul li:nth-child(4):hover ~ li:last-child a {
right: 5em;
width: 12em;
}
ul li:nth-child(5):last-child:hover a {
right: 0;
width: 5em;
}
ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after { border-color: red; }
ul li:last-child a {
min-width: 5em;
max-width: 5em;
}
ul li a:hover,
ul li a:focus {
color: red;
/*transition*/
-webkit-transition: width .3s,right .3s,background-color .3s;
-moz-transition: width .3s,right .3s,background-color .3s;
-o-transition: width .3s,right .3s,background-color .3s;
transition: width .3s,right .3s,background-color .3s;
}
ul li a:focus { border-bottom: 3px solid #c351fa; }
<ul>
<li>Home </li><!--
--><li> Lorem </li><!--
--><li> Ipsum </li><!--
--><li> Lorem dummy text</li><!--
--><li> Sit amet </li>
</ul>
We can use a pseudo element on the last li a element to show a border as CSS lets us select the last sibling element when any element in the list is hovered.
We can then set the border color and set the right position of this pseudo element and have it transition to the hovered li a element position.
It is possible to have a fairly general solution - setting a CSS variable to the number of elements in the list (and the transition time too if wanted) and (almost) everything else falls into place using CSS calc.
However, unfortunately, although CSS has the ability in theory to let you use the n value (in nth-child(n)) this only seems to work for pseudo element content at the moment so we can't use it to do calculations.
I have therefore put in a set of nth child settings in the CSS - currently there are 6 so you can have a list of up to 6 without changing anything except for --n. If you want more then add more.
Here's the snippet.
.sections ul {
--n: 3; /* the number of items in the list */
--t: 1s; /* the time taken to move to the new hover position */
--w: calc(100% / var(--n));
box-sizing: border-box;
padding: 20px 0;
margin: 0;
}
/* below is the original CSS */
.item {
float: left;
width: var(--w);
padding: 0;
text-align: center;
}
.item a {
text-align: center;
}
.sections {
width: 100%;
height: 100%;
margin: 0 auto;
}
ul {
list-style-type: none;
}
a:hover {
text-decoration: none;
}
a {
text-decoration: none;
}
/* end of the original CSS */
ul li:last-child a::after {
position: absolute;
content: '';
right: inherit;
width: var(--w);
height:1.5em;
transform: translateY(-0.3em);
pointer-events: none;
transition: right var(--t) ease;
}
ul li:nth-child(1):hover ~ li:last-child a {
right: calc(var(--w) * calc(var(--n) - 1));
}
ul li:nth-child(2):hover ~ li:last-child a { /*when you hover on the second element it changes the last element's a width and its position */
right: calc(var(--w) * calc(var(--n) - 2));
}
ul li:nth-child(3):hover a {
right: calc(var(--w) * calc(var(--n) - 3));
}
ul li:nth-child(4):hover a {
right: calc(var(--w) * calc(var(--n) - 4));
}
ul li:nth-child(5):hover a {
right: calc(var(--w) * calc(var(--n) - 5));
}
ul li:nth-child(6):hover a {
right: calc(var(--w) * calc(var(--n) - 6));
}
ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after {
border: 2px solid black;
}
ul li a {
width: 100%;
}
<div class="sections">
<ul>
<li class="item">Element 1
</li>
<li class="item">Element 2
</li>
<li class="item">Element 3
</li>
</ul>
</div>
Here's the code I have problem with my underline hover effect its exppanding extra how to fix it please help me out ************************
HTML
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li><a class="dropbtn">Models</a>
<ul class="dropdown-content">
<li></li>
<li>Audi</li>
<li>Bmw</li>
<li>Mercedes</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
And also i want my dropdown in the middle of his parent And here its*********
CSS
.nav-wrap {
background: white;
width: 100%;
}
#example-one {
text-align: right;
}
#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
top:-20px;
}
#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
transition: width all 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color:white;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
#example-one li li {
display: block;
}
#example-one li:hover>ul {
display: block;
}
If I understand your problem correctly, the issue is with the dropdown items not being centered and the dropdown underline being too long. I believe this issue is caused by the padding on the dropdown div.
To resolve this, add some normalised padding to your .dropdown-content class:
.dropdown-content {
padding: 0 20px;
}
let the underline be attached to the text it self not to all the list item so it takes the width of just the text, now it takes the width of the whole cell in the list
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 want to make a drop-down menu transition, but it doesn't work at all. Other transitions work just fine but this one is really stubborn. What exactly am I doing wrong ?
In this example, the drop-down does not transition when it is shown:
a {
color: #FFF;
text-decoration: none;
}
li {
height: 20px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 5px;
padding-right: 5px;
font-size: 17px;
color: #FFF;
display: inline-block;
vertical-align: top;
background-color: #4CA0DB;
}
li:hover {
transition: all 0.3s;
background-color: #4CA0DB;
}
.carret {
position: relative;
margin-left: 5px;
bottom: 1px;
font-size: 12px;
}
/*this is where it breaks*/
.menu-hover ul li {
display: none;
}
.menu-hover:hover ul li {
background-color: #4CA0DB;
display: block;
}
.menu-hover ul {
transition: all 0.3s ease;
}
<nav>
<ul>
<li class="menu-hover">ABOUT THE UNIVERSITY<span class="carret">▼</span>
<ul class="dropdown">
<li>
За нас</li>
<li>
Професии</li>
<li>
Планове</li>
<li>
Специалности</li>
<li>
Преподаватели</li>
<li>
Финансиране</li>
<li>
Кандидатстване</li>
</ul>
</li>
</ul>
</nav>
I finally got it working by using visibility: hidden and visibility: visible instead of display: none and display: block. Thanks for the help! This is how it looks now:
.menu-hover ul li {
display: block;
visibility: hidden;
}
.menu-hover:hover ul li {
background-color: #4CA0DB;
visibility: visible;
transition: all 0.3s ease;
}