Procurar em : Tutoriais & Códigos
Tópico : Menu Vertical (HTML/CSS)
Respostas : 4
Vistos : 2087
Menu Vertical (HTML/CSS) em 17.09.17 13:56
Oi, irei fazer meu primeiro post, espero que gostem!
Hoje, compartilho um menu HTML / CSS vertical de uso pessoal, mas vocês podem configurar ao gosto de vocês.
Ele pode ser usado para seus projetos etc. e é muito simples de editar :)
Aqui está o código:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf_8">
<title>Psyche</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="menu-vertical">
<div class="avatar"></div>
<h3> Bem-Vindo Mon3y </h3>
<div class="menu"><a href="#">Adicionem</a></div>
<div class="menu"><a href="#">Adicionem</a></div>
<div class="menu"><a href="#">Adicionem</a></div>
<div class="menu"><a href="#">Adicionem</a></div>
<div class="menu"><a href="#">Adicionem</a></div>
</div>
<body>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #ededed;
margin:0;
padding:0;
font-family:sans-serif;
}
.menu-vertical{
background-color:#fff;
width:275px;
position:fixed;
top:0;
bottom:0;
box-shadow: 2px 2px 2px silver;
}
.menu-vertical .avatar{
background-image: url(images/images.png);
background-repeat: no-repeat ;
background-position:center;
width:128px;
height:128px;
margin:25px auto 5px auto;
}
.menu-vertical h3{
text-align:center;
color:#444;
font-size:20px;
margin-bottom:18px;
}
.menu-vertical .menu{
background-color:#ededed;
width:225px;
padding:25px;
margin-bottom:5px;
}
.menu-vertical .menu a{
color:#e74c3c;
text-decoration:none;
font-size:16px;
}
Hoje, compartilho um menu HTML / CSS vertical de uso pessoal, mas vocês podem configurar ao gosto de vocês.
Ele pode ser usado para seus projetos etc. e é muito simples de editar :)
Aqui está o código:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf_8">
<title>Psyche</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="menu-vertical">
<div class="avatar"></div>
<h3> Bem-Vindo Mon3y </h3>
<div class="menu"><a href="#">Adicionem</a></div>
<div class="menu"><a href="#">Adicionem</a></div>
<div class="menu"><a href="#">Adicionem</a></div>
<div class="menu"><a href="#">Adicionem</a></div>
<div class="menu"><a href="#">Adicionem</a></div>
</div>
<body>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #ededed;
margin:0;
padding:0;
font-family:sans-serif;
}
.menu-vertical{
background-color:#fff;
width:275px;
position:fixed;
top:0;
bottom:0;
box-shadow: 2px 2px 2px silver;
}
.menu-vertical .avatar{
background-image: url(images/images.png);
background-repeat: no-repeat ;
background-position:center;
width:128px;
height:128px;
margin:25px auto 5px auto;
}
.menu-vertical h3{
text-align:center;
color:#444;
font-size:20px;
margin-bottom:18px;
}
.menu-vertical .menu{
background-color:#ededed;
width:225px;
padding:25px;
margin-bottom:5px;
}
.menu-vertical .menu a{
color:#e74c3c;
text-decoration:none;
font-size:16px;
}
