I'm trying to get a simple jQuery animation to work and I can't seem to make it happen. I'm not sure if I'm overlooking a simple syntax issue or something bigger. The samples I've found online don't seem to work either, so I figured I'd try to get a second opinion.
The relevant portions of the head is as follows:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('.menu_ul li').mouseenter(
function() {
$('#menuitem1').animate({
'background-image': 'linear-gradient(to bottom, #1058c4 0%, #1058c4 100%)',
'color' : '#ffffff'
},500);
}
);
$('.menu_ul li').mouseleave(
function() {
$(this).animate({
'background-image' : 'linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%)',
'color' : '#343434'
},500);
}
);
});
</script>
The HTML is as follows:
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME</li>
<li id="menuitem2">PLAYLIST</li>
<li id="menuitem3">COMMUNITY</li>
<li id="menuitem4">ABOUT US</li>
</ul>
The CSS for it as follows:
.menu_ul li {
padding-top:13px;
text-align:center;
display:block;
float:left;
color:#343434;
width:237px;
height:35px;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
}
Thanks in advance.
Here's one way to change the background gradient with an opacity change on a secondary element:
HTML
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME<span> </span></li>
<li id="menuitem2">PLAYLIST<span> </span></li>
<li id="menuitem3">COMMUNITY<span> </span></li>
<li id="menuitem4">ABOUT US<span> </span></li>
</ul>
jQuery
$('.menu_ul a').mouseenter(
function() {
$(this).siblings('span').animate({
'opacity' : 1
},500);
}
);
$('.menu_ul a').mouseleave(
function() {
$('.menu_ul span').animate({
'opacity' : 0
},500);
}
);
CSS
.menu_ul li {
padding:12px 0;
margin:0;
text-align:center;
display:block;
float:left;
color:#343434;
width:237px;
height:35px;
position:relative;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
}
.menu_ul a,
.menu_ul span{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.menu_ul a{
z-index:1;
line-height:55px;
display:block;
}
.menu_ul span{
opacity:0;
z-index:0;
display:block;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%);
}
jsFiddle Here
But let's be real here - CSS3 is better. (depending on the browser support needed)
HTML
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1">HOME</li>
<li id="menuitem2">PLAYLIST</li>
<li id="menuitem3">COMMUNITY</li>
<li id="menuitem4">ABOUT US</li>
</ul>
CSS
.menu_ul li {
padding:0;
margin:0;
text-align:center;
display:block;
float:left;
width:237px;
}
.menu_ul a{
margin:0;
padding:12px 0;
display:block;
color:#343434;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.menu_ul a:hover{
color:#fff;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%);
}
jsFiddle.
Related
I am trying to change the CSS property of a specific <li> element by adding a new CSS class to it.
I tried below jQuery code and it works how I want it to be.
$("li").click(function(event) {
let active = event.target.id;
// animation(event);
if (active == "equal") {
$("#" + active).css("background-color", 'hsl(6, 70%, 34%)');
}
});
/* equals button */
ul:last-child li:last-child {
margin: 0 4% 0 0;
color: hsl(0, 0%, 100%);
background-color: hsl(6, 63%, 50%);
box-shadow: 0px 3px 0px 0px hsl(6, 70%, 34%);
}
.equalBtnAnimation {
background-color: hsl(6, 70%, 34%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="buttons">
<ul>
<li id="seven">7</li>
<li id="eight">8</li>
<li id="nine">9</li>
<li id="del">Del</li>
</ul>
<ul>
<li id="four">4</li>
<li id="five">5</li>
<li id="six">6</li>
<li id="add">+</li>
</ul>
<ul>
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
<li id="sub">-</li>
</ul>
<ul>
<li id="aps">.</li>
<li id="zero">0</li>
<li id="div">/</li>
<li id="mul">x</li>
</ul>
<ul class="row">
<li class="col-5" id="reset">Reset</li>
<li class="col-5 equalBtnAnimation" id="equal">=</li>
</ul>
</section>
I thought that the below class will override the css properties but it doesn't. After inspecting the code i saw this:
This is the output:
This is the expected output i get from the above jQuery code:
instead, I would like to add it as a class. It would be a great help if someone could tell me why the above is not working...
For higher specificity, add the class to the first selector.
ul:last-child li:last-child {
margin: 0 4% 0 0;
color: hsl(0, 0%, 100%);
background-color: hsl(6, 63%, 50%);
box-shadow: 0px 3px 0px 0px hsl(6, 70%, 34%);
}
ul:last-child li:last-child.equalBtnAnimation {
background-color: hsl(6, 70%, 34%);
}
Which CSS rule will be applied depends on selector specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Use
ul:last-child li:last-child.myNewActiveClass {
background-color: hsl(6, 70%, 34%);
}
Or override other rules by adding !important
.myNewActiveClass{
background-color: hsl(6, 70%, 34%) !important;
}
then in JS:
$("#" + active).addClass("myNewActiveClass");
//or if you inisist to use element style
$("#" + active).css("background-color", 'hsl(6, 70%, 34%) !important');
I have made an animated profile card using CSS and JS, when hovered on it flips and stretches the name and role title up and around and shows the full backside card information. It works perfectly in Firefox and Chrome, but not in Safari.
It does flip around and shows all contact information when animating but at the end of the animation, the full contact information disappears and only reverts back to the original 'name and role title' on the frontside but upside-down.
The full code and live page can be found here: https://www.leap.co.uk/leadership/index-flip2.html
After reading a few articles, I have tried adding the '-webkit-backface-visibility:hidden;' to all 'backface-visibility:hidden;' css but this hasn't worked at all.
I also added a z-index to the 'back' section which fixes it and shows all information at the end of the animation but when it reverts back (after hover is taken off) it still shows instead of just the 'name and role title'.
<!-- HTML -->
<!-- language: lang-html -->
<body>
<div class="contact">
<div class="initials">RM</div>
<div class="flip back">
<div class="info">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
<hr/>
<div class="phone">Phone<br/>
<span>(203)555-5555</span>
</div>
<hr/>
<div class="email">Email<br/>
<span>rmarquardt.1#gmail.com</span>
</div>
<hr/>
</div>
<div class="icon-set">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/skype1.svg" class="skype"/>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/delve1.svg" class="delve" />
</div>
</div>
<div class="flip front">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
</div>
</div>
</body>
/* CSS */
<!-- language: lang-css -->
html {
height:100%;
}
body {
height:100%;
font-family:"Segoe UI";
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
background: linear-gradient(to bottom, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
}
#run {
position:absolute;
top:20px;
right:20px;
}
.contact {
position:absolute;
height:250px;
width:200px;
background:#37674b;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .initials {
margin-top:33px;
color:#fff;
font-size:80px;
font-family:"Segoe UI Light";
margin-left:10px;
letter-spacing:10px;
}
.contact .flip {
width:198px;
border:1px inset #37674b;
}
.contact .front {
backface-visibility:hidden;
position:absolute;
background:#f0f0f0;
height:60px;
bottom:0;
text-align:center;
}
.contact .front .name {
margin-top:5px;
font-size:16px;
line-height:25px;
font-weight:600;
}
.contact .front .title {
font-size:12px;
font-style:italic;
}
.contact .back {
backface-visibility:hidden;
overflow:hidden;
background:#f0f0f0;
position:absolute;
bottom:0;
height:60px;
}
.contact .back .info {
padding:5px 10px;
}
.contact .back .info .name {
font-size:18px;
line-height:25px;
font-weight:600;
}
.contact .back .info .title {
font-size:12px;
font-style:italic;
/* margin-bottom:20px; */
}
.contact .back .info .phone, .contact .flip .info .email, .contact .flip .info .skype {
margin-top:20px;
font-size:14px;
font-weight:600;
}
.contact .back .info div span {
font-size:12px;
font-weight:normal;
}
.contact .icon-set {
height:45px;
position:absolute;
margin:auto;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .icon-set img {
width:30px;
margin:0px 15px;
}
/* JS */
<!-- language: lang-js -->
TweenMax.set('.contact', {perspective:700});
TweenMax.set('.flip', {transformStyle:"preserve-3d"});
TweenMax.set('.back', {rotationY:-180, rotation:180});
$('.contact').hover(function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:180});
TweenMax.to([back, front], .7, {height:'100%'});
},
function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:0});
TweenMax.to([back, front], .7, {height:60});
});
I expect the full 'back' information to show on animation completion but when the hover event is taken off, for the 'front' information only to show. This works on all other browsers except safari.
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 5 years ago.
I'm writing a FreeCodeCamp project - a Pomedoro Countdown.
I need help in understanding why it does not return to the same place when the timer reaches zero.
var sessionLength=25;
var breakLength=5;
var sound = document.getElementById("audio");
var timer=10;
var count=breakLength*60;
$(document).ready(function(){
function timer()
{
count=count-1;
if (count <= 0)
{
$("#counterShow").html("00:00");
// clearInterval(counter);
console.log("hey");
}
$("#counterShow").html(Math.floor(count/60)+":"+count%60);
//Do code for showing the number of seconds here
}
$("img").click(function(){
counter=setInterval(timer, 1000); //1000 run ,every 1 second
count=sessionLength*60;
timer=10;
timer(); // <<----- HERE!
console.log("Check if timer returned and play sound");
sound.play()
});
});
$("#sessionMinus").click(function(){
if(sessionLength>1){
sessionLength--;
}
$("#sessionShow").html(sessionLength);
});
$("#sessionPlus").click(function(){
sessionLength++;
$("#sessionShow").html(sessionLength);
});
$("#breakMinus").click(function(){
if(breakLength>1){
breakLength--;
}
$("#breakShow").html(breakLength);
});
$("#breakPlus").click(function(){
breakLength++;
$("#breakShow").html(breakLength);
});
body{
font-family: 'Sedgwick Ave', cursive;
background-color:yellow;
}
.imageArea{
text-align:center;
margin:auto auto;
width:100%;
}
.image{
margin:auto auto;
}
h3{
position:absolute;
top:282px;
left:5px;
width:100%;
}
#sessionLength{
margin-top:20px;
text-align:center;
width:30%;
float:left;
margin-left:15%;
}
#breakLength{
margin-top:20px;
text-align:center;
width:30%;
float:right;
margin-right:15%;
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
box-shadow:inset 0px 1px 0px 0px #f5978e;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
background-color:#f24537;
-moz-border-radius:38px;
-webkit-border-radius:38px;
border-radius:38px;
border:1px solid #000000;
display:inline-block;
cursor:pointer;
color:#fff200;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:3px 15px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
background-color:#c62d1f;
}
.myButton:active {
position:relative;
top:1px;
}
#media only screen and (max-device-width: 480px) {
h1{
font-size:20px;
}
#sessionLength{
margin-top:20px;
text-align:center;
width:37%;
float:left;
margin-left:5%;
}
#breakLength{
margin-top:20px;
text-align:center;
width:37%;
float:right;
margin-right:5%;
}
h3{
position:absolute;
top:254px;
left:3px;
width:100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">
</head>
<body>
<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>
<a onclick="PlaySound()"></a>
<script>
</script>
<div id="sessionLength" >
<h1> Session length </h1>
<button style="display:inline" class="myButton" id="sessionMinus">-</button>
<p id="sessionShow" style="display:inline" >25</p>
<button style="display:inline" class="myButton" id="sessionPlus">+</button>
</div>
<div id="breakLength">
<h1> Break length</h1>
<button style="display:inline" class="myButton" id="breakMinus">-</button>
<p id="breakShow" style="display:inline">5</p>
<button style="display:inline" class="myButton" id="breakPlus">+</button>
</div>
<div class=imageArea>
<div class="image">
<img src=https://image.ibb.co/nLqzma/pom.png />
<h3 id="counterShow"> 00:00</h3>
</div>
</div>
</body>
</html>
After calling "timer()" function, it wont come back here, why?
Here try this plunker
var sessionLength=25;
var breakLength=5;
var sound = document.getElementById("audio");
var timer=10;
var count=breakLength*60;
$(document).ready(function(){
function checkCount(){
count=count-1;
if (count <= 0){
$("#counterShow").html("00:00");
clearInterval(counter);
console.log("hey");
console.log("Check if timer returned and play sound");
sound.play()
}
$("#counterShow").html(Math.floor(count/60)+":"+count%60);
}
$(".img").click(function(){
counter=setInterval(checkCount, 1000); //setInterval is an async function. It returns immediately, and your program continues running from the next line. The function checkCount is called everyone 1000ms.
count=sessionLength*60;
timer=10;
});
});
Just click the 'hi' button.
I have some bug problem with my collapse menu. When I click on some menu item when menu on mobile screen, menu don`t collapse.
JS CODE:
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function(){
var w = $(window).width();
if(w > 460 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
HTML CODE:
<nav class="clearfix">
<ul class="clearfix">
<li>Top</li>
<li>About</li>
<li>Sessions</li>
<li>Contact</li>
<li>Login</li>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
<img style="width:30px; height:30px; margin-top:10px;" src="images/collapse.png">
<div class="logo">
<img src="images/logo.png">
</div>
</nav>
Looks like the only way to trigger the event is with the onclick on the element with the id "pull". Maybe you need to add the same event for every "a" element.
In order to have more control over the "a" element, you can assign an id to each one.
Example(html):
<ul class="clearfix">
<li><a id="aTop" href="#top">Top</a></li>
Example(JS):
var link = $('#aTop');
.
.
.
$(link).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
check this link
http://jsfiddle.net/H3KRk/5/
//$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clicker')) {
$('.nav .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else {
$('.nav .js ul').hide();
}
});
.nav {
width:1024px;
margin:0px auto 0px auto;
background: #757575; /* Old browsers */
background: -moz-linear-gradient(top, #757575 0%, #474747 47%, #111111 47%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#757575), color-stop(47%,#474747), color-stop(47%,#111111), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.nav ul {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.nav ul li {
position:relative;
display:inline;
list-style:none;
margin:0px 13px 0px 0px;
padding:0px 0px 0px 0px;
line-height:40px;
cursor:pointer;
}
.nav ul li ul {
position:absolute;
left:0;
right:0;
width:1024px;
padding:0px 0px 0px 0px;
/*padding:14px 15px 14px 15px;*/
background:#f1f1f1;
}
.nav ul .clicker {
background:none;
}
.nav ul .clicker:hover {}
.nav ul li a {
/*display:block;
padding:8px 10px 8px 40px;*/
color:#ffffff;
text-decoration:none;
background:none;
}
.nav ul li a:hover {
background:#F2F2F2;
}
.nav ul .active {
background:#f00;
}
#contentHolder {
padding:9px 13px 9px 13px;
width:998px;
background:#cccccc;
}
/* Fallbacks */
.nav .no-js ul {
display:none;
}
/*
.nav .no-js:hover ul {
display:block;
}
*/
.nav > .no-js > li:hover > ul {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="nav">
<ul class="no-js">
<li>
<a class="clicker">Offers</a>
<ul>
<div id="contentHolder">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</div>
</ul>
</li>
<li>
<a class="clicker">Offers-2</a>
<ul>
<div id="contentHolder">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</div>
</ul>
</li>
<li><a class="clicker" href="#">All product</a></li>
<li>Glassworks/Artist</li>
<li>Series</li>
<li>Gift guide</li>
<li>About art glass</li>
<li>Outlet</li>-->
</ul>
</div><!-- end - nav -->
You don't have any event on menu link.
$('nav ul li').on('click', 'a', function(){
menu.slideToggle();
})
I need a curved vertical line with 5 dots like this -
On hovering over each dot, text should slide besdide it from left to right, and text should disappear on taking away the mouse.
So far I have only been able to indent and place those 5 dots by means of modifying margin-leftproperty for each item in the list. I am not able to get the curved line. How do I achieve that?
Background:
Border-radius is really great for creating the appearance of curves. The problem is that anything inside an container which is curved using this style ignores said curving. As you pointed out, we need to use margins. However, by keeping everything symmetric, we can keep the margin-lefts to three sets, one of which doesn't require a class.
Answer:
We can get away with a very simple structure here:
<ul>
<li><span>Text</span></li>
</ul>
We have the ul as the outer wrapper with the top and bottom horizontal borders. We use a ::before pseudo-element attached to the wrapper, to create the curved line. Each li is the menu entry. The blue circles are created with ::before pseudo-elements attached to the li, and we can achieve the text animation via the span inside. We could get away with not having a span, but we'd need to declare the actual text content in the CSS, and I think it belongs in the HTML.
The CSS isn't too bad. We curve the ul::before and give it the border. We make it larger than 100% because the curve you show cuts off the top and bottom.
Screenshot:
Code:
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-18%;
left:10px;
content:"";
}
li {
margin:28px 0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.right {
margin-left:30px;
}
li.middle {
margin-left:6px;
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="right"><span>Anecdotes</span></li>
<li class="middle"><span>Interviews</span></li>
<li><span>Records</span></li>
<li class="middle"><span>Recent Stats</span></li>
<li class="right"><span>Recent Snaps</span></li>
</ul>
Success! As mentioned, this might be better using Canvas, or possible SVG. But if you want to stay strictly with HTML & CSS, this should help.
Second Method
Another way we can do this, staying with HTML & CSS, is to use transform:translate. I thought this might be easier and more reliable, but it turns out it requires more CSS and more classes. However, I got it working so I'm going to post it here anyway, because despite that it's pretty cool I think.
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-17.5%;
left:10px;
content:"";
}
li {
margin:0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
line-height:30px;
margin-top:-15px;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.one {
transform: translate(60px) rotate(-140deg) translate(208px) rotate(140deg);
}
li.two {
transform: translate(60px) rotate(-160deg) translate(208px) rotate(160deg);
}
li.three {
transform: translate(60px) rotate(-180deg) translate(208px) rotate(180deg);
}
li.four {
transform: translate(60px) rotate(-200deg) translate(208px) rotate(200deg);
}
li.five {
transform: translate(60px) rotate(-220deg) translate(208px) rotate(220deg)
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="one"><span>Anecdotes</span></li>
<li class="two"><span>Interviews</span></li>
<li class="three"><span>Records</span></li>
<li class="four"><span>Recent Stats</span></li>
<li class="five"><span>Recent Snaps</span></li>
</ul>
Here's how you can achieve the curve, dots, and text display below. You have to adjust it to suit your need.
#arch {
border-left: solid 2px black;
border-radius: 50%;
height: 500px;
width: 300px;
margin-left: 100px;
padding-top: 100px;
margin-top: -80px;
}
#arch-outer {
/* serves as a blade to cut off overly curved area */
height: 450px;
width: 300px;
overflow: hidden;
/* Cuts off the overly cured area */
}
#arch li {
font-size: 76px;
height: 85px;
color: rgb(153, 217, 234);
}
#arch li:nth-of-type(1) {
margin-left: 20px;
}
#arch li:nth-of-type(4) {
margin-left: 15px;
}
#arch li:nth-of-type(5) {
margin-left: 40px;
}
#arch li a {
font-size: 20px;
line-height: 76px;
vertical-align: middle;
color: rgb(153, 217, 234);
}
<div id="arch-outer">
<div id="arch">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li>Four
</li>
<li>Five
</li>
<ul>
</div>
<!-- End arch -->
</div>
<!-- End arch outer -->
View on jsfiddle
You can create 1 blank <div class="curve"></div> and display only left border of that div as below:
.curve{
border-left:2px solid #000;
height:200px;
width:100px;
border-radius:50px; /*see how much you want to curve*/
}
OR else
create 1 curve image and apply to that background div and with help of position float your dot div on it and with hover effect show your text.
check here http://jsfiddle.net/Lz97rgyf/2/