<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<style>
ul.animatedunderlinemenu{
list-style: none;
margin: 0;
margin-bottom: 50px; /* add spacing between UL and rest of content for demo purposes */
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 1.2em 'Lato', sans-serif; /* use google custom font "Lato" */
}
ul.animatedunderlinemenu li{
display: inline;
margin-right:25px; /* spacing between each menu item */
}
ul.animatedunderlinemenu li a{
position: relative;
display: inline-block;
color: black;
padding: 2px 3px;
padding-bottom: 8px; /*spacing between each menu item and underline beneath it */
text-decoration: none;
margin-bottom: 20px; /* spacing between A elements, relevant when menu becomes multi-lined */
letter-spacing: .1em;
}
ul.animatedunderlinemenu li a:after{
position: absolute;
display: block;
content: '';
width: 0;
height: 3px;
background: #CAF4F9;
top: 100%;
left: 0;
opacity: 0;
z-index: -1;
-wekkit-transition: all .3s;
transition: all .3s;
}
ul.animatedunderlinemenu li a:hover:after{
width: 100%; /* increase underline width to 100% */
opacity: 1;
}
/* //// Expand underline effect //// */
ul.animatedunderlinemenu.expand li a:after{
background: #CAF4F9;
-webkit-transition: width .3s, opacity .3s, height .3s .3s;
transition: width .3s, opacity .3s, height .3s .3s;
}
ul.animatedunderlinemenu.expand li a:hover:after{
width: 100%; /* increase underline width to 100% */
height: 10px; /* increase underline height to 10px */
opacity: 1;
}
/* //// Expand underline upwards effect //// */
ul.animatedunderlinemenu.expandup li a:after{
background: #CAF4F9;
top: auto;
bottom: 0;
-webkit-transition: width .3s, opacity .3s, height .3s .3s;
transition: width .3s, opacity .3s, height .3s .3s;
}
ul.animatedunderlinemenu.expandup li a:hover:after{
width: 100%; /* increase underline width to 100% */
height: 100%; /* increase underline height to 100% */
opacity: 1;
}
</style>
<ul class="animatedunderlinemenu">
<li><a href="//jegvirag.gportal.hu">Főoldal</a></li>
<li><a href="//jegvirag.gportal.hu">Kódpróba</a></li>
<li><a href="//jegvirag.gportal.hu">Design</a></li>
<li><a href="//jegvirag.gportal.hu">Leírás</a></li>
<li><a href="//jegvirag.gportal.hu">HTML kód</a></li>
<li><a href="//jegvirag.gportal.hu">HTML kód 2</a></li>
<li><a href="//jegvirag.gportal.hu">Oldal info</a></li>
<li><a href="//jegvirag.gportal.hu">Vendégkönyv</a></li>
</ul>
AJÁNLOM AZ OLDALT
Súgó
Archívum
ARCHÍVUM
