Loading ...
Sorry, an error occurred while loading the content.

Highlighting Menu Buttons

Expand Messages
  • Greg Chapman
    Hi Gang! A while ago a subscriber to this list helped me create a menu system with highlighting buttons using CSS and suitable for XHTML. While the system
    Message 1 of 3 , Mar 11, 2004
    • 0 Attachment
      Hi Gang!

      A while ago a subscriber to this list helped me create a menu system with
      highlighting buttons using CSS and suitable for XHTML.

      While the system works fine for horizontal menus, it doesn't give the
      desired result with a vertical menu. I'm clearly not thinking laterally at
      the moment, because I can't think of the approach required to highlight the
      entire button and not just the text within the button.

      You'll see what I'm talking about at:
      http://www.waterwaysguides.freeserve.co.uk/menutest.htm

      Any ideas/comments welcome!

      Greg
    • John Zeman
      ... system with ... the ... laterally at ... highlight the ... Here s one way. In your XHTML code you have the following code:
      Message 2 of 3 , Mar 11, 2004
      • 0 Attachment
        --- In ntb-html@yahoogroups.com, "Greg Chapman" <greg@e...> wrote:
        > Hi Gang!
        >
        > A while ago a subscriber to this list helped me create a menu
        system with
        > highlighting buttons using CSS and suitable for XHTML.
        >
        > While the system works fine for horizontal menus, it doesn't give
        the
        > desired result with a vertical menu. I'm clearly not thinking
        laterally at
        > the moment, because I can't think of the approach required to
        highlight the
        > entire button and not just the text within the button.
        >
        > You'll see what I'm talking about at:
        > http://www.waterwaysguides.freeserve.co.uk/menutest.htm
        >
        > Any ideas/comments welcome!
        >
        > Greg



        Here's one way.

        In your XHTML code you have the following code:

        <P class="buttons"><a href="#" target="main">A BUTTON</a></p>

        Alter your opening paragraph tag so it's like this:

        <p class="buttons" onmouseover="this.className='onbuttons';"
        onmousedown="this.className='downbuttons'"
        onmouseout="this.className='buttons';">

        Then in your CSS, define two more classes such as:

        .downbuttons{
        background:#979797;
        color:#ff0000
        }
        .onbuttons{
        background:#979797;
        color:#000000
        }


        John
      • hugo_paulissen
        Greg, John, ... And here s another... In your link-tags include class=a. End each tag with a . A BUTTON
        Message 3 of 3 , Mar 11, 2004
        • 0 Attachment
          Greg, John,
          >
          > Here's one way.

          And here's another...

          In your link-tags include class=a. End each tag with a <br>.

          <a class=buttons href="#" target="main">A BUTTON</a><br>
          <a class=buttons href="#"target="main">ANOTHER BUTTON</a><br>
          <a class=buttons href="#"target="main">YET ANOTHER</a><br>
          <a class=buttons href="#"target="main">A BUTTON</a><br>
          <a class=buttons href="#"target="main">WIDER BUTTON</a><br>
          <a class=buttons href="#"target="main">NOT NARROW</a><br>
          <a class=buttons href="#"target="main">YET ANOTHER BUTTON</a><br>
          <a class=buttons href="#"target="main">BUTTON</a><br>
          <a class=buttons href="#"target="main">BUTTON</a><br>
          <a class=buttons href="#"target="main">A BUTTON AGAIN</a><br>
          <a class=buttons href="#"target="main">FINAL BUTTON</a><br>

          Your stylesheet contains...
          a.buttons {
          position: absolute;
          line-height: 1.1em;
          left: 40px;
          border: 1px solid #6699FF;
          width: 120px;
          height: 1.2em;
          padding: 2px 15px;
          text-decoration: none;
          background-color: #99CCFF;
          color: #FFFFFF;
          font-size: 0.7em;
          }
          a.buttons:hover {
          background-color: #6699FF;
          color: #000000;
          }

          Hugo
        Your message has been successfully submitted and would be delivered to recipients shortly.