SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    not sure what to call it.

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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>

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •