Website:

I had another go at the image slideshow and found a responsive slideshow on slide.js.  This stil needed some editing to the css but I was able to implement it the way I liked.  Its fully responsive and works well.

I have implemented 2 custom bits of javascript.  one is an image swap on rollover, this is used for the social icons and the link to my blogger.  The other is using getElemenyById, this is sed for the dropdown menu when the user clicks the plus.  This works by setting the margin-top of the image div to minus 45px, then when the user clicks the plus the function changes the margin-top back to 0.
I rearranged the javascript so if javascript is disabled the menu will be shown.
here is all the javascript:



this is the image swap
html
onmouseover="document.blog.src=blogger.src" onmouseout="document.blog.src=bloggerGrey.src"

js file
bloggerGrey=new Image;
 blogger=new Image;

bloggerGrey.src="images/bloggerGrey.png";
blogger.src="images/blogger.png";




this part is at the bottom of the html page, this is for users who jave javascript disabled

<script>
window.onload = function(){
document.getElementById("image").style.marginTop="-54px";

document.getElementById("ulList").style.opacity="0";
}
</script>


this is the function for the dropdown menu

function showMenu(){
document.getElementById("image").style.WebkitTransition="margin-top 1s";
document.getElementById("image").style.marginTop="0px";

document.getElementById("show").style.display="none";
document.getElementById("hide").style.display="block";

//list items
document.getElementById("ulList").style.WebkitTransition="opacity 2s";
document.getElementById("ulList").style.opacity="1";
}