Mojezáliby.cz
Kategorie: Tvorba Webu

Pěkné menu pro web - htm/css

Pěkné menu pro web - htm/cssO rozbalovacím menu pomocí CSS nastylování tu už jednou řeč byla. Tentokrát se však k tematice vrátím podrobněji pomocí podrobného návodu i s vlastní ukázkou.

Hned úvodem začneme ukázkou horizontálního menu. Použil jsem celkem 3 html tagy a hlavně možností kaskádových stylů - CSS.

Menu je vytvořeno pomocí seznamu <ul> a jeho nastylováním přes CSS. Položky seznamu jsou odkazy obalené tagem <li>. Uvnitř tagu může být i další seznam, který má opět položky a položka může být opět dalším seznamem. Takto dostáváme víceúrovňové menu.

Dalším krokem je už jen nastylování jednotlivých tagů pomocí CSS. Ideální je navíc obalit celé menu vlastním identifikátorem pro lepší cílenost stylů.

Menu v ukázce je obaleno identifikátorem #ukazkamenu. Všimněte si hlavně stupňování zápisu pro jednotlivé úrovně. Základní menu je "ul" druhá úroveň je již "li ul" (seznam, který je položkou), třetí úroveň je již "li ul li ul" (seznam, který je položkou seznamu, který je sám položkou). Pseudotřída ":hover" je aktivována po najetí myši na prvek. Nižší úrovně jsou tedy skryty "display: none;", ale po najetí myší se atribut display mění a jdou již viditelné.

/* CSS Document */
#ukazkamenu {color: white; margin: 0 25px 170px 0; border-radius: 10px; background: black; width: 368px; float: left;}
#ukazkamenu a {cursor: pointer;}
#ukazkamenu ul { padding: 3px 4px; height: 25px;}
#ukazkamenu li {float: left; list-style-type:none; font-weight: bold; font-size: 13px; margin: 0 10px;}
#ukazkamenu li ul {display: none;}
#ukazkamenu li:hover ul {display: block; position: absolute; z-index: 10; padding: 12px; margin: 0 -35px;}
#ukazkamenu li:hover ul li {background: grey; float: none; text-align: center; padding: 8px 20px;}
#ukazkamenu li:hover ul li ul {display: none;}
#ukazkamenu li:hover ul li:hover ul {display: block; position: absolute; margin: -35px 34px;}
#ukazkamenu li:hover ul li:hover ul li{background: darkgrey;}



A zde, kdybste tápali, je i samotný html kód menu z ukázky. Úrovně jsou pro přehled odsazeny podle hloubky.

<div id="ukazkamenu">
<ul>
  <li><a>O mně</a></li>
  <li><a>Články</a>
    <ul>
      <li><a>2010</a></li>
      <li><a>2011</a></li>
      <li><a>2012</a>
        <ul>
          <li><a>Dnes</a></li>
          <li><a>Zítra</a></li>
          <li><a>Pozítří</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a>Galerie</a>
    <ul>
      <li><a>Hory</a></li>
      <li><a>Lesy</a></li>
      <li><a>Moře</a></li>
    </ul>
  </li>
  <li><a>Kontakt</a></li>
</ul>
</div>


Vydáno: 19.1.2013 20:14 | 
Přečteno: 11074x

Hodnocení:

Komentáře rss


, nivo slider odpovědět
Děkuju za radu ohledně nivo slider. Chtěl jsem se ještě dotzat, mám nad nivo slider těsně vysouvací menu. Když na něj najedu kurzorem a vysune se mi podmenu, tak část zmizí za nivo slider. Dá se udělat, abych měl menu nad nivo slider?

Moc děkuji a přeji hezký víkend

