Zvýraznění menu 4/6 – dynamický rámeček
Publikováno 21. 11. 2019
V kategorii Menu

Komu se při úpravě menu nehodí práce s výplní, může zkusit něco jiného. Třeba zvýraznit položku menu rámečkem. Je to stejně jednoduché a web to oživí.

Stačí přidat do Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS toto CSS:

/*** Zvyrazneni menu - dynamicky ramecek - Zabza.eu ***/
    #top-menu li {
        padding-right: 15px;}
 
    #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 {
        background: #3173b5;
        color: #ffffff;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px transparent;
        position: relative;}
 
    #top-menu-nav > ul > li > a:before {
        content: '';
        position: absolute;
        border: #3173b5 solid 4px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: top, right, bottom, left;
        transition-property: top, right, bottom, left;}
 
    #top-menu-nav > ul > li > a:hover {
        background: #7230b5;}
         
    #top-menu-nav > ul > li > a:hover:before, 
    #top-menu-nav > ul > li > a:focus:before, 
    #top-menu-nav > ul > li > a:active:before {
        border: #7230b5 solid 2px;
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px;}

Hotovo. A zítra zkusíme nechat menu létat.

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