Eai, a um tempo atrás eu estava participando de um projeto, no qual eu estava desenvolvendo uma porcentagem do layout e design dele, e bem, eu peguei como base desse projeto o menu dele, e decidi postar aqui, poderá ajudar algumas pessoas.
Screens
— Para visualizar a Screen Clique Aqui
HTML/CSS
Screens
— Para visualizar a Screen Clique Aqui
HTML/CSS
- Spoiler:
<html>
<head>
<title>Surcape</title>
<style type="text/css">
#linksmenu {
margin: auto;
margin-left: 0px;
}
#links {
float: left;
padding-left: 50px;
padding-right: 90px;
font-size: 15px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
color: #656565;
top: 210px;
left: 0px;
font-family: "Segoe UI";
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
#links:hover {
opacity: 0.7;
border-left: 1px solid #D7371F;
color: #FFFFFF;
}
#menu-lateral {
background-color: #191717;
position: fixed;
left: 0px;
top: 0px;
width: 190px;
height: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div id="menu-lateral">
<div id="linksmenu">
<a href="index.html"><div id="links">Waady Panel</div></a>
<a href="index.html"><div id="links">Usuários</div></a>
<a href="index.html"><div id="links">Gerenciamento</div></a>
<a href="index.html"><div id="links">Widgets</div></a>
<a href="index.html"><div id="links">Estátisticas</div></a>
<a href="index.html"><div id="links">Mensagens</div></a>
<a href="index.html"><div id="links">Licença</div></a>
<a href="index.html"><div id="links">Backup</div></a>
<a href="index.html"><div id="links">Financeiro</div></a>
</div></div></div>
</body>
</html>
