Toto menu bude obsahovat název a popis pro každý prvek. Bude vyjíždět odspodu, a uvidíme ikonku a popis. Použijeme CSS3 vlastnosti pro efekty odstínu a jQuery pro funkčnost.

Ke konečnému archivu, se zdrojovým kódem, k tomuto článku ikonky přikládat nebudu, jelikož autor zakazuje jejích šíření. Název souborů jsem nechal stejný, takže potřebujete jen stáhnout ikonky a uložit je do složky images.

Menu se bude nacházet uvnitř kontejneru. Bude se skládat z neuspořádaného seznamu s prvky odkazů uvnitř. Prvky odkazů budou obsahovat dva span: jeden pro název a druhý pro popis. Taky použíjeme prvek i pro ikonky. About Learn about us and our services Work See our work and portfolio Help Talk to our support Search Search our website Nezapomeňte opravit odkazy na svoje.

Začneme s zaokrouhlením kontejneru. Kontejner bude mít relativní polohu, jelikož samotné menu je absolutní. A budeme potřebovat schovat část s popisem pomocí overflow:hidden. Vytvoříme odstíny a zaokrouhlíme úhly pomocí CSS3. .container{ width:900px; height:130px; margin:0 auto; position:relative; overflow:hidden; border:3px solid #fff; background-color:#fff; -moz-box-shadow:1px 1px 6px #000; -webkit-box-shadow:1px 1px 6px #000; -moz-border-radius:0px 0px 20px 20px; -webkit-border-bottom-left-radius:20px; -webkit-border-bottom-right-radius:20px; border-radius:0px 0px 20px 20px; } ul#menu{ list-style:none; position:absolute; bottom:0px; left:20px; font-size:36px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color:#999; letter-spacing:-2px; } ul#menu li{ float:left; margin:0px 10px 0px 0px; } ul#menu a{ cursor:pointer; position:relative; float:left; bottom:-95px; line-height:20px; width:210px; }