I am quite new to coding and I am trying to implement a dot navigation bar. Below is my code.
<html>
<head>
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
/* Init */
html { width: 100%; height: 100%; }
body {
position: relative;
width: 100%; height: 100%;
background: #EA7E00;
}
.dot-nav {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* Fin Init */
.dot-nav--item {
position: relative;
display: block;
width: 16px; height: 16px;
margin-bottom: 28px;
border: 3px solid #fff;
border-radius: 50%;
&:before, &:after { content: ""; }
&:before {
position: absolute;
top: -1px; bottom: -1px; left: -1px; right: -1px;
transform: scale(0);
opacity: 0;
border-radius: 50%;
background-color: #fff;
transition: all .3s;
}
&:after {
display: block;
width: 3px; height: 30px;
margin: 13px auto 0;
background-color: #fff;
}
&:last-child:after { display:none; }
&:hover { cursor: pointer; }
&.is-active:before {
opacity: 1;
transform: scale(1);
}
}
.dot-nav--link {
position: absolute;
top: 50%;
visibility: hidden;
transform: translate(-120%, -50%);
width: 200px;
padding: 5px 10px;
opacity: 0;
color: #111; background-color: #fff;
transition: all .3s;
&:before {
content: "";
position: absolute;
top: 50%; left: 100%;
width: 0; height: 0;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #fff;
border-style: solid;
transform: translateY(-50%);
}
.dot-nav--item:hover & {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
}
</style>
<script type="text/javascript">
$('.dot-nav--item').on('click', function(){
$this = $(this),
$siblings = $this.siblings();
$this.addClass('is-active');
$siblings.removeClass('is-active');
})
</script>
</head>
<body><nav class="dot-nav">
<ul class="dot-nav--list list-unstyled">
<li class="dot-nav--item is-active">Lorem ipsum dolor.</li>
<li class="dot-nav--item">Assumenda, officia omnis.</li>
<li class="dot-nav--item">Sed, alias totam.</li>
<li class="dot-nav--item">Officia, itaque, vitae!</li>
<li class="dot-nav--item">Repellendus, veritatis, deserunt.</li>
</ul>
</nav>
</body>
</html>
The dots do not seem to be showing content when I hover over it and does not fill when I click on it either. I can't seem to find what is wrong. I suspect it has something to do with the script source but I am not so sure. Do you have any suggestions?
You have added the visible styles in a wrong place. Look at the following syntax
.dot-nav--item:hover & {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
The above style you have added under the class .dot-nav--link. This is wrong. It should be like below and you have to place after the .dot-nav--links declarations.
.dot-nav--item:hover .dot-nav--link {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
So whenever you hover the items it will try to find the child with the class .dot-nav--link and make it visible. Not sure what you are trying to achieve through jquery code.
FIDDLE DEMO
Related
I am creating a mobile menu and found an example on Codepen, the only problem is that I don't want to load JQuery just for the menu. I'm fairly new to coding and was wondering if there was a way to convert the toggle class function to pure javascript. If you could make a working example that would be ideal. Also if you know of a tool to convert to javascript or something that lists what each function looks like in both so I could covert it myself, that would be good to know.
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #000;
font-family: Helvetica Neue, Arial, sans-serif;
color: #fff;
overflow: hidden;
}
/* ------------- */
.menu {
position: absolute;
top: 20px;
right: 20px;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 14px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: #333;
height: 2px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #fff;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: #fff;
color: #333;
height: 100%;
width: 100%;
position: fixed;
text-align: center;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
/* ------------- */
.info {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay-info {
text-align: center;
color: #111825;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="info">Content</h1>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<h1 class="overlay-info">
Links
</h1>
</div>
Got it working using onclick="myFunction" and
function myFunction() {
var menu = document.getElementById("something");
var overlay = document.getElementById("somethingelse");
something.classList.toggle("open");
somethingelse.classList.toggle("open");
}
This question already has an answer here:
Is There an Alternative Method to Mimic the Behavior of an Anchor Link/Target Pseudo-Class?
(1 answer)
Closed 5 years ago.
I have developed a lightbox feature, made with CSS for the most part. Though it functions well at a glance, I've been facing some complications with the way that it opens and closes with anchor links, the primary issue being that it adds on entries to the browser history.
Here's an example of what I am referring to:
I load a page with an image with the lightbox feature applied.
I click on the image, and the lightbox window opens.
Then I close the lightbox window and it returns back to the page; however, doing this has now added 2 additional history entries by opening and closing the lightbox via the anchor links behavior, (which append the page's URL with http://SITEURL.com/PAGEURL#theanchor).
Judging from previous responders, linking to anchors seem to be the least recommended for producing this sort of functionality. If that is the case, how else could I implement this, (and would I potentially be able to avoid the use of anchors altogether)?
Here is a full snippet that presents the lightbox feature in action, as well as the anchor link behavior:
$('.pic > img').click(function() {
var srcToCopy = $(this).attr('src');
$('body').find('.imgsrc').attr('src', srcToCopy);
$('body').addClass('no-scroll');
});
$('#customlightbox-controls').on('click', function() {
$('body').removeClass('no-scroll');
});
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
}
.pic,
#imgsrc {
display: inline-block;
}
img {
width: 100px
}
a {
display: inline-block;
line-height: 0;
}
.container {
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox:target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox:target img {
opacity: 1;
}
.customlightbox:target~#customlightbox-controls {
top: -3px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</a>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</a>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</a>
</div>
<!-- Lightbox Prompt -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
Hopefully there is some sort of referable solution.
I accidentally posted this answer but, you can remove anchor tags and and just add cursor: pointer; css to your .pic class.
$('.pic > img').click(function() {
var srcToCopy = $(this).attr('src');
$('body').find('.imgsrc').attr('src', srcToCopy);
$('body').addClass('no-scroll');
});
$('#customlightbox-controls').on('click', function() {
$('body').removeClass('no-scroll');
});
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 100px
}
a {
display: inline-block;
line-height: 0;
}
.container {
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox:target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox:target img {
opacity: 1;
}
.customlightbox:target~#customlightbox-controls {
top: -3px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Prompt -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
You could just prevent the default action and not add the hash to the url (or history)
$('a[href^="#"]').click(function(evt){
evt.preventDefault()
});
Has been a long time since I have used Lightbox and not sure if this will conflict with it's features or not
I am creating a search box query, with the following css animations, which is displayed in the snippet. It works like I need it to, but I just want to add two more things to it, to make it work for me.
How do I make the hit area of the search icon, expand the entire width of the header to make it more intuitive? At the moment, the hit area is fixed to the size ratio of the search icon.
I would also like to know, how do I display the search icon to the left of the placeholder text after it has been clicked?
Hope this makes sense
$('.header').on('click', '.search-toggle', function(e) {
var selector = $(this).data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
font-family: 'Roboto', sans-serif;
}
.header {
max-width: 250px;
margin: 2em auto 10em;
}
.header-nav {
position: relative;
padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}
.menu {
display: inline-block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu span {
display: inline-block;
}
.menu .text {
color: #0097bf;
display: block;
padding: 10px;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.search-button {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
/* search icon */
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before,
.search-toggle::after {
content: '';
position: absolute;
display: block;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #0097bf;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #0097bf;
top: 10px;
left: 8px;
transform: rotate(45deg);
}
/* x icon */
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}
#header-2 {
overflow: hidden;
}
#header-2 .menu span {
opacity: 1;
transition: transform 0.3s, opacity 0.2s 0.1s;
}
#header-2 .menu span .text:nth-child(1) {
transition-delay: 0.4s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
transform: translateX(20%);
opacity: 0;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
#header-2.show .menu span {
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
transform: translateX(0);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
<nav class="header-nav">
<div class="search-button">
</div>
<p class="menu">
<span><span class="text">Search</span></span>
</p>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>
this is how you can make full header 'clickable' to start search.
I placed the icon to the left where your left padding was, see if demo is what you need
$('.header:not(.show)').on('click', '.header-nav', function(e) {
var selector = $(this).find('.search-toggle').data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
font-family: 'Roboto', sans-serif;
}
.header {
max-width: 250px;
margin: 2em auto 10em;
}
.header-nav {
position: relative;
padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}
.menu {
display: inline-block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu span {
display: inline-block;
}
.menu .text {
color: #0097bf;
display: block;
padding: 10px;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.search-button {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
.header.show .search-button{
left: .3em; transition: all 500ms;
}
/* search icon */
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before,
.search-toggle::after {
content: '';
position: absolute;
display: block;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #0097bf;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #0097bf;
top: 10px;
left: 8px;
transform: rotate(45deg);
}
/* x icon */
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}
#header-2 {
overflow: hidden;
}
#header-2 .menu span {
opacity: 1;
transition: transform 0.3s, opacity 0.2s 0.1s;
}
#header-2 .menu span .text:nth-child(1) {
transition-delay: 0.4s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
transform: translateX(20%);
opacity: 0;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
#header-2.show .menu span {
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
transform: translateX(0);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
<nav class="header-nav">
<div class="search-button">
</div>
<p class="menu">
<span><span class="text">Search</span></span>
</p>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>
Messing with the jawbreaker-esque input animation found in this code pen
The code pen only has ONE field, but if you add a second, like this...
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>
And then add this CSS so the 2nd field moves down below the 1st...
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
You'll see that when you click into either input field, the desired animation happens to both.
So how could I change the JS so that it only happens to the input field you click into?
You can use $.parent() to get the parent, then target .placeholder, .border and .lb relative to the parent of the input that was clicked.
$('input[type=text]').blur(function(){
$parent = $(this).parent();
$parent.find('.placeholder').removeClass("placeholder--animate");
$parent.find('.border').removeClass("border--animate");
$parent.find('.lb').removeClass("lb--animate");
checkInput($(this));
})
.focus(function() {
$parent = $(this).parent();
$parent.find('.placeholder').addClass("placeholder--animate");
$parent.find('.border').addClass("border--animate");
$parent.find('.lb').addClass("lb--animate");
checkInput($(this));
});
function checkInput($input) {
if ( $input.val()) {
$input.prev('.placeholder').css('display', 'none');
} else {
$input.prev('.placeholder').css('display', 'visible');
}
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
body {
font-family: 'Open Sans', sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
input[type=text] {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: transparent;
color: #7f8c8d;
font-weight: 600;
outline: none;
border: none;
border-bottom: 1px solid #bdc3c7;
}
.placeholder {
position: absolute;
bottom: 5px;
left: 0;
margin: 0;
font-size: 13px;
color: #95a5a6;
transition: .2s all ease-out;
}
.lb {
position: absolute;
top: 10px;
left: -30px;
z-index: 40;
margin: 0;
font-size: 10px;
color: #3498db;
opacity: 0;
transition: .2s all ease-out;
}
.lb--animate {
opacity: 1;
left: 0;
}
.placeholder--animate {
left: 20px;
opacity: 0;
}
.border {
position: absolute;
bottom: 0px;
display: inline-block;
width: 0;
height: 2px;
padding: 0;
margin: 0;
background-color: #3498db;
transition: .2s width ease-out;
}
.border--animate {
width: 100%;
}
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>
I want to connected circles with other circles using lines as connector, each circle should holds hyper link text. using CSS and html
As an idea to start I can propose you the following concept:
<style>
a {
border: 1px solid black;
border-radius: 50%;
display: block;
width: 20px;
height: 20px;
padding: 5px;
background: white;
}
#elementG {
position: absolute;
left: 150px;
top: 100px;
}
#elementH {
position: absolute;
left: 70px;
top: 150px;
}
#elementA {
position: absolute;
left: 20px;
top: 80px;
}
b {
border-bottom: 1px solid black;
width: 70px;
display: block;
position: absolute;
}
#linkGA {
-moz-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
left: 30px;
top: 125px
}
#linkAH {
-moz-transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
left: 87px;
top: 135px
}
</style>
<b id="linkGA"></b>
<b id="linkAH"></b>
G
A
H
The sigma.js framework might be better suited than a pure css option
http://sigmajs.org/