I have a page design with a menu as follows:
Cat1 | Cat2 | Cat 3 | Cat 4
When I hover the word Cat2, The bgcolor of the whole box of Cat2 changes to blue color. Also, whole cell needs to be clickable and linked to other page.
I can do that without having the symbol "|" by changing the bgcolor of the table cell and making width of the "a tag" to 100% and height of "a tag" to 30px. But I can't figure the way to add the delimiter symbol "|" in it.
Does anyone have any ideas about that?
-
Put a border-left in CSS? Or does it need to be a literal bar character?
-
You don't need to use tables, CSS is your friend for this kind of thing!
Bare with me I am not a web designer and my html/css skills are a little rusty, but is something like this what you want?
<html> <head> <style type="text/css"> #menu { text-align: center; } #menu a { text-decoration: none; padding: 5px 40px; } #menu a:hover { background-color: blue; color: white; } </style> </head> <body> <div id="menu"> <a href="#">Cat 1</a> | <a href="#">Cat 2</a> | <a href="#">Cat 3</a> | <a href="#">Cat 4</a> </div> </body> </html> -
You can use adjacent sibling selectors in CSS, by applying styles to elements based on the elements which immediately precede them you can create the menu dividers.
.menu a { text-decoration: none; padding: 10px; } .menu a + a { border-left:solid 1px black; }By using this approach you can easily apply this styling to any of your menus by assigning class="menu".
<div class="menu"> <a href="#">Questions</a> <a href="#">Tags</a> <a href="#">Users</a> <a href="#">Badges</a> <a href="#">Unanswered</a> </div> -
Let me clarify something.
Chuck
Put a border-left in CSS? Or does it need to be a literal bar character?
It needs to be a literal bar character "|" or a shorter border. The border created by CSS is too long.
John T
I need the blue bgcolor to take up the whole box. When I hover the "Cat2", the left and right "bar" delimiter should disappear. This is what I want to do.
-
Navigation menus should be semantically marked up as lists. Using an unordered list is a very common practice for a menu such as this. See this example on Listamatic for a foundation to biuld from. To get the background color to be larger than the text you will simply need to add padding around the
<a>tag. -
This meets all the requirements sans one; That the vertical bar must be shorter than the height of the link.
It may be easiest to achieve this with a background image on the < a > rather than using borders or pipes (|).
I did try something with spans inside the links, which would be shorter than the full height of the A, but I couldnt get it rendering cleanly.
You could also add pipes into the HTML itself, inside a span, and hide them on hover.
I know this wont work properly in all browsers, but hacks and workarounds are extra. :P
EDIT:: I added @Fistandantilus' adjacent selectors to this. makes for cleaner HTML.
<html> <head> <title>Menu Test</title> <style type="text/css" media="screen"> ul.menu { display:block; margin:0; padding:0; height:30px; } ul.menu li { display:block; width:100px; height:30px; float:left; } ul.menu li a{ width:100%; height:30px; line-height:30px; display:block; text-align:center; border-left:1px solid transparent; } ul.menu li + li a { border-left:1px solid #000; } ul.menu li a:hover { background-color:#0f0; border-left:1px solid transparent; } ul.menu li:hover + li>a { border-left:1px solid transparent; } </style> </head> <body> <ul class="menu"> <li><a href ="#">item</a></li> <li><a href ="#">item</a></li> <li><a href ="#">item</a></li> <li><a href ="#">item</a></li> <li><a href ="#">item</a></li> <li><a href ="#">item</a></li> <li><a href ="#">item</a></li> </ul> </body> </html>
0 comments:
Post a Comment