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ářů