Honza
icon odpověděl(a)
Děkuji, víkend se zatím daří na výbornou :-)
Co potřebujete by měla být schopna vyřešit CSS vlastnost "z-index" čím vyšší hodnotu má, tím je vrstva výše.
, Nivo slider odpovědět
Omlouvám se, že Vás ještě optěžuji dotazem na toto téma. Našel jsem stránky na Nivo slider (http://dev7studios.com/plugins/nivo-slider/), ale nepodařilo se mi na stránkách najít video.

Přeji hezký večer
Honza
icon odpověděl(a)
http://docs.dev7studios.com/jquery-plugins/nivo-slider
, odp. odpovědět
Děkuji za odpověď. Jestli jsem dobře pochopil, tak si musím Nivo Sider nainstalovat do nějakého redakčního systému, aby mi fungoval.
Mám vlastní grafiku. Jde to na ten systém nějak nainstalovat? Všimnul jsem si, že používáte SunLight

Děkuju
icon odpověděl(a)
To chápete špatně... O redakčních systémech jste mluvil vy, v rámci hostingu. Nivo slider je Javascript a jde jednoduše vložit na jakoukoli html stránku, postup je podobný jako třeba integrace Lightboxu, viz web Nivo slideru, kde je i video návod.
Jinak vlastní grafiku, to už je pak práce kodéra ji převést na šablonu pro redakční systém, nebo na funkční HTML stránku. Já pro zákazníky na příklad tvořím šablony právě pro Sunlight. Stačí aby dodali patřičné podklady v PSD.
, horní běhací menu odpovědět
Dobrý den,
rád bych si udělal internetovou stránku a jsem velký amatér.
V prvé řadě bych vám rád poděkoval za vaše stránky. Hodně mi pomohli.
Na stránkách se mi líbí vaše horní "menu" kde se mění různé obrázky. (je tam text mojezaliby.cz)
Můžete mi prosím poradit, jak můžu dát toto "menu" na své stránky?

Děkuju
Honza
icon odpověděl(a)
Dobrý den,
omlouvám se, za trochu opožděnější reakci. Ona internetová stránka není zas tak složitá, jak se někdy zdá, jen mnoho lidí dělá tu chybu, že chce hned co nejvíce prvků.
Konkrétně k dotazu - měnící obrázky jsou dělané pomocí javascriptu. Konkrétně se jedná o zdarma použitelný Nivo slider. Na jeho stránkách je i přehledný manuál (i videomanuál) jak jej implementovat a použít.
odpověděl(a)
Děkuji za odpověď. Chtěl bych si objednat webhosting u web4u.cz. Nabíjzejí WordPress 3.5.2,Joomla! 3.1.1 a Drupal 7.22. Mohu přes tyto programy taky vytvořit Nivo slider? Připradně jaký program by jste mi doporučil.

Děkuji
icon odpověděl(a)
Proč zrovna u web4u? když se dívám základní varianta sice vypadá levně ale nemá PHP ani Databáze, takže tam žádný ze zmíněných redakčních systémů nerozjedete... až ve vyšších verzích a ty mi zas připadnou drahé.
Oproti Wedos - http://hosting.wedos.com/d/62760
je cena basic varianty skoro dvojnásobná.
Zmíněné redakční systémy jdou snadno (na WP je opět i český přehledný manuál) nainstalovat na jakýkoli slušný hosting. Nivo slider, má i speciálně plugin pro WP - ovšem placený. Neměl by být problém však integrovat ručně.
Záleží co máte za požadavky. Já osobně používám český redakční systém Sunlight - http://sunlight.shira.cz/ na tom běží i tento web. Jednoduší prezentace dělám v čistém HTML kódu. WP však mohu také s klidným svědomím doporučit. Je velmi rozšířený a lze na něj najít spousty návodů, šablon, doplňků...
, Menu odpovědět
Nevím, jak bych Vám to měl poslat. Zjistil jsem ale závažnější věc. V mozille mi menu funguje normálně a v Expoleru se mi to rozhodí a vůbec neraguje. Jak je to možné?
icon odpověděl(a)
Starší IE mají problémy s počítáním margin, že jej mají jinak, řešit by to mělo jít například přidáním do hlavičky:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

On tento manuál měl obecně sloužit spíš jen jako nástin struktury a jednoduchého stylování od kterého už se případně člověk odpíchne. Uvažuji, že na stránky přímo přidám CSS poradnu formou fóra.
Jinak ukázky, jsou pro mne nejlepší přímo na internetu a odkaz na dané stránky.
, Podmenu odpovědět
Dobrý den,
opět Vám píši ohledně dotazu na menu. Ve vašem příkladě máte články - 2012 - dnes a vaše domenu menu je po najetí myši hezky vedle sebe. V mém menu mám o mých zážitcích - vánoce doma - 2012. Dále v hlaním menu mám sport - bojová umění - úspěchy. Když najedu myší na vánoce doma, tak se mi vedle toho objeví 2012.(to je v pořádku) U bojových uměních už tomu tak není. Uspěchy se mi objeví uprostřed menu bojová umění.
Jak udělám, aby když najedu myší na první podmenu(2012, úspěchy) objevilo vedle druhé podmenu (vánoce doma, bojová umění) bez ohledu na délku textu?
Doufám, že jsem to napsal srozumitelně.

Děkuju
Jarda
icon odpověděl(a)
Potřeboval bych ideálně vidět, abych mohl přesně poradit. Avšak nejspíše bude nutné upravit a nastavit právě rozměry podmenu. Popř. umístění podmenu, k jednotlivým jde v případě potřeby i přidávat třídy. Možností postupně člověka napadá více.
, rady odpovědět
Děkuju Vám za vaše rady. Moc mi pomohly. Chtěl jsem se zeptat, zda mohu na svoje stranky dát Váš odkaz. K menu ještě takovou drobnost. Nepřišel jsem na to, jak docílit toho, když najedu myší na články, tak aby se mi zabarvily do modra.

Dík
icon odpověděl(a)
Odkaz můžete, budu rád. Jinak co udělá položka po najetí myší je dáno opět pseudotřídou :hover
takže například:
a:hover {color: blue;} změní barvu textu odkazu po najetí myší na modrou.
, Pomoc3 odpovědět
Ještě mám na Vás opravdu poslední dotaz. Když si dám odkaz např. v menu o mně: a href="../menu/index.html">O mně /a>, tak se mi odkaz zabarvý do modra a podtrhne. Jak toto odstraním?

Moc děkuji
J.
icon odpověděl(a)
jde o standardní nastylování odkazů, které jsou v základu prohlížeče modré a podtržené, stačí si tedy nadefinovat vzhled tagu "a"
například
#ukazkamenu li a {text-decoration: none; color: white;}
, Pomoc2 odpovědět
Děkuji za odpověď a omlouvám se, že píší až teď. Nakonec jsem použil Vaše menu. Je to nejlepší řešení a hlavě je přehledné a dobře napsané.
Chtěl jsem se Vás dotázat ještě na 2 otázky.
Rád bych si udělal v menu svislé dělicí čáry. tj. O mně|články|galerie| ... Jak se to dá nastavit? Podobně bych to rád nastavil i v podmenu, ale vodorovné dělící čáry. Vzor viz. http://css.blbeckove.com/3.seznamy/3.priklady/3-5.horizontalni-menu-svisle-rozbalovaci-triurovnove.html (snažil jsem se také dostat toto menu na svojí stránku, ale nechtělo mi to nechat vycentrovat. p align="center" Nevíte proč?)
2.otz jde Vaše jmenu udělat i svisle?

Moc děkuji za odpověď
Jarda
icon odpověděl(a)
pomocí align="center" centrujete text, nikoli prvek, to se dělá pomocí css "margin: 0 auto;" prvek by však měl mít nastavenou šířku. co se týče ukázky, mají tam čáry dělané zvláštním způsobem, který sem zcela nepochopil (několikrát mají nastavenou vlastnost border a pár dalších věcí). Jednoduché způsoby jsou 2, buď vkládat čáru jako obrázek (img) mezi jednotlivé prvky... a nebo právě přes border, např. pro ukázku jsem přidal
#ukazkamenu li {border-right: 1px solid #fff;
padding-right: 15px;}
čára však v takové případě bude i za posledním prvkem, což lze řešit buď tím, že bych mu přidal třídu, která ji ruší a nebo využil pseudotřídu :last-child
vodorovné čáry v podmenu by pak byly border-bottom.

