Hi,

 

This image is going to make up the homepage of my website. I need the "Our School", "Information", "Curriculum" and "Class News" areas of the image to make a drop down menu appear when a user hovers over them.

 

What's the best way to go about this?

 

I've been trying a method along these lines but have struggled to position the element below the image map and in any case, that's just a bit of text and not a list of links (though may be if I could position it, I could develop it further).

 

This is what I'm trying:

  <div class="dropdown">
  <div class="dropbtn"><area shape="rect" coords="348,592,532,701"></div>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

.illustration {
	position: relative;
    width: 100%;
    height: auto;
	
}


/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

Thanks so much!

Matt

Edited November 18, 20169 yr by mattmcc

It is very unlikely you will ever get this to work properly.

 

The whole homepage image will forever cause problems because you have to use positions on everything.

 

to make this work you need to set up classes for each top level menu item and apply a :hover pseudo class to the dropdowns list. The list for each will be display:none until the :hover.

 

Probably not the best explanation but need to see the code for your site. However, this is still going to be a poor UX. image maps just don't work well on all devices.

It is very unlikely you will ever get this to work properly.

 

The whole homepage image will forever cause problems because you have to use positions on everything.

 

to make this work you need to set up classes for each top level menu item and apply a :hover pseudo class to the dropdowns list. The list for each will be display:none until the :hover.

 

Probably not the best explanation but need to see the code for your site. However, this is still going to be a poor UX. image maps just don't work well on all devices.

 

Thanks fisicx. Code in place now. I think I understand what you're suggesting.

 

This is what they've asked for so I just need to go with it unfortunately.

If that's what they have asked for then just tell them they can't have dropdowns.

 

There probably could be a solution and hopefully one of the experts will be along to explain how but this whole project is going to fail because it won't work on desktops, tablets and phones. As soon as you use positioning in the way you are doing it all falls over.

yep that works fine as a print piece but for anything that scales to content or device it's never going to work. one solution would be to use elements of that picture to make a header and use elements for the navigation but have it as a horiztonal bar. any how it's going to be difficult to use large parts of any of that layout, stick to using elements at the start of sections perhaps ...

 

If i may use my own website as an exmaple of using an image for a website- even then it was tehcnnically challening to have multiple backgrounds and sliding doors technique for the navigation buttons (so that the background image always expands to fit the text) http://gekkoweb.com/

 

basically you need to simplify the whole design, whilst retaining some of the elements of that image to add some character to it. even my quick thing below is too complicated really plus you are faced with extracting elements from the original illustration which looks like it was drawn by hand though it would be possible with the pen tool of course.

 

Edited November 18, 20169 yr by dap

oh "This is what they've asked for so I just need to go with it unfortunately." yes but your job is to point out what's realistic for the (digital) medium and and what isn't - they're too caught up in how the picture looks and wanting a website - take some of that enthusiasm they have and suggest how to translate the elements to a website that works on a multitude of devices and also doesn't take ages to load with too many images etc.

hmm, maybe they didn't like our advice

hmm, maybe they didn't like our advice

 

Hi Dap,

 

No, you're advice was great but they don't want to back down on the full illustration.

 

They accept that it won't be possible to do the drop downs, but they do insist that the latest posts show up on the notice board bottom left. That would require me carefully positioning a responsive widget wouldn't it. Or is there another way to do it?

 

This isn't possible is it!?

 

Matt

ah ok, good

just a normal div in the left column but made up of three parts to fake the appearance of a container - a fixed head, flexible middle and a 'footer' bit - you'll never know how much text you'll need to put in there image on the top bit, repeating background image on the middle bit as a 'border', fixed bottom image

 

--- top image ---

- -

- content -

- -

---- bottom bit -

 

picture explains it better - remember too that this noticeboard will take up the full width (+ abit of padding for margins) on mobile and narrower displays

...but they do insist that the latest posts show up on the notice board bottom left.

This will only work if they are using a screen that can display the illustration full width. Anything else (ie a phone or tablet) and it will all go pear shaped.

 

Tell them they can't have what they want if they insist on the full image.

This will only work if they are using a screen that can display the illustration full width. Anything else (ie a phone or tablet) and it will all go pear shaped.

 

Tell them they can't have what they want if they insist on the full image.

 

They said they would be happy enough with just some dynamic text (i.e. some responsive text positioned on the noticeboard which can be changed by the user). Is this possible with the text being editable in Wordpress?

Yes, it is possible to do this with WordPress but nothing is going to change the fact that the site will not be responsive and will only work properly on desktops. Which means all the parents who use a phone or a tablet to access the site will get a poor UX.

 

The image of the tree is the problem. There is no easy way round the problem. Just be blunt ant tell them this. If they want tree everything has to go out the window and they need to accept the site only work on a desktop and not much else. Which will annoy most of the parents.

Yes, it is possible to do this with WordPress but nothing is going to change the fact that the site will not be responsive and will only work properly on desktops. Which means all the parents who use a phone or a tablet to access the site will get a poor UX.

 

The image of the tree is the problem. There is no easy way round the problem. Just be blunt ant tell them this. If they want tree everything has to go out the window and they need to accept the site only work on a desktop and not much else. Which will annoy most of the parents.

 

To be honest, its made now. http://newsite.arkholme.lancs.sch.uk/

 

This image/page is just a kind of portal to the rest of the site - which is responsive...

 

They are happy with it. But next time I would flat out refuse to implement a full illustration like this!

 

Matt

Edited December 15, 20169 yr by mattmcc

Well it does work - but it's awful on a phone.

 

However, as long as the client is happy that's all that matters.

Well it does work - but it's awful on a phone.

 

However, as long as the client is happy that's all that matters.

 

That homepage is yes... The rest is ok though, no?

"However, as long as the client is happy that's all that matters."

well maybe if

 

a) they're paying a huge amount of money

b] you don't care

 

you should have refused to do it this time as an illustration because it's the users that matter and it's your responsibility to point this out to the school. sure you can offer work arounds such as taking elements and making it responsive (something like you have achieved with the inner pages) but if they don't want to listen then you should walk away

 

there's nothing wrong with explaing why something won't work and offering other solutions and sticking to your guns. some things are a matter of taste or opinion, some things just won't work in the media your working in, but if they hire you to do something then they should respect that and work towards an all inclusive solution. is this harsh? maybe but it's also a matter of principle and the only ones who are happy at the end of it are the school governors or whoever is clinging to the pretty illustration as a web site dream.

just hope that they don't want to add more menu items on the tree

Edited December 15, 20169 yr by dap

^^Totally agree

 

I suspect they will be back soon with a list of things they want fixing because people start complaining that the site doesn't work on a phone or the inner pages don't match the homepage and so on.

When they come back, you can walk away then - Ha Ha.

 

Mind you it would be brilliant if the home page could be made responsive.

 

Maybe you should have asked for the artist to make 6 or 8 different layouts.

ouch and a 1mb image to download before you can navigate or do anything i could get it down to around 500 kb—still fairly hefty—but the round picture of the kids suffered a little, possbily not too much

 

can i aslo offer some other constructie criticism? thanks montserrat is a good heading font but not the best for body copy. it's quite heavy looking for a regular wight too. ok it's no that bad but maybe lato or open sans would have been better - montserrat used here makes it look a bit arial rounded and slightly childish.

Edited December 17, 20169 yr by dap