Fri Oct. 20

Research & Presentation

What resource (link / slide / example) was the most helpful or inspiring during the last two weeks? Do some research (15min).

Please present it to your colleagues (2-3min each).

Portfolio Page - Responsive Menu

Based on the example in the presentation slides and the things you learned in the last 2 weeks, add a menu toggle button to your portfolio page.

Steps:

• get a reference to the burger button
• get a reference to the box containing the menu to be shown / hidden
• write a function burgerMenuShowHide that shall be executed every time the burger button has been pressed:
  • if the menu is hidden (display:none), show it
  • if the menu is shown (display:block), hide it
• add the function to the "click" event listener of the burger button

(Hüni's solution)

Portfolio Page - Auto-Select Menu Items

Instead of adding a class="selected" to a menu item on each page, we can write a JavaScript that does this for us. The page URL actually shows us everything we need to know: the last part of the URL is the same like our href="..." attribute in the page link:

http://002.powercoders.org/matthias-hueni/index.html

Steps:

• get the current page URL
• split the URL into path parts
• get the last part of this array (our current page link)
• for all link elements in the menu, do the following:
  • get the href attribute
  • if it is the same like the current page URL, set the class attribute to "selected"

(Hüni's solution)