Adding transition effect to button is not working - html

I have added a transition effect to a button but it is not working. The background color is white; by adding the transition effect, the color should be moved from bottom to top but it is not effecting. Here is the fiddle link for that. This is the code:
.hourlypricing {
background: #57c1e8;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
margin-left: 265px;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}
button.monthlypricing {
margin-left: 50px;
background: #fff;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
color: #000;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}
<div class="hourly">
<button class="hourlypricing">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>

You can achieve it by using transform: scaleY() and transform-origin. Check below snippet for reference.
.hourlypricing {
background: #57c1e8;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
margin-left: 265px;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
text-decoration: none !important;
position: relative;
z-index: 1;
}
.hourlypricing:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
transition: transform 1s;
transform-origin: top center;
transform: scaleY(0);
z-index: -1;
}
.hourlypricing:hover:after {
transform: scaleY(1);
}
button.monthlypricing {
margin-left: 50px;
background: #fff;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
color: #000;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
}
<div class="hourly">
<button class="hourlypricing">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>
Update: For activate button you need to use scripts. Check below snippet for reference.
$('button').click(function() {
$('button').removeClass('active');
$(this).addClass('active');
});
button.active {
background: #57c1e8 !important;
}
button:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
transition: transform 1s;
transform-origin: top center;
transform: scaleY(0);
z-index: -1;
}
button:hover:after {
transform: scaleY(1);
}
button.active:hover:after {
transform: scaleY(0);
}
button {
background: #fff;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
color: #000;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
position: relative;
z-index: 1;
}
button.monthlypricing {
margin-left: 50px;
}
button.hourlypricing {
margin-left: 265px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hourly">
<button class="hourlypricing active">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>

Move transition definition to a separate section .hourlypricing:hover like this (Also I've set a transtion time to 1s for better visibility):
.hourlypricing
{
background: #57c1e8;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
margin-left:265px;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
text-decoration: none !important;}
.hourlypricing:hover {
-webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
transition: background-color 1s ease-in-out,color 1s ease-in-out,box-shadow 1s ease-in-out;
background-color: red;
}
button.monthlypricing
{
margin-left: 50px;
background:#fff;
border: .2rem solid #57c1e8;
min-width: 16.5rem;
display: inline-block;
text-align: center;
height: 6rem;
line-height: 5.6rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
font-size: 1.4rem;
padding: 0 2.5rem;
font-weight: 700;
cursor: pointer;
color:#000;
text-decoration: none !important;
-webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
transition: background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out;
}
<div class="hourly">
<button class="hourlypricing">Hourly Pricing</button>
<span class="FyfR" data-reactid="5">or</span>
<button class="monthlypricing">Monthly Pricing</button>
</div>

You not change any value
https://www.w3schools.com/css/css3_transitions.asp
CSS transitions allows you to change property values smoothly from one value to another.
.hourlypricing {
background: #57c1e8;
transition: background-color .1s ease-in-out;
}
.hourlypricing:hover {
background: red;
}

Related

how to run color from right to left in button when use background-image: liner-gradient

I want to animate gradient buttons on hover Using HTML & CSS. but nothing is happening.
Please. anyone help this situation
.btn {
padding: 20px 40px;
background-image: var(--gradient-button);
color: var(--secondary-color);
border: none;
border-radius: 30px;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
transition: 0.6s;
cursor: pointer;
}
.btn:hover {
background-position: right;
}
You can try this :
More buttons : https://codepen.io/JavaScriptJunkie/pen/pPRooV
.buttons {
margin: 10%;
text-align: center;
}
.btn-hover {
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover.color {
background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(49, 180, 180, 0.75);
}
<button class="btn-hover color">BUTTON</button>
Maybe with some changes you can have it. This is just an example.
For right to left use to left in "background-image: linear-gradient(" and assign colors in it.
And maybe a white text color fit on this well.
.btn{
border: none;
margin: 20px;
padding: 24px;
width: 220px;
font-family: "montserrat",sans-serif;
text-transform: uppercase;
border-radius: 6px;
cursor: pointer;
color: #fff;
background-size: 200%;
transition: 0.6s;
}
.btn1{
background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.btn:hover{
background-position: right;
}
<button class="btn btn1">BUTTON</button>
you were already on the right track. I have made some small modifications in a few places.
:root {
--gradient-button: red;
--text-color: white;
}
.btn {
padding: 20px 40px;
background: var(--gradient-button);
color: var(--text-color);
border: none;
border-radius: 30px;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
background-size: 300% 100%;
cursor: pointer;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to right, red, orange, yellow, green);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
<button class="btn">btn</button>

HTML Combining 2 hover effects

Hi I am trying to combine 2 hover effects. First hover effect takes places when you hover over the button, the other one is when you hover over the arrow. I am trying to combine those 2 hover effects to take place simultaneously. Could anyone please help me with that? Thank you so much
.btnMain {
padding: 15px 110px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing:1px;
margin-top:40px;
font-size:16px;
display: inline-block;
border: 2px;
font-family: "Raleway", sans-serif;
cursor: pointer;
moz-transition: all .4s ease-in-out;
}
.btnMain:hover {
background-position: 100% 0;
color:#fff;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.gradient {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%);
}
.arrowIntro {
color: black;
font-size:60px;
margin-left:-2%;
}
.arrowIntro::before {
display: inline-block;
padding-left: -8px;
content: "🠒";
transition: transform 0.3s ease-out;
position: relative;
top: 16px;
left: 3px;
}
.arrowIntro:hover {
color: black;
}
.arrowIntro:hover::before {
transform: translateX(12px);
}
Contact me<a id="arrowIntroId" href="#kontakt" class="arrowIntro"></a>
Please refer to CSS Transform Modules. Also, a technicality: You were trying to move the arrow on .arrowIntro:hover while you wanted it to move on .btnMain:hover
.btnMain {
padding: 15px 110px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing:1px;
margin-top:40px;
font-size:16px;
display: inline-block;
border: 2px;
font-family: "Raleway", sans-serif;
cursor: pointer;
moz-transition: all .4s ease-in-out;
position: relative;
}
.btnMain:hover {
background-position: 100% 0;
color:#fff;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.gradient {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%);
}
.arrowIntro {
margin-left:10px;
display:inline-block;
color: black;
position:absolute;
top:7px;
right:20px;
transition: transform 500ms ease-in-out 25ms;
}
.arrowIntro::before {
content: "→";
font-size:30px;
color: white;
}
.btnMain:hover .arrowIntro {
transform: translateX(12px);
color: red;
}
Contact me<div class="arrowIntro"></div>
You need to move the hover to the .btnMain element:
.btnMain:hover .arrowIntro {
color: black;
}
.btnMain:hover .arrowIntro::before {
transform: translateX(12px);
}
Also, you cannot have an a tag within another a tag. That's malformed HTML and the first a will close at the first closing a. I changed that to a span.
.btnMain {
padding: 15px 110px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 40px;
font-size: 16px;
display: inline-block;
border: 2px;
font-family: "Raleway", sans-serif;
cursor: pointer;
-moz-transition: all .4s ease-in-out;
}
.btnMain:hover {
background-position: 100% 0;
color: #fff;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.gradient {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%);
}
.arrowIntro {
color: black;
margin-left: -2%;
}
.arrowIntro::before {
display: inline-block;
padding-left: -8px;
content: "🠒";
transition: transform 0.3s ease-out;
position: relative;
left: 4px;
}
.btnMain:hover .arrowIntro {
color: black;
}
.btnMain:hover .arrowIntro::before {
transform: translateX(12px);
}
Contact me<span id="arrowIntroId" class="arrowIntro"></span>

Set own styles to content in before element

I've just created a button. I've found a problem where my content doesn't fit on it's place.
Here is my code:
.btn-red {
display: inline-block;
padding: 13px 20px;
color: #fff;
text-decoration: none;
position: relative;
background: #f42f2c;
font: 10px "Oswald", sans-serif;
letter-spacing: 0.4em;
text-align: center;
text-indent: 2px;
text-transform: uppercase;
transition: color 0.1s linear 0.05s;
border-radius: 0;
border: 1px solid #f42f2c;
}
.btn-red:focus {
box-shadow:none !important;
}
.btn-red::before {
content: "READ MORE";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #f9f9ff;
color:#f42f2c !important;
z-index: 1;
opacity: 0;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn-red::after {
transition: border 0.1s linear 0.05s;
}
.btn-red .btn-red-inner {
position: relative;
z-index: 2;
}
.btn-red:hover {
transition: color 0.1s linear 0s;
text-decoration: none;
color: #f42f2c !important;
}
.btn-red:hover::before {
top: 0;
height: 100%;
opacity: 1;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn-red:hover::after {
transition: border 0.1s linear 0s;
}
<a href="o-nas.php" class="btn-red">
<span class="btn-inner">READ MORE</span>
</a>
I tried to add padding: 13px 20px to .btn-red::before, but it has some bugs and I don't know how to solve this.
I think I achieve the same thing that you wanted without using :before to control the button text. Look below:
.btn-red {
position: relative;
display: inline-flex;
box-sizing: border-box;
padding: 13px 20px;
text-decoration: none;
background-color: #f42f2c;
border: 1px solid #f42f2c;
}
.btn-red:before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 0;
content: "";
background-color: #fff;
transform: translateY(-50%);
transition: height 0.2s ease-in-out;
}
.btn-red .btn-inner {
font: 10px "Oswald", sans-serif;
color: #fff;
line-height: 1em;
letter-spacing: 0.4em;
text-transform: uppercase;
z-index: 1;
transition: color 0.2s ease-in-out;
}
.btn-red:hover:before {
height: 100%;
}
.btn-red:hover .btn-inner {
color: #f42f2c;
}
<a class="btn-red" href="#" title="Read More">
<span class="btn-inner">Read more</span>
</a>
Hope this can help you anyway. If you have any doubt about the code, please, just let me know :)
Cheers!

My CSS is not working properly when trying to display a div element when a p element is hovered

I have a dropdown navigation system on my website, and it works fine, but I noticed that when I hovered below the dropdown text it would display the dropdown anyway. (jsfiddle of before) I wanted to change that, so I tried changing #dropdown:hover #dropdown-content to #dropdown p:hover #dropdown-content. But I am not getting any results.
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown p:hover #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
I have tried everything, from putting the p element in it's own div to putting the p element in the ul element. Any help would be appreciated.
You should use this CSS selector #dropdown>p:hover ~ #dropdown-content :
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown>p:hover ~ #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#dropdown:hover #dropdown-content {
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
Add this in your css selector : ~
it's going to be like that now:
#dropdown p:hover ~ #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}

Making off-canvas sliding menu with css

I want to make a sliding menu using solely CSS. The menu will reveal a list of items and a close button inside it. I currently have an anchor tag on my homepage that is styled correctly, but it does not do anything when clicked.
HTML:
<body class="homepage body-push">
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Focus</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
</body>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
UPDATE: I finally found a way to get it working.
HTML:
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu h1.logo a {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 40px;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
}
.menu h1.logo a:hover {
color: #f85c37;
}
.menu img.logo {
margin: 20px 0;
max-width: 160px;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
Javascript:
// Menu settings
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
// Scrollable menu on small devices
$(window).bind("load resize", function(){
if($(window).height() < 400){
$(".menu").css("overflow-y","scroll");
}
else {
$(".menu").css("overflow-y","hidden");
}
});
I would recommend reading this: http://www.sitepoint.com/css3-sliding-menu/
If the article is TL;DR then use
/* Revealing 3D Menu CSS */
body
{
font-family: sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
color: #333;
background-color: #221;
}
/* main page */
article
{
position: fixed;
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 30px 15%;
background-color: #fff;
overflow: auto;
z-index: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
article:after
{
position: absolute;
content: ' ';
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
pointer-events: none;
}
/* navigation */
nav
{
position: fixed;
left: -16em;
top: 0;
bottom: 0;
background-color: #654;
border-right: 50px solid #765;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
nav:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #765;
}
nav ul
{
width: 14em;
list-style-type: none;
margin: 0;
padding: 1em;
}
nav a:link, nav a:visited
{
display: block;
width: 100%;
font-weight: bold;
line-height: 2.5em;
text-indent: 10px;
text-decoration: none;
color: #ffc;
border-radius: 4px;
outline: 0 none;
}
nav a:hover, nav a:focus
{
color: #fff;
background-color: #543;
text-shadow: 0 0 4px #fff;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
/* hovering */
article, article:after, nav, nav *
{
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
nav:hover
{
left: 0;
}
nav:hover ~ article
{
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
}
nav:hover ~ article:after
{
left: 60%;
}
This can be used to create a 3d sliding menu as seen here