Tilpasning af menu med CSS

af | feb 24, 2017 | 0 Kommentarer

Den øverste menu kan passes til på flere måder. Her på siden er der lavet en fast streg under det menupunkt, der er aktivt, og en glidende streg ved mouse over. Du kan se en fuld vejledning hér

Selve koden ser sådan ud, og sættes ind i “ekstra CSS” under tema-tilpasning.

/*
Denne kode styrer stregerne under menupunkterne for oven
*/

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: “”;
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: “”;
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #EDB059; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Samme fremgangsmåde kan bruges til højre sidebar (menuen til højre)

Selve koden ser sådan ud, og sættes ind i “ekstra CSS” under tema-tilpasning.

Denne stump CSS bestemmer baggrundsfarven på menuen til højre
*/

.et_pb_widget ul li {
background-color: #EDB059;
padding: 7px;
}

0 kommentarer

Indsend en kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Kategorier i bloggen