Question

I want the following to become a tabbed view.

 <div id="navigation">

<ul class="secondbakedmenu">
<li><a href=".html">Images</a>
<ul>

<li>



</li>

    <dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

<li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

<li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</li>
<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

<li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

<li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</ul>

<dl>
<ul class="secondbakedmenu">
<li><a href=".html">Previews</a>
<ul>

<li>
<dt>Preview</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>
</li>

<li>
<dt>Preview</dt>
<dd></dd>
<a href=".html">SSX<img src="" height=100 width=120/></a>
</li>

<li>
<dt>Preview</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>
</li>

<li>    
<dt>Preview</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>
</li>

<li>
<dt>Preview</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>    
</li>

<ul class="secondbakedmenu">
<li><a href=".html">All Updates</a>
<ul>
<li><a href=".html">1</a></li>
<li><a href=".html">2</a></li>
<li><a href=".html">3</a></li>
<li><a href=".html">4</a></li>
<li><a href=".html">5</a></li>
</ul>

​​​​

And the css for it

.secondbakedmenu {list-style: none;
         float: left;
         margin-top: 15px;
         margin-left: -20px;}

.secondbakedmenu li>a{color: white;
            font-size: 12px}

.secondbakedmenu li{font-family: Berlin Sans FB;
          } 

.secondbakedmenu li ul {position: absolute;
                        display: none;}

.secondbakedmenu a:hover{text-decoration: none;
                        color: white;
        text-shadow: 1px 1px 1px blue;

        }   

.secondbakedmenu li:hover ul {
                     display: block;
                     list-style-type: none;
                     }

ul.secondbakedmenu li:hover{margin: 0;
                            padding: 0;}

How can i make this menu into a tabbed view menu with a click function instead of the hover, and make the content that is displayed when tabbed upon to properly be placed inside one and the same container.

Answer 1

Definitely requires JavaScript. I wouldn’t re-invent that wheel, however. Use a java-script library with a plugin.

jQuery’s UI has a “tabs” widget here:
http://jqueryui.com/demos/tabs/