Elle Brennan Design: Menus and Videos to make that webpage the most awesome ever

This week we learned about new formats of menus and how to embed videos into our code.

Firstly we went about changing the basic layout of the top menu which goes horizontally across the page allowing the user to choose which page they want to view.

We used a pre-made CSS code from CSS Max Design and as our menu goes across the page we obviously went with a horizontal code.

By copying this CSS directly into our own code we could simply alter some of the settings to get the desired layout. So that's one of the most basic menu layouts, but we also learnt about Sprite Menus.

A sprite menu is an effective way to make a button change when you hover your cursor over it.

Instead of this being difficult and having two different images in the CSS to change between, a sprite menu works with one image and changes the position of the image within the 'window' through which you see it.

We created the layout for our button using Photoshop. It can be done simply by creating 4 squares and changing them to suit.

So if your button is 100px wide and 80px high you need to create a square that is 200px wide and 160px high to accommodate the other 3 squares

After designing out menu layout we used the Menu of Awesomeness for the Sprite menu CSS and tested this in a new HTML and CSS file (not our website layout as this menu was just for a practice) and after making sure the HTML and CSS were linked (by changing the background colour) we then added the new CSS info that we downloaded from the menu of awesomeness. After this was added we went through and changed the settings to achieve our own style and info.

This included adding our own sprite menu image into the CSS and changing things like the hover to suit our own measurements. For example the hover needs the image to go up and across for the change to be in the right spot, so the hover needs to be changed to -100px, -80px;

Now onto the video embedding, when using video or YouTube they both have a share button. Once there it has an embed option and gives you the code to add to your CSS