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. 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!
| 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?:O that's really nice! Thanks for the link 
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! thx a lot for qqz and simplyw00x! Very useful especially after sample links are added!!
| 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.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!
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.
| 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.
