Jump to content


Photo

hover and divs


  • Please log in to reply
8 replies to this topic

#1 virtual_odin

virtual_odin
  • Members
  • PipPipPip
  • Advanced Member
  • 47 posts
  • LocationLondon, England

Posted 22 March 2006 - 07:37 AM

I am designing a site with a dynamic navigation pane/list down the left side. I could call it a menu, but it will be more sophisticated that that name would imply. The navigation pane/list is dynamic in two senses. First there are five for the user to choose. And second the items are drawn from my database and will be different for different users, eg documents accessible to that user, or other users on line and so on. Here is a screen print of the document navigation one.

[img src=\"http://soane.net/menu.png\" border=\"0\" alt=\"IPB Image\" /]

I can manage all of this interactivity with php and mysql. Click the relevant button in the top pane and the relevant pane/list appears below. The links in that pane/list then give the user the relevant control over the rest of the page. I do not want to use javascript. CSS feels right.

So here's the CSS issue: I want to load all five panes/lists and using CSS make the active one visible and hide the others. I can do that: I have two div styles - one for display and one for hidden. But I want the style for the buttons such that when the user hovers over each of the buttons at the top, the div style of the relevant pane/list is changed to display and therefore diplayed temporarily so the user can see what he/she would get if he/she went on to click the button.

So, in essence, can a 'hover' property in the style for each button determine whether another style element is displayed or hidden. Feels like it must be possible, but it's not in my toolbox right now. Your suggestions gratefully received.

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 22 March 2006 - 12:16 PM

Sorry, but there is no way to do that completely with CSS, as far as I know. You'll just have to use a few lines of Javascript.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 khendar

khendar
  • Members
  • PipPipPip
  • Advanced Member
  • 78 posts

Posted 27 March 2006 - 04:17 AM

There is a way to do this - although its a little tricky to get working. I used it for tooltips popups:

Use this code for the various buttons:

<a href="#" class="info">
Button1
<span>Test Content 1</span>
</a>
<a href="#" class="info">
Button2
<span style="left:-2.5em">Test Content 2</span>
</a>
etc (replace Button1 etc with image buttons or whatever you are using)

And the CSS is:

.info{
position:relative; /*this is the key*/
z-index:24;
border:0px;
color:#000;
text-decoration:none;
}

a.info{
position:relative; /*this is the key*/
z-index:24;
padding:0px;
color:#000;
text-decoration:none
}

a.info:hover{
z-index:25;
border:0px solid black;
}

a.info span{
display: none
}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:0em; width:10em; height:100em;
border:1px solid #000;
background-color:#eee; color:#111;
text-align: center;
font-size:80%;
padding:5px;
}

You'll need to play around with the positioning of the popup boxes. At the moment the positioning is relative to the button.

#4 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 27 March 2006 - 01:37 PM

But he isn't asking for popups. He's looking for a menu hover.
The problem with your solution is that, as soon as you stop hovering over the box (say, to click a link inside) it vanishes because of the gap between the content pane and the button. You would need to have the two objects become practically the same for this to work.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#5 khendar

khendar
  • Members
  • PipPipPip
  • Advanced Member
  • 78 posts

Posted 28 March 2006 - 02:01 AM

Read his post again:

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]But I want the style for the buttons such that when the user hovers over each of the buttons at the top, the div style of the relevant pane/list is changed to display and therefore diplayed temporarily so the user can see what he/she would get if he/she went on to click the button.[/quote]

#6 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 28 March 2006 - 01:30 PM

Ooh... Now I feel like a moron. Thanks for pointing that out.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#7 khendar

khendar
  • Members
  • PipPipPip
  • Advanced Member
  • 78 posts

Posted 29 March 2006 - 12:19 AM

Lol no problems :P

#8 virtual_odin

virtual_odin
  • Members
  • PipPipPip
  • Advanced Member
  • 47 posts
  • LocationLondon, England

Posted 01 April 2006 - 02:16 PM

Many thanks khendar. Just what I needed. Works a treat.

#9 khendar

khendar
  • Members
  • PipPipPip
  • Advanced Member
  • 78 posts

Posted 03 April 2006 - 12:53 AM

No probs. Anything for another Tim :D




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users