Top Navigation

The example for top navigation holds really no surprises. It does, quite cleverly,
switch from white on dark to dark on white when one hovers!

One thing to watch out for: the hover property. It is by default set to visible,
but that makes our background color disappear. It needs to be hidden.

All this is due to the behavior of browsers. On overflow:scroll, a scroll bar
will appear even if not needed under the circumstances. On overflow: auto,
browsers will create a scroll bar but only on desktop computers...

I tried with active on a slateblue background. Not too happy with that

                                        *     *     *

The responsive top navigation example uses a very interesting feature: the
possibility to do media queries, for example,  ask about the size of the screen and react
as a consequence.The example below makes the yellow div disappear when
the screen size becomes less than 600px.

The top nav case we are looking at makes all the top categories except the first
disappear when the screen sizes down. A menu icon shows up at the far right,
and if the user clicks on it, the nav categories all appear in a vertical stack on the left.

The code that makes this happen is the following.

The @media query in this case will be on screen size (It can check on other things,
such as device orientation, resolution and so on). If the max-width condition is
met, then all the topnav anchors, except the first, will not display. The menu icon, however,
will as a float on the right and as block (rather than inline, inside a text).

All the anchors refer to some other page, except the menu, which has Javascript.void().
The icon itself is an HTML one, referenced with a hex number. On click, the
function will execute, and force the items into responsive mode.

In this situation,the navbar floats and the icon needs absolute positioning...

The use of media queries is a vital element for game makers. Because little games
are especially popular on mobile.