★ Aan de slag 36

  1. Open in Notepad++ het bestand htmlcss_2.html In deze webpagina heb je de structuurelementen header, nav, section, article en footer gebruikt. We gaan tussen de tags <nav> en </nav> HTML-code voor een menu opnemen.
    Gebruik daarvoor de code uit de onderstaande tekst.

    <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Archief</a></li>
          <ul>
             <li><a href="#">Archief 1</a></li>
             <li><a href="#">Archief 2</a></li>
          </ul>
          <li><a href="#">Links</a></li>
          <li><a href="#">Contacts</a></li>
    </ul>


    Sla het bestand op als htmlcss_3.html en bekijk het resultaat in een browser. Er verschijnt nu een menu, maar de opmaak daarvan is nog niet geregeld.
  2. Open Notepad++ en neem code uit de onderstaande tekst over.
    Sla daarna het bestand op als screen_menubalk.css in de map css.
    nav
    {
         margin: 0;
         padding: 0;
    }
    nav a
    {
         color: #FFFFFF;
         text-decoration: none;
         background-color: #003366;
         font-family: Arial, sans-serif;
         width: 100px;
         padding: 2px 4px;
         margin-bottom: 1px;
         display: block;
         list-style-type: none;
    }
    nav a:hover
    {
         background-color: #336699;
         color:#FFFFFF;
    }
    nav ul
    {
         list-style-type: none;
         margin: 0;
         padding: 0;
    }
    nav li
    {
         float: left;
         background-color:#003366;
         min-width:100px;
    }
    nav ul li ul
    {
         display: none;
    }
    nav ul li ul li
    {
         float: none;
    }
    nav ul li:hover ul
    {
         display: block;
    }
  3. Open in Notepad++ het bestand htmlcss_3.html
    Koppel het CSS-bestand screen_menubalk.css aan het bestand htmlcss_3.html
    Sla het bestand op als htmlcss_4.html
    We hebben de opmaak van het menu in een apart CSS-bestand geregeld.