Question

I am looking for a tabbed navigation menu which caters for images as the tabitems.
So I have something like this:

   <div class="menu">

            <a href="#">
                    <img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
            </a>
            <a href="#">
                    <img src="images/Desert.jpg" style="width:10%; height:10%"  title="Desert" />
            </a>
            <a href="#">
                    <img src="images/Hydrangeas.jpg" style="width:10%; height:10%"  title="Hydrangeas"/>
            </a>
            <a href="#">
                    <img src="images/Jellyfish.jpg" style="width:10%; height:10%"  title="Jellyfish" />
            </a>
            <a href="#">
                    <img src="images/Penguins.jpg" style="width:10%; height:10%"  title="Penguins" />
            </a>


        </div>

I have tried a few jquery/css ones but I cannot find one that gives me a nice style for a tab that contains images?

Answer 1

Try jQuery UI tabs.

Checkout the code on http://jqueryui.com/demos/tabs/#default

Replace Navigation Items in the demo ie.,

<ul>
  <li><a href="#tabs-1">Nunc tincidunt</a></li>
  <li><a href="#tabs-2">Proin dolor</a></li>
  <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>

with your contents, like…

<ul>
  <li>
    <a href="#"><img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" /></a>
  </li>
  <li>
    <a href="#"><img src="images/Desert.jpg" style="width:10%; height:10%"  title="Desert" /></a>
  </li>
  <li>
    <a href="#"><img src="images/Hydrangeas.jpg" style="width:10%; height:10%"  title="Hydrangeas"/></a>
  </li>
  <li>
    <a href="#"><img src="images/Jellyfish.jpg" style="width:10%; height:10%"  title="Jellyfish" /></a>
  </li>
  <li>
    <a href="#"><img src="images/Penguins.jpg" style="width:10%; height:10%"  title="Penguins" /></a>
  </li>
</ul>

Size of the images should be suitable for your tab.

Hope you can understand… 🙂