Border around navigation bar: Curved

HTML & CSS
1

Hi,

I am looking at Mac Accessories - Apple Store (U.S.)

In particular the left navigation bar. I can see the left navigation bar is done with JavaScript. However I would like to do something like this using only CSS, PHP, MySQL. I know how to get a list of words, using <li> tags and how to get the background and text to change colour when clicked/hovered over. I do not know how to get the border around parts of the navigation bar (in the apple site there are 2 separate left navigation bars) and how to give the border curved corners.

I am aware of different methods to add backgrounds and borders when inputting text within an area - indeed i have discussed it here at SitePoint » Web Design, Web Development, Freelancing, Tech News and more. But it looks to me as though the navigation bar will need to be more than just a background with a border to get the effect!?

This is the coding of the apple web site:

<div class="box store-navigation" aria-label="Apple Store" role="navigation">
<div class="title-bar">
<h2> Departments </h2>
</div>
<div class="box-content clearfix">
<ul class="departments">
<li>
<a onclick="s_objectID='MTM3NDcyMzk';" href="/us/browse/home/shop_mac?mco=MTM3NDcyMzk">Shop Mac</a>
</li>
<li>
<a onclick="s_objectID='MTM3NDcyNDY';" href="/us/browse/home/shop_ipod?mco=MTM3NDcyNDY">Shop iPod</a>
</li>
<li>
<a onclick="s_objectID='MTM3NTA3MTI';" href="/us/browse/home/shop_iphone?mco=MTM3NTA3MTI">Shop iPhone</a>
</li>
<li>
<a onclick="s_objectID='MTcyMTgxNTY';" href="/us/browse/home/shop_ipad?mco=MTcyMTgxNTY">Shop iPad</a>
</li>
</ul>

Matt.

2

Hi,

That menu isn’t created with javascript, it’s just plain html and css.

The round corners are done with this sprite (although they could have used border-radius for newer browsers).

The rest is very basic css and just setting the anchors to display:block and changing color on rollover.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h3.menuhead {
    margin:0;
    padding:0;
    background:#234372;
    color:#fff;
    font-size:100%;
    width:140px;
    padding:3px 14px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
ul.menu {
    list-style:none;
    margin:0 0 15px;
    padding:0;
    border:1px solid #ccc;
    border-top:none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size:100%;
    width:166px;
    padding:5px 0;
}
ul.menu li a {
    padding:2px 14px;
    display:block;
    color:#000;
    zoom:1.0;/* ie haslayout fix*/
    text-decoration:none;
}
ul.menu li a:visited {color:#000}
ul.menu li a:hover {
    background:#d6e5f2;
    color:#0085cf;
}
</style>
</head>
<body>
<h3 class="menuhead">Departments</h3>
<ul class="menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
</ul>
</body>
</html>

If you want round corners in ie8 an below then you would need to use images (or a sprite).

3

Oh OK - I am pleased it can be done without JavaScript!

You did say early in your reply they use a sprite. And later you say for ie8 and below use a sprite. You obviously mean use the sprite that they use?

Naturally, for my purposes I will need to make my own images for sizing, etc…

And how do you code it to say

If you have ie9, mozilla, safari use the code
If you have ie8 below please show the images instead

???

Matt.

4

Yes make your own image to suit but have a look here for a guide on how to make sprites. There’s nothing special except that you have to place images on the sprite with care so that they don’t overlap and can be placed on the element correctly using background position. Repeating sections are awkward to do in a sprite so practice makes perfect :slight_smile:

And how do you code it to say

If you have ie9, mozilla, safari use the code
If you have ie8 below please show the images instead

???

You don’t.:slight_smile:

If you want all browsers to have images then go with the image approach.

If you want to use css3 features then just let others degrade as in my example (to square corners).

Don’t try to for fork code as it soon gets unmanageable. You can use conditional comments for IE to offer different code but once you start doing that it becomes awkward to maintain and isn’t really worth the effort unless you have no choice.