FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS tooltips (sort of)





qqz
I found a great way to give your navigation section a neat touch using CSS. Take the following HTML code:
Code:
<div id="nav">
<ul>
<li><a href="#">Link 1<span>Lorem Ipsum...</span></a></li>
<li><a href="#">Link 2<span>Lorem Ipsum...</span></a></li>
<li><a href="#">Link 3<span>Lorem Ipsum...</span></a></li>
<li><a href="#">Link 4<span>Lorem Ipsum...</span></a></li>
</ul>
</div>

Add the following CSS:
Code:

#nav ul li a span
{
display: none;
}
#nav ul li a:hover span
{
display: block;
//positioning stuff
}

The first part of this code makes the span not display by default. In the second part, it displays it if the link is hovered over. You would replace the comment (//positioning stuff) with information on how to position the span.

This tip can be helpful, but if you're not careful, it won't display right in IE, so make sure you check when your done.
davmcmul
nice one, it could probably be done with a more complicated piece of javascript but your way is much cleaner and simpler, very clever indeed. What I personally would be very interested in seeing/trying out for myself is that technique used to make a drop down list with additional links inside it which contain more links (slightly similar to the way the start menu works only with a first list of links at the top, drop down from there and then move right before droping down again). Nice tip!
simplyw00x
Quote:
I found a great way to give your navigation section a neat touch using CSS. Take the following HTML code:
Code:
<div id="nav">
<ul>
<li><a href="#">Link 1<span>Lorem Ipsum...</span></a></li>
<li><a href="#">Link 2<span>Lorem Ipsum...</span></a></li>
<li><a href="#">Link 3<span>Lorem Ipsum...</span></a></li>
<li><a href="#">Link 4<span>Lorem Ipsum...</span></a></li>
</ul>
</div>

Add the following CSS:
Code:

#nav ul li a span
{
display: none;
}
#nav ul li a:hover span
{
display: block;
//positioning stuff
}

The first part of this code makes the span not display by default. In the second part, it displays it if the link is hovered over. You would replace the comment (//positioning stuff) with information on how to position the span.

This tip can be helpful, but if you're not careful, it won't display right in IE, so make sure you check when your done.

Ripped a little from Here

Quote:
What I personally would be very interested in seeing/trying out for myself is that technique used to make a drop down list with additional links inside it which contain more links (slightly similar to the way the start menu works only with a first list of links at the top, drop down from there and then move right before droping down again).

You mean like Here?
davmcmul
:O that's really nice! Thanks for the link Wink

OK, I've wracked my brains and I still can't figure out, how on earth the list on the right works, i hover over one of the bold ones,. that list item moves out, while leaving a bit of grey area in its place so the other items don't move up , what on earth is this grey area and how did you get it there? it can't be extra width of the li because then it would push the other items down. Please help me!
davmcmul
^It's been edited^
charliehk
thx a lot for qqz and simplyw00x! Very useful especially after sample links are added!!
simplyw00x
Quote:
OK, I've wracked my brains and I still can't figure out, how on earth the list on the right works, i hover over one of the bold ones,. that list item moves out, while leaving a bit of grey area in its place so the other items don't move up , what on earth is this grey area and how did you get it there? it can't be extra width of the li because then it would push the other items down. Please help me!

It's not a new item, it's just the same item (e.g. Books), it just has the :hover selector set to wider, and grey, so whenever your mouse is over it it becomes wider and grey.
davmcmul
I thought I had tried that but it always made a huge space in the original list because the smaller list is technicaly part of that list item so if you make it wider, you make the whole thing wider, but suppose that doesn't happen when the smaller list is set to use absolute positioning because its removed from the normal flow. ... right?

Thanks for the help!
BlackSkad
Just make sure you pay attention to the fact that this doesn't work in IE! Internet Explorer doesn't support hover-effects on random elements, only on links. So I would not use it, unless you are sure get no visitors who use IE.
simplyw00x
Quote:
Just make sure you pay attention to the fact that this doesn't work in IE! Internet Explorer doesn't support hover-effects on random elements, only on links. So I would not use it, unless you are sure get no visitors who use IE.

It degrades well to IE. And also, IE smells. It may convince people to use a real browser.

Quote:
I thought I had tried that but it always made a huge space in the original list because the smaller list is technicaly part of that list item so if you make it wider, you make the whole thing wider, but suppose that doesn't happen when the smaller list is set to use absolute positioning because its removed from the normal flow. ... right?

I'll admit that I haven't really looked at the source and I'd have to play with it for a while to understand it. Take a look at the source of the page (or C&P it and edit), and if you still have trouble, post again and I'll help.
Related topics
Okay, I'm done trying to use CSS for layout.
CSS templates
CSS Bible
Editing static HTML pages and CSS in PHP
CSS nested divs
CSS/HTML
Help wanted with CSS and iframes It works
CSS DIV layout advice
CSS Problems and Questions.
help needed with css & javascript
Looking to start a CSS based site
In CSS what's the difference between class and ID
Do you use css to design a website?
<hr> stilosi con i CSS
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.