I'm trying to make a rotating menu for my web page, but when I rotate to the 2nd page (for example) and when I click somewhere else on the page, the menu returns to its initial position.
So my question is : how can I click on something else and not return to the first position ?
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "CCAVV";
text-align: center;
font: 30px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*HOVER STATES*/
.menu>.one:focus~.circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu>.two:focus~.circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu>.three:focus~.circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu>.four:focus~.circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
<div class="wrapper">
<div class="menu">
One
Two
Three
Four
<div class="circle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
I'm not sure that you can prevent the default behavior of :focus with pure CSS. Furthermore, I'm not sure that using :focus is the best way to accomplish what you're trying to accomplish.
If you are open to using jQuery, this is quite easy to accomplish. (This could also be accomplished pretty easily with pure JavaScript if you don't want to use jQuery. Let me know if that is the case and I will edit my answer.)
Add jQuery and a JavaScript file in <head>:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Rotating CSS Menu</title>
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src='foo.js'></script>
<!-- load css style -->
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="menu">
One
Two
Three
Four
<div class="circle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Remove the /*HOVER STATES*/ section from your CSS:
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "CCAVV";
text-align: center;
font: 30px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
Following is foo.js referenced in the <head> of your HTML. Using jQuery you can accomplish the desired behavior without using :focus...
//wait for the document to load
$(function() {
//when the user clicks "one" in the menu
$('.menu>.one').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(0deg)',
'-moz-transform': 'rotate(0deg)',
'-ms-transform': 'rotate(0deg)',
'-o-transform': 'rotate(0deg)',
'transform': 'rotate(0deg)'
});
});
//when the user clicks "two" in the menu
$('.menu>.two').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-90deg)',
'-moz-transform': 'rotate(-90deg)',
'-ms-transform': 'rotate(-90deg)',
'-o-transform': 'rotate(-90deg)',
'transform': 'rotate(-90deg)'
});
});
//when the user clicks "three" in the menu
$('.menu>.three').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-180deg)',
'-moz-transform': 'rotate(-180deg)',
'-ms-transform': 'rotate(-180deg)',
'-o-transform': 'rotate(-180deg)',
'transform': 'rotate(-180deg)'
});
});
//when the user clicks "four" in the menu
$('.menu>.four').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-270deg)',
'-moz-transform': 'rotate(-270deg)',
'-ms-transform': 'rotate(-270deg)',
'-o-transform': 'rotate(-270deg)',
'transform': 'rotate(-270deg)'
});
});
});
I am new to web development.
I have a web application written in nodejs-html-css-js.
I have a text area, but I am unable to type or insert anything. It is embedded to a slide pop up. Here is the code.
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->
In the above snippet, I am able to get the text area but I am not able to edit it.
However, if I insert a new CSS snippet, nothing is visible. Here is that snippet.
*::after, *::before {
content: '';
}
a {
color: #89ba2c;
text-decoration: none;
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
}
.cd-panel::after {
/* overlay layer */
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*background: transparent;*/
/*cursor: pointer;*/
/*-webkit-transition: background 0.3s 0.3s;*/
/*-moz-transition: background 0.3s 0.3s;*/
/*transition: background 0.3s 0.3s;*/
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
/*background: #00bdff;*/
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
The problem is, I will be needing both CSS snippets for reaching my goal.
Logic: I click a button, a slide pop up reveals with a text area. I want to type the text and the post gets saved in a calendar event.
However, I am not getting any results if I include the above attached code.
Any suggestions or solutions is greatly appreciated.
You can add position and z-index properties to the textarea to ensure they stack above .cd-panel-content
.cd-panel-container h1 {
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content: ' ';
width: 120px;
display: block;
border: 1.5px solid #00DED4;
border-radius: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before,
.cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before,
.no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-panel-textarea {
/* add this */
position: relative;
z-index: 100;
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div>
<!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div>
<!--cd-panel-textarea-->
</div>
<!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div>
<!-- cd-panel -->
Issue because you added .cd-panel-content with absolute position without z-index.. set z-index:- 1 for that
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
z-index: -1;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->
**you can make your text area editable by removing Width and height which you have set to 100% in cd-panel-content class **
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->
I am having problems creating a Navigation bar that can spin in a circle in CSS3 and HTML. How can I do this? Below is a picture of the idea from an old game. I want the same animation type that it uses. When it is on the active circle, the page is shown. As you move left and right, the page will change. Is there a way to accomplish this? How can I create this in CSS3 and HTML5.
I have added a code snippet of what I have done so far as a basic idea. I need two buttons that would allow the animation to move left or right instead of 1,2,3,4.
The idea comes from SliderDock. A dock for Windows and MacOS.
CSS3 should be able to accomplish this task if i'm not mistaken.
http://img05.deviantart.net/d13f/i/2011/139/7/4/altimit_mine_os_by_tenshi_no_chi-d3gowsq.png
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "Menu";
text-align: center;
font: 30px/120px Georgia, Times, serif;
color: #black;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #white;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*HOVER STATES*/
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Nav Menu</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="header"></div>
<div class="wrapper">
<div class="menu">
1
2
3
4
<div class="circle">
<ul>
<li>Home</li>
<li>World</li>
<li>Games</li>
<li>AboutUs</li>
</ul>
</div>
</div>
</div>
</body>
</html>
you can do it with CSS3 also. To do this use animation rotate on hover of that numbers and rotate the menu image.
you can do it by using javascript with onmousehover and onmouseleave event.
I'm trying to create a circular menu with radials using html and css, but the white borders are not built well. And it is not look fine in google chrome (not like a circle). I need get the last white radial, between item5 and item6. I have tried the next code:
DEMO
HTML
<div id="menu">
<div class="item1 item">
<div class="content">Solución Aula Digital</div>
</div>
<div class="item2 item">
<div class="content">Live Streaming</div>
</div>
<div class="item3 item">
<div class="content">Social Tecal Online</div>
</div>
<div class="item4 item">
<div class="content">FlexScorn</div>
</div>
<div class="item5 item">
<div class="content">Video On Demand</div>
</div>
<div id="wrapper6">
<div class="item6 item">
<div class="content">Video Colaboración</div>
</div>
</div>
<div id="center">
</div>
</div>
CSS
#menu {
background: #aaa;
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border-radius: 155px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
}
#center {
position: absolute;
left: 60px;
top: 60px;
width: 180px;
height: 180px;
z-index: 10;
background: #FFFFFF;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
#center a {
display: block;
width: 100%;
height: 100%
}
.item {
background: #aaa;
overflow: hidden;
position: absolute;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transition: background .5s;
-moz-transition: background .5s;
-webkit-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
border: 3px solid #FFFFFF;
}
.item:hover {
background: #eee
}
.item1 {
z-index: 1;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 134px;
height: 134px;
}
.item2 {
z-index: 2;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
width: 150px;
height: 150px;
}
.item3 {
z-index: 3;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
width: 150px;
height: 150px;
}
.item4 {
z-index: 4;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
width: 152px;
height: 152px;
}
.item5 {
z-index: 5;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 151px;
height: 151px;
}
.item6 {
border: none;
position: absolute;
z-index: 6;
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 140px;
height: 140px;
}
#wrapper6 {
position: absolute;
width: 160px;
height: 160px;
/*overflow: hidden;*/
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
/*border: 2px solid #FFFFFF;*/
}
.item1 .content {
left: 0px;
top: 17px;
transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.item2 .content {
left: -5px;
top: 31px;
transform: rotate(-59deg);
-moz-transform: rotate(-59deg);
-webkit-transform: rotate(-59deg);
}
.item3 .content {
left: -40px;
top: 8px;
transform: rotate(-237deg);
-moz-transform: rotate(-237deg);
-webkit-transform: rotate(-237deg);
}
.item4 .content {
left: -43px;
top: 4px;
transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-webkit-transform: rotate(-240deg);
}
.item5 .content {
left: -52px;
top: 7px;
transform: rotate(-247deg);
-moz-transform: rotate(-247deg);
-webkit-transform: rotate(-247deg);
}
.item6 .content {
left: 26px;
top: -3px;
transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
}
.content, .content a {
width: 100%;
height: 100%;
text-align: center
}
.content {
position: absolute;
}
.content a {
line-height: 100px;
display: block;
position: absolute;
text-decoration: none;
font-family: 'Segoe UI', Arial, Verdana, sans-serif;
font-size: 12px;
/*text-shadow: 1px 1px #eee;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
display: none;
text-align: center;
opacity: 0;
}
.display-target:target {
display: block;
opacity: 1;
animation: fade-in 1s;
-moz-animation: fade-in 1s;
-webkit-animation: fade-in 1s;
-o-animation: fade-in 1s;
-ms-animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-webkit-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-o-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
I need get the six borders like this image :
Help, please!
Your border-radius was defined in px instead of %
JSfiddle
#menu {
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
This is the reason it's not being a circle in Chrome:
border-radius: 155px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
You're defining a different border radius for Webkit and Mozilla than for everyone else. Use the same value in all three styles.
Also:
border-radius: 50%;
...will get you a circle no matter the size of the element.