Úprava vysouvacího menu pomocí CSS
Publikováno 29. 10. 2019
V kategorii Menu
Použité štítky: CSS, úprava menu, vysouvací menu

Nabídka rozbalovacího menu je obecně postačující, nicméně někdy se může hodit jeho úprava. Pro zvýraznění a i pro jeho přehlednost.

Pokud máte web, který vysouvací menu využívá, můžete zkusit postupovat podle tohoto návodu. Je to jednoduché a zvládne to skutečně každý. Navíc, pro přehlednost, jsem do kódu vložil zakomentované poznámky tak, abyste věděli kde se co upravuje.

Nejprve si musíte vytvořit rozbalovací menu ve své struktuře menu. Po vytvoření pak jednoduše do místa pro vlastní CSS, tedy Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS vložíte následující kód CSS:

/* Stylovani vysouvaciho menu - Zabza.eu */

#top-menu .sub-menu {
   background-color: #2ea3f2; /* Barva pozadi */
   border-top: 3px solid #0073aa; /* Barva horniho ohraniceni */
}

#top-menu .sub-menu li a {
   font-size: 14px; /* Velikost fontu */
   width: 100%;
   color: #fff;
   border-bottom: 1px solid #FFFFFF; /* Barva hranic */
}

.sub-menu li:hover {
   background-color: #0073aa; /* Barva menu pri prejeti mysi */
}

.sub-menu .current_page_item {
   background-color: #0073aa; /* Barva aktivni polozky menu - nefunguje vzdy */
}

#top-menu .sub-menu li {
   padding-left: 0px;
   padding-right: 0px;
   width: 100%;
}

#top-menu li li a {
   padding-top: 10px;
   padding-bottom: 8px;
}

#top-menu .sub-menu {
   padding-top: 0px;
   padding-bottom: 0px;
}

.nav ul li a:hover {
   opacity: 1;
   background-color: rgba(0,0,0,0);
}

No a to je všechno. Jak to vypadá můžete vidět na tomto webu. Upravte si to podle svých potřeb a zaručeně web zpřehledníte.

Je to vlastně jednoduché, že?

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