CODEWITHSUNDEEP
html
Billy
Billy

Reputation:

HTML Menu help

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?

Upvotes: 0

Views: 223

Answers (5)

user36457
user36457

Reputation:

You don't need to use tables, CSS is your friend for this kind of thing!

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>

Upvotes: 0

garrow
garrow

Reputation: 3489

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>

Upvotes: 1

Phaedrus
Phaedrus

Reputation: 8421

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>

Upvotes: 1

cowgod
cowgod

Reputation: 8656

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.

Upvotes: 0

Chuck
Chuck

Reputation: 237060

Put a border-left in CSS? Or does it need to be a literal bar character?

Upvotes: 2

Related Questions