1 Reply Latest reply on May 28, 2010 7:41 AM by bemdesign

    Navigation Bar Help

    JMed683

      Working in Dreamweaver CS4.

       

      I have the base of my site built using CSS. I am ready to create my Navigation Bar. It consists of 5 "buttons" that are different images from one another and each one changes on mouse over. I tried a Spry Menu Bar but it looks like I cannot have a different image for each button - can only have a background that is the same for each button. What is my best way to create this?

        • 1. Re: Navigation Bar Help
          bemdesign Level 4

          Use CSS classes to style anchor tags (link tags) to look like  buttons.

           

          So you make your nav:

                    ...

                         <ul>

                              <li>

                                   <a class="button1" href="#">Button One</a>

                              </li>

                               <li>

                                   <a class="button2"  href="#">Button Two</a>

                              </li>

                         </ul>

           

          And in your CSS, you style your links in your nav section to look like buttons.

          Like  so:

               .button1{

               display:block;

               /*add  whatever width, height, floats or other CSS to style your buttons*/

               background: url(../path/to/button1.jpg);

               }

                .button1:hover{

               background: url(../path/to/button1_hover.jpg);

               }

           

                .button2{

               display:block;

               /*add whatever width,  height, floats or other CSS to style your  buttons*/

               background:url(../path/to/button2.jpg)

               }

           

                .button2:hover{

               background:  url(../path/to/button1_hover.jpg);

               }

           

          etc...

           

          Hope this helps.

          1 person found this helpful