<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Large Box</title>
<style type="text/css">
body, html {
padding:0px;
margin:0px;
}
#ul_body {
list-style: none;
padding:0px;
margin:0px;
width: 80%;
margin: auto;
margin-top:5px;
}
#ul_body > li{
border: 1px solid black;
float:left;
margin-left: 5px;
padding: 2px 5px;
border-radius: 5px 5px 0 0;
border-bottom:none;
}
#ul_body > li:hover{
background-color: black;
color:white;
cursor:pointer;
}
#ul_body > li > div {
display:none;
margin:auto;
position:absolute;
background-color:white;
border:1px solid black;
margin-top:1px;
border-radius:10px;
margin-left: -20px;
padding: 3px;
max-width:70%;
cursor: default;
min-width: 200px;
text-align: center;
color: black;
}
#ul_body > li:hover > div {
display:block;
}
ul.imgchange {
list-style:none;
padding:0;
margin:0;
}
ul.imgchange li {
cursor:pointer;
text-decoration: underline;
}
.onebyone > img{
width:100px;
height:100px;
padding:0;
}
.multi_content {
list-style:none;
padding:0;
}
.multi_content>li {
float: left;
padding:2px;
}
/* Content below the links */
#content {
clear:both;
border-top:1px solid black;
background-color:blue;
border-bottom:1px solid black;
}
.main {
width: 80%;
margin: auto;
height:300px;
background-color: white;
border-left:1px solid grey;
border-right: 1px solid grey;
}
</style>
<script type="text/javascript">
function change_image(the_id,the_image){
x = document.getElementById(the_id);
x.innerHTML = '<img src="'+the_image+'" />';
}
</script>
</head>
<body>
<div id="nav">
<ul id="ul_body">
<li>Link One<div>
<ul class="multi_content"><li><div id="img1" class="onebyone">
<img src="http://industrial-supplies.biz/images/s-i/C48AS.jpg" />
</div>
<ul class="imgchange">
<li onmouseover="change_image('img1','http://www.clker.com/cliparts/7/H/K/N/L/g/crossed-hammers-bw-100x100-md.png')">Image One</li>
<li onmouseover="change_image('img1','http://industrial-supplies.biz/images/s-i/C48AS.jpg')">Image Two</li>
</ul></li>
<li><div id="img2" class="onebyone">
<img src="http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg" />
</div>
<ul class="imgchange">
<li onmouseover="change_image('img2','http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg')">Image One</li>
<li onmouseover="change_image('img2','http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX20_2.jpg')">Image Two</li>
</ul></li></ul>
</div>
</li>
<li>Link Two<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
<li>Link Three<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
<li>Link Four<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sapien nisl, convallis sed vulputate at, pharetra ut tortor. Duis sagittis id eros in pretium. Duis vel fermentum orci, ac ornare nisl. Praesent lorem lacus, aliquam sit amet ante quis, tincidunt rhoncus tellus. Cras lobortis sit amet lacus ut mattis. Vestibulum non risus diam. Praesent quis nunc eu nisi fermentum accumsan. Nam eu tempus eros, molestie sollicitudin sapien. Aliquam erat volutpat. Vivamus felis risus, eleifend et feugiat quis, egestas ac mi.</div></li>
<li>Link Five<div>Lorem ipsum dolor sit amet</div></li>
</ul>
</div>
<div id="content">
<div class="main">
Content goes here
</div>
</div>
</body>
</html>
Explains how you can edit it:
Red font color means you have to add it
Visible tabs non-hovered:
#ul_body > li{
border: 1px solid black; /* Change border color on top tabs */
float:left;
margin-left: 5px; /* Sets the space between each of the tabs */
padding: 2px 5px;
border-radius: 5px 5px 0 0;
border-bottom:none;
background-color: green; /* Change background color on non-hover background tabs */
}
Visible tabs once you hover of them:
#ul_body > li:hover{
background-color: black; /*changes background color */
color:white; /*changes font color */
cursor:pointer;
border-color: 1px solid green; /*changes the color of the border */
}
The hover content:
#ul_body > li > div {
display:none;
margin:auto;
position:absolute;
background-color:white; /* Changes background color */
border:1px solid black; /*changes border color */
margin-top:1px;
border-radius:10px;
margin-left: -20px;
padding: 3px;
max-width:70%;
cursor: default;
min-width: 200px;
text-align: center;
color: black; /*Color inside the div */
}
Image change links:
ul.imgchange li {
cursor:pointer;
text-decoration: underline;
color: red; /* changes the color text */
}
Change color when hovered over change image links:
ul.imgchange li:hover{
text-decoration: none;
color: green; /*changes the font color again */
}
To get the effect of having content next to each other add this:
<ul class="multi_content"><li>Content</li><li>Content</li></ul>
The red is showing where it has been added to the code at the top; so it has already been added.
as seen here:
<ul class="multi_content"><li><div id="img1" class="onebyone">
<img src="http://industrial-supplies.biz/images/s-i/C48AS.jpg" />
</div>
<ul class="imgchange">
<li onmouseover="change_image('img1','http://www.clker.com/cliparts/7/H/K/N/L/g/crossed-hammers-bw-100x100-md.png')">Image One</li>
<li onmouseover="change_image('img1','http://industrial-supplies.biz/images/s-i/C48AS.jpg')">Image Two</li>
</ul></li>
<li><div id="img2" class="onebyone">
<img src="http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg" />
</div>
<ul class="imgchange">
<li onmouseover="change_image('img2','http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg')">Image One</li>
<li onmouseover="change_image('img2','http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX20_2.jpg')">Image Two</li>
</ul></li></ul>