Horní menu a jeho úpravy

Někdo používá horní menu, někdo ne. Každopádně je to užitečný nástroj pro ty, kdo chtějí mít základní nebo důležité odkazy nahoře v menu přehledně a zbytek menu využít na jiné věci...

Můj návod.

Kopírovat se zdrojem! 

Stejně jako v minulém článku, kde se nastavovaly boxíky na menu a články, dnes nastavíme horní menu, pokud ho budete potřebovat...

Takže nejdřív se podíváme, jak na to... V administraci v menu si najděte Rozvržení a část pojmenovanou Napříč-všemi-sloupci. Zvolte Přidat gadget a v seznamu si najdete Stránky.

Pro naše účely, abychom viděli, co se bude dít, si nahoru například přidáme nějaký externí odkaz, aby se nám vytvořila položka, na které budeme sledovat změny. Vy si později jako externí odkazy můžete vložit adresu na konkrétní článek svého blogu, či na štítek (například recenze knih) nebo si můžete vytvořit něco jako menu rozcestníky pomocí stránek (to najdete v menu administrace, položka hned nad Rozvržením)...

Vytvořila jsem tedy jednu stránku na ukázku. Ta se vám pak v dané nabídce zobrazí, plus přidám jeden externí odkaz:

 Vznikne takové horní menu:

Samozřejmě je lepší, když je horní menu nějak sladěné se zbytkem šablony. Takže pro 'studijní' účely použiju barvy jako v předchozím případě... Takže najdete si .tabs-outer  a pod to vložíte následující

.tabs-inner {
  background-color: #ffffff;
  border: 1px solid #FF0066;
  box-shadow: 0 0 $(shadow.spread) #252BE4;
  border-radius: 10px;
}

To vám opět udělá bílé pozadí, růžový rámeček a modrý stín. Všechno si pak opět upravte podle svého... A nyní ještě smažeme pár věcí, aby zmizelo původní pozadí menu (smažte pouze tučné).

.tabs-outer {
  overflow: hidden;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

.tabs-cap-top, .tabs-cap-bottom {
  position: absolute;
  width: 100%;

  border-top: 1px solid $(tabs.border.color);

}

Výsledek (stíny to dělá pouze na stranách, volte proto raději světlé barvy):

Pokud chcete horní menu po celé šířce, smažte .tabs-inner a upravte .tabs-outer takto

.tabs-outer {
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
  border-top: 1px solid #FF0066;
  border-bottom: 1px solid #FF0066;
  box-shadow: 0 0 $(shadow.spread) #252BE4;
}

A stránka bude vypadat takto:

Jako poslední věc dnes odstraníme to nevzhledné datum pod horním menu. Otevřete si v administraci Rozvržení, Příspěvky na blogu a hned u první položky zrušit zaškrtnutí a uložit... A to je vše...