I have menu with 5 items currently its placed on right side of screen with hover slide but I need this bottom of the page (fixed in footer) with hover to slide up and there is top arrow icon with menu text, I need this icon position reverse when menu slide open, thanks in advance
.menu {
font-weight: 100;
background: #ffc20e;
width: 150px;
height: 100%;
padding-left: 50px;
position: fixed;
z-index: 100;
-webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
right: -130px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
color: #222;
}
.menu:hover, .menu:focus {
transform: translate3d(-130px, 0, 0);
animation-timing-function: 1s ease-in;
}
.menu .title {
top: 50%;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
transform: rotate(270deg);
left: 10px;
font-weight: 800;
font-size: 15px;
}
.menu .nav {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: 100;
}
.menu .nav li {
padding-bottom: 30px;
list-style-type: none;
}
.menu .nav li a {
display: block;
text-decoration: none;
color: inherit;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.menu .nav li a:hover {
color: #aaa;
}
.arrow{
width: 15px;
margin-right: 7px;
}
<div class="menu">
<div class="title"><img src="https://cdn.icon-icons.com/icons2/1883/PNG/512/caretsymbol_120671.png" class="arrow">MENU</div>
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Something like that ?
.menu {
font-weight: 100;
background: #ffc20e;
width: 100%;
height: 130px;
padding-top: 0px;
position: fixed;
z-index: 100;
-webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
bottom: -90px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
color: #222;
}
.menu:hover, .menu:focus {
transform: translate(0px, -90px);
animation-timing-function: 1s ease-in;
}
.menu .title {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
top: 10px;
font-weight: 800;
font-size: 15px;
}
.menu .nav {
position: absolute;
left: 50%;
top: 50px;
width: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
font-weight: 100;
}
.menu .nav li {
float: left;
padding-left: 30px;
list-style-type: none;
}
.menu .nav li a {
text-align: center;
display: block;
text-decoration: none;
color: inherit;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.menu .nav li a:hover {
color: #aaa;
}
.arrow{
width: 15px;
margin-right: 7px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div class="menu">
<div class="title"><img src="https://cdn.icon-icons.com/icons2/1883/PNG/512/caretsymbol_120671.png" class="arrow">MENU</div>
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>