Seznam - menu Seznam a jeho položky lze použít například i na vytvoření vysouvacího menu. Seznam a jeho položky lze použít například i na vytvoření vysouvacího.

Prezentace na téma: "Seznam - menu Seznam a jeho položky lze použít například i na vytvoření vysouvacího menu. Seznam a jeho položky lze použít například i na vytvoření vysouvacího."— Transkript prezentace:

1 Seznam - menu Seznam a jeho položky lze použít například i na vytvoření vysouvacího menu. Seznam a jeho položky lze použít například i na vytvoření vysouvacího menu. Vysouvací seznamové menu lze definovat pomocí CSS stylů. Vysouvací seznamové menu lze definovat pomocí CSS stylů. Velkou výhodou tohoto řešení je nepoužití potenciálně nebezpečného JavaScriptu. Velkou výhodou tohoto řešení je nepoužití potenciálně nebezpečného JavaScriptu. Další výhodou je zajištění funkčnosti i na počítačích, kde není nainstalována podpora JavaScriptu. Další výhodou je zajištění funkčnosti i na počítačích, kde není nainstalována podpora JavaScriptu.

2 Seznam – menu 1 V seznamu jsou použity značky pro odkaz, které budou vysvětleny později. V seznamu jsou použity značky pro odkaz, které budou vysvětleny později. Příklad PříkladStránkaStylopis Obr. 2 Obr. 3 Obr. 1

3 Seznam – menu 1 Vysvětlení jednotlivých položek CSS. Vysvětlení jednotlivých položek CSS. li {float: left;} – značka položky seznamu, plovoucí objekt, zarovnání vlevo a {background: lime; margin-left: 5px; padding: 5px;} značka odkazu, pozadí světle zelené, vnější okraje značky 5 px, vnitřní okraje značky 5 px a:hover {background: #bcbcbc;} – odkaz nad nímž se nachází kurzor myši, změna barvy na šedou a:hover {background: #bcbcbc;} – odkaz nad nímž se nachází kurzor myši, změna barvy na šedou Obr. 4

4 Seznam – menu 2 (rozevírací menu) Příklad - Stránka Příklad - Stránka Obr. 5

5 Seznam – menu 2 (rozevírací menu) Stylopis Obr. 6

6 Seznam – rozevírací menu Vysvětlení jednotlivých položek CSS. li, ul {margin: 0px; padding: 0px;} – reset značek li a ul.ukryt {visibility: hidden;} – generická třída pro ukrytí li {float: left; width: 120px; list-style-type: none; margin: 2px 2px 2px 0;} – nastavení položky seznamu jako plovoucí objekt, zarovnaný vlevo, šířka prvku 120 px, odrážky žádné, natavení vnějších okrajů margin: 2px 2px 2px 0;} – nastavení položky seznamu jako plovoucí objekt, zarovnaný vlevo, šířka prvku 120 px, odrážky žádné, natavení vnějších okrajů a {display: block; background: lime; padding-left: 5px;} značka odkazu, blokový formát, barva světle zelená, levý vnitřní okraj 5 px a:hover {background: #bcbcbc;} – odkaz nad nímž se nachází kurzor myši, změna barvy na šedou li:hover ul {visibility:visible;} – zobrazení položky seznamu, nad níž je kurzor myši

7 Otázky k opakování 1. Jaký parametr zajistí zobrazení položek seznamu vedle sebe? 2. Jaký parametr zajistí ukrytí (nezobrazení) položky seznamu? 3. Jaká je výhoda vytvoření rozevíracího menu pomocí seznamu?

8 Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, Roman. Www.blabik.cz: Podpora výuky: „Tvorba www stránek“ [online]. 7. února 2013 11:30. Dostupný z WWW: http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf Použité obrázky: Vlastní