Dost efektní úprava je vytvoření stínu pod položkou menu, které se musí trochu vznést, aby byl stín uvěřitelnější. Hezké, pro někoho možná i složitě vypadající a přitom jednoduché, vytvořené jen úpravou CSS.
Opět pouze vložíme do Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS následující:
/*** Zvyrazneni menu - stin pod polozkou - Zabza.eu ***/
#top-menu li {
padding-right: 5px;}
#top-menu > li > a {
padding: 15px 15px!important;
margin-bottom: 15px;}
#top-menu .menu-item-has-children > a:first-child:after {
display:none;}
#top-menu-nav > ul > li > a {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
background: #3173b5;
color: #fff;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;}
#top-menu-nav > ul > li > a:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;}
#top-menu-nav > ul > li > a:hover,
#top-menu-nav > ul > li > a:focus,
#top-menu-nav > ul > li > a:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
opacity: 1;
background: #154575;}
#top-menu-nav > ul > li > a:hover:before,
#top-menu-nav > ul > li > a:focus:before,
#top-menu-nav > ul > li > a:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);}
A to je vše. V pondělí náš miniseriál dokončíme.
DEMO
0 Komentářů