Tuesday, January 16, 2007

New Menu Idea

Works... All I Have To Figure out How to Do is add a border in the div surrounding the menu so that the free ends of the curved line loop around the back and meet on the side...
.wrapper {
  width:150px;
  border-style: solid;
  border-width: 2px 0px 2px 2px;
  border-color: #000000;
  -moz-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
}
.item {
  height: 15px;
  border-style: solid;
  border-width: 2px 2px 2px 0px;
  border-color: #000000;
  margin: -2px -15px -2px 15px;
  -moz-border-radius: 0px 10px 10px 0px;
  border-radius: 0px 10px 10px 0px;
  -moz-opacity: .5;
  opacity: .5;
}
.item:hover {
  -moz-opacity: 1;
  opacity: 1;
}
.spacer {
  border-style: solid;
  border-width: 2px 0px 2px 2px;
  border-color: #000000;
  height: 10px;
  width: 10px;
  margin: 0px 0px 0px 5px;
  -moz-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
  -moz-opacity: .5;
  opacity: .5;
}

<div class="wrapper">

<div class="item"><a href="Link To Wherever">Text</a></div>
<div class="spacer"></div>
<div class="item"><a href="Link To Wherever">text</a></div>

</div>

No comments: