I want to create a large side tab/panel. so that when the user hovers it it comes out and offers a menu of thumbnails to click on.
Can you folks point to a tutorial. should this be jquery or just css would do it.
was thinking of using absolute and relative positioning.
But is there a better way?
Thx
D
Hi,
Did you mean something like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tab {
position:fixed;
top:20%;
left:-302px;
width:300px;
background:red;
border:1px solid #000;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
z-index:99;
}
.tab h4 {
position:absolute;
right:-51px;
top:20px;
z-index:2;
width:10px;
padding:20px;
font-size:24px;
margin:0;
border:1px solid #000;
border-left:0;
background:red;
color:#fff;
text-transform:uppercase;
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
.tab, .tab ul {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: al 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.tab:hover {
width:300px;
left:0;
}
</style>
</head>
<body>
<div class="tab">
<h4>T a b</h4>
<ul>
<li><a href="#">Links and stuff</a></li>
<li><a href="#">Links and stuff</a></li>
<li><a href="#">Links and stuff</a></li>
<li><a href="#">Links and stuff</a></li>
<li><a href="#">Links and stuff</a></li>
<li><a href="#">Links and stuff</a></li>
<li><a href="#">Links and stuff</a></li>
<li><a href="#">Links and stuff</a></li>
<li><a href="#">Links and stuff</a></li>
</ul>
</div>
</body>
</html>
Hello! and thank you Paul will try that out.
also found out that is if of course called a pull out slider (d’ooh)and I should be checking out jquery as well. rather do it in all css of course
thank you and have a great weekend