1
I made a change here about the menu codes and the codes were with errors
Our friend Hugocsl sent me to search another menu and I found
I only have one question how do I make the menu be responsive?
Another error when clicking right twice it does not return in the same place
And the menu option has no links have to put the link?
Website
1
1 - To make the link just involve the text inside the LI on a tag A. I only did it for the first menu option Dashboard
2 - To leave responsive just put the component with width of 100%
3 - To be able to open and close the menu just you change the type:radio for type:checkbox
See how the result looks:
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
input[type='checkbox'] {
display: none;
}
label {
cursor: pointer;
}
::-webkit-scrollbar {
display: none;
}
body .swanky {
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
body {
height: 100vh;
font-weight: 500;
font-family: "Roboto", sans-serif;
background: linear-gradient(135deg, #8254EA 0%, #E86DEC 100%);
-webkit-font-smoothing: antialiased;
font-size: 12px;
}
body .swanky {
-webkit-perspective: 600px;
perspective: 600px;
/* width: 700px; */
position: absolute;
margin: auto;
/* height: 360px; */
}
body .swanky_title {
float: right;
text-align: left;
width: 400px;
color: white;
position: relative;
top: 70px;
}
body .swanky_title__social a {
position: relative;
overflow: hidden;
width: 140px;
margin-right: 15px;
text-decoration: none;
padding: 0px 0px 5px 0px;
height: 40px;
border: 2px solid white;
float: left;
color: white;
font-size: 12px;
font-weight: 400;
margin-top: 20px;
}
body .swanky_title__social a .slide {
height: 45px;
width: 100px;
float: left;
position: absolute;
-webkit-transform: skew(20deg);
transform: skew(20deg);
left: -120px;
transition-property: left;
transition-duration: .2s;
background: white;
}
body .swanky_title__social a .slide .arrow {
position: absolute;
right: 31px;
top: 24px;
opacity: 0;
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
}
body .swanky_title__social a .slide .arrow .stem {
width: 10px;
height: 2px;
background: #858490;
}
body .swanky_title__social a .slide .arrow .point {
width: 6px;
height: 6px;
border-right: 2px solid #858490;
top: -3px;
right: 1px;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-top: 2px solid #858490;
}
body .swanky_title__social a img {
width: 16px;
margin-left: 10px;
position: relative;
margin-right: 8px;
transition-property: margin-left;
transition-duration: .1s;
margin-top: 10px;
top: 4px;
}
body .swanky_title__social a:hover > .slide {
left: -70px;
transition-property: left;
transition-duration: .1s;
}
body .swanky_title__social a:hover > img {
margin-left: 40px;
transition-property: margin-left;
transition-duration: .1s;
}
body .swanky_title__social a:hover > .slide .arrow {
right: 11px;
opacity: 1;
transition-property: right,opacity;
transition-delay: .07s;
transition-duration: .2s;
}
body .swanky .intro {
float: right;
color: white;
width: 370px;
top: 50px;
position: relative;
}
body .swanky .intro h1 {
text-shadow: 0px 2px rgba(0, 0, 0, 0.26);
}
body .swanky .intro p {
line-height: 20px;
text-shadow: 0px 1px rgba(0, 0, 0, 0.26);
}
body .swanky_wrapper {
/* width: 225px; */
height: auto;
overflow: hidden;
border-radius: 4px;
background: #2a394f;
}
body .swanky_wrapper label {
padding: 25px;
float: left;
height: 72px;
border-bottom: 1px solid #293649;
position: relative;
width: 100%;
color: #eff4fa;
transition: text-indent .15s, height .3s;
box-sizing: border-box;
}
body .swanky_wrapper label img {
margin-right: 10px;
position: relative;
top: 2px;
width: 16px;
}
body .swanky_wrapper label span {
position: relative;
top: -3px;
}
body .swanky_wrapper label:hover {
background: #212e41;
border-bottom: 1px solid #2A394F;
text-indent: 4px;
}
body .swanky_wrapper label:hover .bar {
width: 100%;
}
body .swanky_wrapper label .bar {
width: 0px;
transition: width .15s;
height: 2px;
position: absolute;
display: block;
background: #355789;
bottom: 0;
left: 0;
}
body .swanky_wrapper label .lil_arrow {
width: 5px;
height: 5px;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 2px solid white;
border-right: 2px solid white;
float: right;
position: relative;
top: 6px;
right: 2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
body .swanky_wrapper__content {
position: absolute;
display: none;
overflow: hidden;
left: 0;
width: 100%;
}
body .swanky_wrapper__content li {
width: 100%;
opacity: 0;
left: -100%;
background: #15a4fa;
padding: 25px 0px;
text-indent: 25px;
box-shadow: 0px 0px #126CA1 inset;
transition: box-shadow .3s,text-indent .3s;
position: relative;
}
body .swanky_wrapper__content li:hover {
background: #0c93e4;
box-shadow: 3px 0px #126CA1 inset;
transition: box-shadow .3s linear,text-indent .3s linear;
text-indent: 31px;
}
body .swanky_wrapper__content .clear {
clear: both;
}
input[type='checkbox']:checked + label .swanky_wrapper__content {
display: block;
top: 68px;
border-bottom: 1px solid #212e41;
}
input[type="checkbox"]:checked + label > .lil_arrow {
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
border-top: 2px solid #14a3f9;
border-right: 2px solid #14a3f9;
}
input[type='checkbox']:checked + label {
height: 325px;
background: #212e41;
text-indent: 4px;
transition-property: height;
transition-duration: .6s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='checkbox']:checked + label .bar {
width: 0;
}
input[type='checkbox']:checked + label li:nth-of-type(1) {
-webkit-animation: in 0.15s 0.575s forwards;
animation: in 0.15s 0.575s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.575s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='checkbox']:checked + label li:nth-of-type(2) {
-webkit-animation: in 0.15s 0.7s forwards;
animation: in 0.15s 0.7s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.7s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='checkbox']:checked + label li:nth-of-type(3) {
-webkit-animation: in 0.15s 0.825s forwards;
animation: in 0.15s 0.825s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.825s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='checkbox']:checked + label li:nth-of-type(4) {
-webkit-animation: in 0.15s 0.95s forwards;
animation: in 0.15s 0.95s forwards;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-animation: in 0.15s 0.95s forwards;
-moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@-webkit-keyframes in {
from {
left: -100%;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}
@keyframes in {
from {
left: -100%;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}
.love {
position: absolute;
right: 20px;
bottom: 0px;
font-size: 11px;
font-weight: normal;
}
.love p {
color: white;
font-weight: normal;
font-family: 'Open Sans', sans-serif;
}
.love a {
color: white;
font-weight: 700;
text-decoration: none;
}
.love img {
position: relative;
top: 3px;
margin: 0px 4px;
width: 10px;
}
.brand {
position: absolute;
left: 20px;
bottom: 14px;
}
.brand img {
width: 30px;
}<!-- / Begin Body -->
<div class='swanky'>
<!-- /////////// Begin Dropdown //////////// -->
<div class='swanky_wrapper'>
<input id='Dashboard' name='checkbox' type='checkbox'>
<label for='Dashboard'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png'>
<span>Dashboard</span>
<div class='lil_arrow'></div>
<div class='bar'></div>
<div class='swanky_wrapper__content'>
<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Code Blocks</a></li>
</ul>
</div>
</label>
<input id='Sales' name='checkbox' type='checkbox'>
<label for='Sales'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png'>
<span>Sales</span>
<div class='lil_arrow'></div>
<div class='bar'></div>
<div class='swanky_wrapper__content'>
<ul>
<li>New Sales</li>
<li>Expired Sales</li>
<li>Sales Reports</li>
<li>Deliveries</li>
</ul>
</div>
</label>
<input id='Messages' name='checkbox' type='checkbox'>
<label for='Messages'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mess.png'>
<span>Messages</span>
<div class='lil_arrow'></div>
<div class='bar'></div>
<div class='swanky_wrapper__content'>
<ul>
<li>Inbox</li>
<li>Outbox</li>
<li>Sent</li>
<li>Archived</li>
</ul>
</div>
</label>
<input id='Users' name='checkbox' type='checkbox'>
<label for='Users'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/users.png'>
<span>Users</span>
<div class='lil_arrow'></div>
<div class='bar'></div>
<div class='swanky_wrapper__content'>
<ul>
<li>New User</li>
<li>User Groups</li>
<li>Permissions</li>
<li>Passwords</li>
</ul>
</div>
</label>
<input id='Settings' checkbox='checkbox' type='checkbox'>
<label for='Settings'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/set.png'>
<span>Settings</span>
<div class='lil_arrow'></div>
<div class='swanky_wrapper__content'>
<ul>
<li>Databases</li>
<li>Design</li>
<li>Change User</li>
<li>Log Out</li>
</ul>
</div>
</label>
</div>
<!-- /////////// End Dropdown //////////// -->
</div>Friend has how to add more links fields? I added but was not recognized
@Angelino first very carefully with these components that you do not completely master, you may have more serious problems with them... In case you add more link just go doing input[type='checkbox']:checked + label li:nth-of-type(5) { } and (6) (7) and how many Nth-of-type you need, just remember that in each of them you also need to adjust to animation: in 0.15s 0.95s forwards; changing the animation time there in 0.15s 0.95s and increasing that time for each new link. Take a look at this part of CSS where are the nth-of-type you’ll understand better what I’m talking about
Thanks buddy, I got it
Friend what you hear with my account here? I can no longer post friend could I help poker?
@Angelino guy even looked her up to see if there was any warning Pq when the person takes some punishment and can’t post she gets a warning. But it doesn’t seem to be your case. I can’t tell you what happened, but in the footer here of the site the left has the chat and the meta, you post and enter home and ask a question by putting all the details, warnings or errors that appeared there. Sorry I can’t do more, but sometimes someone knows
Browser other questions tagged php html
You are not signed in. Login or sign up in order to post.
Young your question was not very clear... apparently your items are already inside Products not? Another thing, edit your question and also include the full CSS, only with HTML not to help you much...
– hugocsl
Guy is missing code there... Enter the element with the id
#nav-left? Are you using some Bootstrap framework etc? You are using Java Script or jQuery?– hugocsl
@hugocsl Ready friend there is all HTML code
– Angelino
Apparently you want when you click on the Products it "open" expanding and showing the items that are inside, and if you click again it "collects" closing and hiding the correct items?
– hugocsl
@hugocsl This friend, is exactly this same, then when you click the button below it stays where I am fixed
– Angelino
I didn’t get that part then when you click the button below it stays where I am fixed what did you mean by that?
– hugocsl
@hugocsl By clicking it stand where I am at the link not to return to the main button of the PRODUCT
– Angelino
@hugocsl friend is working out?
– Angelino
Searching for "Collapse menu" will help you find something ready
– hugocsl
@hugocsl friend found a Show menu I help now
– Angelino
See the answer as it turned out, anything just comment there
– hugocsl