Menu pomocí tagu <menu> a css

Na internetových stránkách se běžně můžeme stkat s dvěma základními druhy menu:

vertikální menu

Menu, které vidíte vlevo, má takovýto zdrojový kod:

<menu id="leve-menu">
	<li><a href="#">položka 1</a></li>
	<li><a href="#">položka 2</a></li>
	<li><a href="#">položka 3</a></li>
	<li><a href="#">položka 4</a></li>
</menu>

Takže na kódu není nic neobvyklého, je třeba se pustit do css

#leve-menu{width:150px;padding:3px 0px;float:left;margin-left:5px}
#leve-menu li{list-style:none;border-bottom:2px solid red;border-top:2px solid red;margin-bottom:3px;}
#leve-menu li a{padding-left:30px;background:url("./sipka-zelena.gif") no-repeat 5px 50%;font-size:1em;font-weight:bold;display:block;text-decoration:none;color:black;background-color:navajowhite;}
#leve-menu a:hover{color:black;background-color:coral}

horizontální menu

  • Úvod
  • Rozcestník
  • polozka 3
  • Pokud bysme chtěli udělat menu horizontální, tak kód zústane stejný, změní se jen parametr v id na: horizontalni a mírně upravíme css:

  • Úvod
  • Rozcestník
  • polozka 3
  • polozka 4
  • ©krteczek