Nice looking ui design for tablet with modern hover effects.
The html code is just a simple structure with one aside element and one section.
The HTML:
<div class="page">
<aside class="menu">
<a href="" class="logo">Logo</a>
<a href="" class="menu-item">
<p class="material-icons icon">dashboard</p>
<p class="text">Dashboard</p>
</a>
<a href="" class="menu-item">
<p class="material-icons icon">manage_accounts</p>
<p class="text">Settings</p>
</a>
<a href="" class="menu-item">
<p class="material-icons icon">today</p>
<p class="text">Calendar</p>
</a>
<a href="" class="menu-item active">
<p class="material-icons icon">touch_app</p>
<p class="text">Accesibility</p>
</a>
<a href="" class="menu-item">
<p class="material-icons icon">theaters</p>
<p class="text">Theaters</p>
</a>
</aside>
<section class="main">
<h2>Accesibility</h2>
<ul>
<li>
<div>Item</div>
<div>Price</div>
<div>Rate</div>
</li>
<li>
<div>Itmem 1</div>
<div>12.5</div>
<div>2 out of 10</div>
</li>
<li>
<div>Itmem 2</div>
<div>22.8</div>
<div>5 out of 10</div>
</li>
<li>
<div>Itmem 3</div>
<div>37</div>
<div>4 out of 10</div>
</li>
<li>
<div>Itmem 4</div>
<div>299.9</div>
<div>9.5 out of 10</div>
</li>
<li>
<div>Itmem 5</div>
<div>0.5</div>
<div>0 out of 10</div>
</li>
<li>
<div>Itmem 6</div>
<div>52.52</div>
<div>8 out of 10</div>
</li>
<li>
<div>Itmem 7</div>
<div>24.9</div>
<div>7 out of 10</div>
</li>
</ul>
</section>
</div>
For the css part i'm going to add only the more interesting element that is the menu hover effect.
So for a menu item we have the following structure in HTML:
<a href="" class="menu-item">
<p class="material-icons icon">dashboard</p>
<p class="text">Dashboard</p>
</a>
in order to make it look as I intended, the following css was needed:
.menu a.menu-item {
display: block;
text-decoration: none;
}
.menu a.menu-item:hover .icon,
.menu a.menu-item.active .icon {
background-image: linear-gradient(-70deg , #08bfb3, #44e4c4);
color: #eee;
border-radius: 10px 10px 0 10px;
z-index: 2;
}
.menu a.menu-item:hover .text,
.menu a.menu-item.active .text {
background-image: linear-gradient(-90deg , #2a71e5, #1a71a8);
z-index: -1;
border-radius: 10px 0 0 10px;
width: 54%;
}
.menu .icon {
position: relative;
color: #0e8af6;
margin: 5px;
padding: 10px;
}
.menu .text {
color: #eee;
padding: 20px 20px 20px 25px;
margin: 0 0 0 -30px;
}
.menu p {
line-height: 24px;
vertical-align: middle;
display: inline-block;
}
Discussion (0)