What source? the link is an image.
Anyway...
Quote:
I am trying to get fancy with my website but each tutorial I find to achieve a similar effect needs me to use lists.
What's wrong with lists? Its the semantically correct way of building menus.
Anyway, the base of it should work with or without lists.
Try this for instance:
CODE --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hover Link</title>
<script type="text/javascript" >
var selOpt = 'opt1';
function showDesc(optionObj,optShow)
{
//alert(optShow);
if(optShow != selOpt)
{
var selObj = document.getElementById(optShow);
var hideObj = document.getElementById(selOpt);
}
selObj.style.display = 'block';
hideObj.style.display = 'none';
selOpt = optShow;
}
</script>
<style type="text/css">
body
{
background-color:#343434;
margin:0px;
padding:0px;
}
#container
{
width:800px;
border:1px solid gray;
background-color: #ededed;
}
#menu
{
overflow: hidden;
height:40px;
}
#menu ul
{
overflow: hidden;
list-style-type: none;
padding:0px;
margin: 0px;
}
#menu ul li
{
cursor: pointer;
float:left;
min-width: 120px;
height:40px;
text-align: center;
border-left: 2px groove #dedede;
line-height: 40px;
}
#menu ul li:hover
{
background-color: #004499;
}
#menusection
{
border-top:1px solid #666666;
height:300px;
}
#menusection div.descript
{
display:none;
overflow:hidden;
height: 300px;
}
#menusection div.opt1
{
color:#668800;
display:block;
}
#menusection div.opt2
{
color:#886600;
}
#menusection div.opt3
{
color:#006699;
}
#menusection div.opt4
{
color:#009966;
}
#menusection div.descript div.splash
{
background-color:#668800;
width:550px;
height:300px;
float:left;
}
#menusection div.descript div.descbox
{
float:left;
width:248px;
height:100%;
position: relative;
}
#menusection div.opt2 div.splash
{
background-color: #886600;
}
#menusection div.opt3 div.splash
{
background-color: #006699;
}
#menusection div.opt4 div.splash
{
background-color: #009966;
}
#menusection div.descript div.descbox a.morelink
{
position: absolute;
bottom: 5px;
right: 10px;
color:inherit;
}
</style>
<meta name="date" content="2012-08-09T10:19:00-0500" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
</head>
<body>
<div id="container">
<div id="menu">
<ul><li onmouseover="showDesc(this,'opt1');">Option 1</li><li onmouseover="showDesc(this,'opt2');">Option 2</li><li onmouseover="showDesc(this,'opt3');">Option 3</li><li onmouseover="showDesc(this,'opt4');">Option 4</li></ul>
</div>
<div id="menusection">
<div id="opt1" class="descript opt1">
<div class="splash"> </div>
<div class="descbox ">
<h1>Header</h1>
<h3>Sub header</h3>
<p>Description goes here</p>
<a class="morelink" href="#">More Info</a>
</div>
</div>
<div id="opt2" class="descript opt2">
<div class="splash"> </div>
<div class="descbox">
<h1>Header</h1>
<h3>Sub header</h3>
<p>Description goes here</p>
<a class="morelink" href="#">More Info</a>
</div>
</div>
<div id="opt3" class="descript opt3">
<div class="splash"> </div>
<div class="descbox">
<h1>Header</h1>
<h3>Sub header</h3>
<p>Description goes here</p>
<a class="morelink" href="#">More Info</a>
</div>
</div>
<div id="opt4" class="descript opt4">
<div class="splash"> </div>
<div class="descbox">
<h1>Header</h1>
<h3>Sub header</h3>
<p>Description goes here</p>
<a class="morelink" href="#">More Info</a>
</div>
</div>
</div>
</div>
</body>
</html> ----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech
|
|
Talk To Other Members
Read More Threads Like This One