Code breakdown: Menu 1

Screen Shot 2015-04-19 at 23.46.50This is the HTML code which includes the following buttons:

  • About us
  • Wiki
  • Sign up

The ‘sign up’ button will change to ‘logged in’ if the user is logged in using the session function in PHP:

  • ($_SESSION[“user”])

Otherwise, the user will be able to click on the ‘SIGN UP’ hyperlink.


Screen Shot Menu 1 CSS positioningIn order for the menu to look the way it does we must include a cascade style sheet (CSS). In this screenshot we can see that the css is doing the following:

  • the buttons are aligned in the centre at all times
  • when the width of the browser is altered the position of the buttons adjust accordingly using the “%” symbol as opposed to a fixed ‘px’ – this makes the buttons responsive.

Screen Shot Menu 1 CSS colours2Looking at this screenshot and the CSS here we can gather that:

  • the buttons will be red
  • it will have a particular padding
  • the font size will be 1.2em

So menu 1 looks like this:
Screen Shot 2015-04-20 at 00.17.03


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s