Hello, I recently started working on my website, it’s currently at 50.142.6.29 and I want to create a drop down menu box with links to my other pages from the small hexagon roll over image on the left. What I want it to do basically is when a user puts their cursor over the image it highlights and then below it fades in a custom shaped semi-transparent box with 4 link buttons inside that highlight when the user hovers over them. I currently have the hexagon image where it highlights but that is as far as i have gotten. If anyone knows how to code this or could help me in any way I would greatly appreciate it.
I have created a rough illustration as to what I am looking to achieve. There is a link to it labelled illustration in the top left corner of my website.
Hi Crossfire0mega. Welcome to the forums. 
Before you rush too far down this road, consider things like accessibility. For a start, touch devices (which are starting to dominate the market) don’t respond well to hover, so how will those people access your links?
Stuff like this is kind of cool, but it’s also unnecessary and makes life more difficult for some users, so it’s not really good web design. Anyhow, there are lots of free menu examples out there. I was just looking at these today: http://responsivenavigation.net/
What is your skill level with HTML, CSS and JS?
Well What about having the menu box appear when the nav button is clicked?
And I used to be pretty good with HTML a couple years back but kind of got out of the loop, as far ass CSS and JS, I’m fairly new.
That’s a popular option, and there’s a nice, simple example of that in the link I posted (you could use the example in all scenarios rather than just on small screens). My only concern with it on desktops is that it might not work with JS turned off, and also might not work for people navigating via keyboard. That’s why this sort of fancy stuff just leads to problems for people …
An alternative I prefer is to have a single menu link that points to a menu further down the page—again, though, something more used on mobiles that in all scenarios. And it leaves the cool crowd folding their arms and shaking their heads, of course. 
Which example is like what I said? And I couldn’t exactly see the difference between several of the examples, maybe I’m just missing something…
But as for accessibility and such, I really am not worried about appealing to a wide audience nor am I worried about mobile devices so much, for a few reasons, one being that my site is only a personal site that I will be using and a few of my friends as well.
They are a bunch of options for dealing with menus on small screens, so to see how they work on your desktop browser, you have to narrow your browser window quite a bit. But those same menu behaviors can be used on large layouts, too. (In the examples, the CSS only kicks in at small screen widths, but that limitation can be removed.)
Well the menu overlay example looks to be what I’m looking for but my main concern is whether the overlay can be drawn into a custom shape like in my illustration? Is it possible?
Depends on what you mean. You can certainly replace the “Menu” link with the button image on your site, but are you talking about styling the actual dropdown box as a hexagon?
yeah pretty much lol, is it possible? or if not could clicking the button reveal an image that would fade in or scroll down with the buttons overlayed on in
Certainly you could do something like that. An easy way would be to have a transparent box that appears on hover, with a background image of a hexagon. Trying to align text with specific elements on a bg image isn’t a good idea, though, so if you really want something like that, those elements of the image the links need to align with are better placed as bg images on the links themselves.
ok, how would you code that?
First work out exactly what you want it to look like. Can you post a visual?
http://50.142.6.29/ here’s a quick photoshop sketch up of what id like it to look like once the hexagon button is clicked, I would either like it to fade in or scroll down from the top of the menu image and inside there will be the links to my other pages
OK, what I really meant was what the whole thing would look like, images, links and all. It’s easy enough to get something like that to appear on hover, but you mentioned a background image etc. How that plays with the links is important. If the background is just that single color, that makes things easier.
Ok, so I made a more detailed version with the links included, I made it a roll over image.
other than the whole fading in and out when the button is clicked and the links actually working, that’s how I’d like for it to look.
It would also be great if I could make the links light up when the mouse was over them, like a rollover image effect.
I’m still kind of in the dark here about how to progress forward from here, can anyone help? Thank you.
Crossfire0mega,
If you are still working on this page, I will give it a go with you. I’ll need to take a different approach to create the page because I don’t speak JavaScript, but with your obvious JavaScript skill, you should be able to modify my styles to suit your needs.
I need some more information about the page design and how the “buttons” are supposed to work, if you don’t mind.
The images are quite large and are being scaled down by JavaScript. Are the images supposed to be fixed sizes or will there be occasions when their sizes will change? I would like to scale them down to practical sizes while working on this with you, if that’s possible. I can measure what I see at this time and scale to match, if that will work for you.
ronpat,
Yes I am still working on it. So basically the ‘nav’ button is the primary button the page, and the idea behind it is that when you click it, the menu image with the 5 page options appears as seen here 50.142.6.29. At that point you can hover over the links and click whichever one to go to the respective page. Currently on the website all I have is the button which does nothing but light up when you hover over it and a rollover image that shows the menu with the links, but they arent really links yet because I’m not sure how to code that part.
Also, thank you for helping me with this.