Menu_esquerda
by aligenigena
HTML
<nav id="menu_esquerda">
<div class="preencher"><span class="negrito">Menu</span><img src="{% static 'images/menu_icon.png' %}" class="icone_menu"></div>
<ul>
<li id="geral"><a href="{% url 'geral' %}" title="Informações Gerais">Geral</a><img src="{% static 'images/geral_icon.png' %}" class="icone_menu"></li>
<li id="notas"><a href="{% url 'notas' %}" title="Informações sobre notas">Notas</a><img src="{% static 'images/notas_icon.png' %}" class="icone_menu"></li>
<li id="Frequências"><a href="{% url 'frequencias' %}" title="Informações sobre frequência">Frequência</a><img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></li>
</ul>
</nav>CSS
/*====Menu Esquerda====*/
nav#menu_esquerda {
background-color: #E1F0DB;
border: 0.5px solid #999999;
border-radius: 5px;
font-family: helvetica;
width:180px;
float: left;
margin-top: 10px;
height: 1098.8px;
}
nav#menu_esquerda ul{
padding-left: 2px;
}
nav#menu_esquerda li{
color: #999999;
list-style: none;
}
nav#menu_esquerda li:hover{
background-color: #606060;
}
nav#menu_esquerda a{
cursor: default;
color: black;
text-decoration: none;
line-height: 1.5;
display: block;
padding: 3px;
}
nav#menu_esquerda a:hover{
color: white;
}
.active{
background-color: #606060;
}
.active a{
color: white !important;
}
.preencher{
background-color: #B9DCBB;
border: 0.5px solid #999999;
border-top-right-radius: 5px;
padding: 3px;
}
.icone_menu{
float: right;
max-width:20px;
opacity: 0.5;
}
.negrito{
font-weight:bold;
}