not sure what to call it.

**pdxSherpa** · May 6, 2013 22:49

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

**Paul O'B** · May 10, 2013 08:21

Hi,

Did you mean something like this?

Code:

<!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>

**pdxSherpa** · May 12, 2013 10:50

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

User Tag List

Thread: not sure what to call it.

Thread Tools

Display

not sure what to call it.

Bookmarks

Bookmarks

Posting Permissions