Pure CSS LavaLamp Effect: How to keep LavaLamp on active menu?
I am using this pure CSS LavaLamp effect and I am almost happy with it:
HTML:
<ul>
<li><a href="#">✿</a></li><!--
--><li><a href="#">Lorem</a></li><!--
--><li><a href="#">Ipsum</a></li><!--
--><li><a href="#">Consectetur adipisicing</a></li><!--
--><li><a href="#">Sit amet</a></li>
</ul>
CSS
html{
font-family: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:#09C;
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:2em;
}
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:3px;
background:#ccc;
pointer-events:none;
/*transition*/
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}
ul li:nth-child(1) ~ li:last-child a{
right:25em;
width:2em;
}
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{
background:#c351fa;
}
ul li:last-child a{
min-width:5em;max-width:5em;
}
ul li a:hover,ul li a:focus{
color:#c351fa;
background-color:rgba(255,255,255,.6);
/*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;
}
Example at JSFiddle.net:
Click to see example above on JSFiddle.net
Unfortunately LavaLamp reverts to the original menu when other menu items are clicked and therefore set to .active-state. How can I keep the effect placed on the current active menuitem (as per the current .active-child)?
Many thanks for your help!: -)
source to share
The solution that will work here includes a radio button for each of your links. Through the ~ selector and entering the: checked property, you can manipulate links to be in a specific "state". You have to enable the radio buttons, make the same size as the li, and then set the opacity to 0. That way, you can adjust the position of the underline when the link is selected, since the checkboxes remain checked even if the user stops hovering over the links. Be sure to specify the same property-name for all checkboxes so that when you select a different link, the previous checkbox is cleared! If you have any more question, I can check if I can edit your fiddle, but your code is pretty extensive! But your work is very impressive, it looks very cool!
source to share