2.) ano jde, mám to už delší dobu i jako rozepsaný článek. Princip je stejný, rozdíl je jen v nastylování.
, Pomoc odpovědět
Dorý den,
děkuji za příklad s menu. Hodně mi pomohl, ale pořád si nevím rady.
Rád bych si dal vysouvací menu do menu, které jsem si vytvořil (obrázek). Kam mám napsat příkaz, aby se mi menu otevíralo pod mím obrázkem?

Moc děkuji za odpověď
Jarda
icon odpověděl(a)
Dobrý den, bohužel poradit takto je trochu komplikované, ideálně potřebuji vidět konkrétní příklad (web), kde uvidím i o co jste se pokoušel, popř. alespoň nákres situace.
Pokud soudím správě z toho co píšete, tak proužek menu se skládá z jednotlivých položek, které jsou obrázky... obrázek může být uvnitř tagu <li> a potom opět pomocí pseudotřídy :hover (li:hover) vyvoláme nějakou akci po najetí myši. Podmenu by mělo být defaultně skryto (display: none) a po najedí myši by se tato vlastnost měla změnit (li:hover ul {display: block;}). Poté již stačí jen vhodně napozicovat, aby se menu objevovalo tam kde chcete.



© 2018 Mojezáliby.cz

SunLight CMS | Admin