If I wanted to use CSS to create a menu similar to the popup menus on VBF that change the backcolor when you mouseover then and not just the link portion?
I dont need it to popup, only look and when mouseovered act the same.
I went through the css code but I cant get it to work at all.
Here is an example.
Thanks
VB/Office Guru™ (AKA: Gangsta Yoda™ ®)
I dont answer coding questions via PM. Please post a thread in the appropriate forum.
make ur links a list and in css for the link hover property do ul: alink hover thingy and pick the color cause the ul is the background while the li are the links
style the li:hover to be the same as your a:hover......
Here's what I have on my site:
Code:
#pages li {list-style-type: square;}
#pages .page_item:hover {list-style-type: square; color: #800000; }
#pages .page_item:hover ul {list-style-type: circle; color: #ffffff; }
#pages li .page_item{list-style-type: circle; margin-left: 5px; list-style-position: inside; border: 0px; border-bottom: 1px solid #800000; border-left: 1px solid #800000;}
#pages li .page_item a {text-decoration: none;}
#pages li .page_item:hover{list-style-type: disc; color: #800000;}
the #pages is the ID of a ul list where pages for the site are...
Each li item is classed with "page_item" so in the CSS I used #pages .page_item:hover to get a rollover effect. The key is the first two items. I don't change the background color in mine, but if you do, you may want to make the background-color of your a tags transparent in the list. It's easier that way. Then you can change the background-color of the li tag w/o needing to also do the a tag.
You need to use the onmouseover and onmouseout events and change the className atrribute of the element. This is quite simple:
Code:
<html>
<head>
<title>Highlight a Div</title>
<style type="text/css">
.highlight {
background-color: gray;
}
.borderDiv {
border: 5px solid black;
}
</style>
<script type="text/javascript">
<!--
function toggleHighlight(element)
{
if (element.className.search(/highlight/) != -1) // check if the highlight style has already been applied
{
element.className = element.className.replace(/highlight/, ''); // if it has, remove it
}
else // if it hasn't add it
{
if (element.className.length > 0)
{
element.className = element.className + ' highlight'; // add it to the original class name
}
else
{
element.className = 'hightlight';
}
}
}
//-->
</script>
</head>
<body>
<div class="borderDiv" onmouseover="toggleHighlight(this);" onmouseout="toggleHighlight(this);">
<a href="http://www.vbforums.com/">A Link To VBForums</a>
</div>
</body>
</html>
It took me time to reply - most CSS browser have JS enabled. But the user can disable it. In which case the CSS only one which tg shows is the better option as it accomodates the lowest common denominator.
I've modified the example so it uses tg's suggestion too. You may want to fiddle the CSS to get rid of the bullet point though.
yak - that's only going to change the a tag.... not the cell as the user hovers over it.
the td:hover also needs to be styled... and if it's the same as the a: hover.... you can do it like this:
yak -yeees.... which is why you have to add :hover to the td cell.... otherwise, if you only :hove the a tag, and it doesn't span the entire width of the cell..... you get a partialy filled in cell....
@RD - yes, it's the hover for the table cell... as I was just telling yak, the width of the a tag is going to vary according to it's contents, so unless the a tag spans the entire width of the table cell, you'll get a partial fill in the cell..... Alternatively I think you can set the width:100% for the a tag in a td cell in your menu.... then you shouldn't need the td:hover.
Thanks guys, hopefully I can get some time to complete the menu by tomorrow. I am glad to hear that I can have an all css menu with rollover effects just like the quick links popup menu without the popup.
So as long as I place the custom links and tds before the general ones they should get applied correctly.
I'll be back when I can to give an update and ask any other questions I may have implementing this.
VB/Office Guru™ (AKA: Gangsta Yoda™ ®)
I dont answer coding questions via PM. Please post a thread in the appropriate forum.
I only used tables because I remember a thread back, and thought you were using tables. Although divs are better than tables, in some situations. Some people will think they are doing well, by changing their tables to divs, then they have 30 divs instead of 30 tables, in that case, divs are not better. But back to topic, with a menu, i'd use a list..I believe techgnome's css is assumed using a list.
@RD... Take a look at my site ( http://tannagh.com ) is the menu on the left there what you are looking for? (the rollover is sublte, but noticable.).... You may want to use ul/li tags (that's what mine is made of)... after all that's what a menu is -- a list of options.
As for using tables, with CSS gaining, it's become the conventional wisdom that tables should be used for showing tablular data, not controling layout.
Easy question but difficult answer
Reply With Quote
- most CSS browser have JS enabled. But the user can disable it. In which case the CSS only one which tg shows is the better option as it accomodates the lowest common denominator.
Although divs are better than tables, in some situations. Some people will think they are doing well, by changing their tables to divs, then they have 30 divs instead of 30 tables, in that case, divs are not better. But back to topic, with a menu, i'd use a list..I believe techgnome's css is assumed using a list.
CornedBee