Zvýraznění menu 5/6 – stín pod položkou
Publikováno 22. 11. 2019
V kategorii Menu

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

Přidat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Buďte jednoduše v obraze

Jednou týdně vám pošleme přehled nových článků abyste nemuseli nic hledat a měli všechno najednou pohromadě. Stačí jen vložit email, odeslat a potvrdit ve zprávě kterou vám obratem zašleme odběr novinek.

Přihlášení k odběru novinek proběhlo v pořádku.

Sdílet na Pinterestu

Sdílej