More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.
Horizontal sliding panels are great for many situations, but like everything else, they’re not always ideal. It depends on the project. To see what I mean by ‘
horizontal sliding panel‘, go have a look at my other site
Design-Newz, and click on the ‘
want more‘ button that’s on the right above the navigation bar.
The Plan
So, what about a vertical sliding panel that would act as some sort of
drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.
Here’s what I had in mind (click to enlarge or check below the image for working demos):
First we’ll create the markup, then the CSS and then we’ll use jQuery to open and close our vertical sliding panel. I created 3 different demos:
Here are the files we will need for this tutorial:
- index.html
- style.css
- jQuery library
- images
1- Markup
Let’s start with the head of our document. We need to declare a
doctype, write a title and link to our CSS file and to the jQuery library (we’ll let
Google host the jQuery file). Later on we’ll come back to this and write our jQuery, but let’ start with just this.
1 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 | <title>Vertical Sliding Info Panel With jQuery</title> |
6 | <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> |
7 | <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> |
Then, inside the body of our document, we’ll create a div and give it an ID of ‘
container‘. This div will hold all of our main content (Lorem Ipsum in this case) but not our sliding panel. Inside this div we’ll put a H1, H2, another div and some paragraphs. Here’s the markup:
2 | <h1>Vertical Sliding Info Panel With jQuery</h1> |
3 | <h2>The Sliding Panel And Trigger Button On The Left Have Absolute Positioning</h2> |
4 | <p>This is an example of simple page that's centered and has a vertical sliding panel on the far left (try it! click on the 'infos' tab that's on the left!). We used jQuery to create this sliding panel (and CSS3 rounded corners because it looks cool)</p> |
5 | <p><a href="http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/" title="How To Create A Vertical Info Panel With jQuery">Click here to return to the tutorial on SpyreStudios</a></p> |
7 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p> |
Now after this ‘
container div‘ we’ll write the markup for our vertical sliding panel and trigger button. I put some paragraphs, H3 tags and some links and unordered lists in the sliding panel.
3 | <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p> |
4 | <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p> |
6 | <h3>A Little Something About Me</h3> |
7 | <img class="right" src="images/jon_image.jpg" alt="Jon Phillips" /> |
8 | <p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p> |
10 | <div style="clear:both;"></div> |
15 | <li><a href="http://spyrestudios.com/" title="home">Home</a></li> |
16 | <li><a href="http://spyrestudios.com/about/" title="about">About</a></li> |
17 | <li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li> |
18 | <li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li> |
19 | <li><a href="http://spyrestudios.com" title="blog">Blog</a></li> |
23 | <div class="colright"> |
26 | <li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li> |
27 | <li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li> |
28 | <li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li> |
29 | <li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li> |
30 | <li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li> |
34 | <div style="clear:both;"></div> |
37 | <a class="trigger" href="#">infos</a> |
And then we can end our document with the closing body and html tags. Now on to the CSS! :)
2- CSS
As you’ll see the CSS is pretty straight forward. I just added some CSS3 rounded corners to the main container div and to the trigger button and sliding panel. You will also notice that the trigger button and panel has absolute positioning to the left. This will place the button and panel on the left edge of the browser window.
Click here to view the demo
7 | font-family:georgia, 'time new romans', serif; |
18 | font-family: verdana, helvetica, arial, sans-serif; |
27 | font-family: verdana, helvetica, arial, sans-serif; |
35 | font-family:verdana, helvetica, arial, sans-serif; |
39 | text-transform:uppercase; |
46 | margin: 3px 3px 6px 8px; |
49 | border: 1px solid #333333; |
72 | border: 1px solid #9FC54E; |
73 | -moz-border-radius-topright: 20px; |
74 | -webkit-border-top-right-radius: 20px; |
75 | -moz-border-radius-bottomleft: 20px; |
76 | -webkit-border-bottom-left-radius: 20px; |
80 | font-family: verdana, helvetica, arial, sans-serif; |
89 | border: 1px solid #cccccc; |
90 | -moz-border-radius-topright: 20px; |
91 | -webkit-border-top-right-radius: 20px; |
92 | -moz-border-radius-bottomleft: 20px; |
93 | -webkit-border-bottom-left-radius: 20px; |
97 | font-family: verdana, helvetica, arial, sans-serif; |
105 | font-family:helvetica, arial, verdana, sans-serif; |
108 | border:1px solid #444444; |
109 | -moz-border-radius-topright: 20px; |
110 | -webkit-border-top-right-radius: 20px; |
111 | -moz-border-radius-bottomleft: 20px; |
112 | -webkit-border-bottom-left-radius: 20px; |
128 | border:1px solid #111111; |
129 | -moz-border-radius-topright: 20px; |
130 | -webkit-border-top-right-radius: 20px; |
131 | -moz-border-radius-bottomright: 20px; |
132 | -webkit-border-bottom-right-radius: 20px; |
135 | padding: 30px 30px 30px 130px; |
136 | filter: alpha(opacity=85); |
146 | .panel a, .panel a:visited{ |
150 | text-decoration: none; |
151 | border-bottom: 1px solid #9FC54E; |
154 | .panel a:hover, .panel a:visited:hover{ |
158 | text-decoration: none; |
159 | border-bottom: 1px solid #ffffff; |
164 | text-decoration: none; |
168 | font-family: verdana, helvetica, arial, sans-serif; |
170 | padding: 20px 40px 20px 15px; |
172 | background:#333333 url(images/plus.png) 85% 55% no-repeat; |
173 | border:1px solid #444444; |
174 | -moz-border-radius-topright: 20px; |
175 | -webkit-border-top-right-radius: 20px; |
176 | -moz-border-radius-bottomright: 20px; |
177 | -webkit-border-bottom-right-radius: 20px; |
178 | -moz-border-radius-bottomleft: 0px; |
179 | -webkit-border-bottom-left-radius: 0px; |
185 | text-decoration: none; |
189 | font-family: verdana, helvetica, arial, sans-serif; |
191 | padding: 20px 40px 20px 20px; |
193 | background:#222222 url(images/plus.png) 85% 55% no-repeat; |
194 | border:1px solid #444444; |
195 | -moz-border-radius-topright: 20px; |
196 | -webkit-border-top-right-radius: 20px; |
197 | -moz-border-radius-bottomright: 20px; |
198 | -webkit-border-bottom-right-radius: 20px; |
199 | -moz-border-radius-bottomleft: 0px; |
200 | -webkit-border-bottom-left-radius: 0px; |
205 | background:#222222 url(images/minus.png) 85% 55% no-repeat; |
230 | list-style-type: none; |
236 | list-style-type: none; |
If you would like to place the trigger button and sliding panel on the right of the window, simply edit the
a.trigger and
.panel and switch ‘
left‘ for ‘
right‘. From this:
To this:
And also make sure to edit the rounded corners from this:
1 | border:1px solid #444444; |
2 | -moz-border-radius-topright: 20px; |
3 | -webkit-border-top-right-radius: 20px; |
4 | -moz-border-radius-bottomright: 20px; |
5 | -webkit-border-bottom-right-radius: 20px; |
To this:
1 | border:1px solid #444444; |
2 | -moz-border-radius-topleft: 20px; |
3 | -webkit-border-top-left-radius: 20px; |
4 | -moz-border-radius-bottomleft: 20px; |
5 | -webkit-border-bottom-left-radius: 20px; |
Doing this will place the trigger button and sliding panel to the right and place the rounded corners on the left instead of the right.
If you would like to get the trigger button and sliding panel to always stay visible when you scroll up and down, change the absolute positioning to fixed positioning, like this:
Click here to view the demo
Oh and if you’d like to remove the transparency of the sliding panel, simply remove or edit this part of the CSS:
1 | filter: alpha(opacity=85); |
3- jQuery
Now all that’s left to do is write our jQuery, cause if we don’t we’ll just have a useless trigger button and no sliding panel :)
Since we already wrote the markup we know that the button has a class of ‘
.trigger‘ and the sliding panel has a class of ‘
.panel‘. This code will go right before the closing
head tag in the header section. Here it is:
1 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
2 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
3 | <html xmlns="http://www.w3.org/1999/xhtml"> |
6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
7 | <title>Vertical Sliding Info Panel With jQuery</title> |
8 | <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> |
9 | <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> |
11 | <script type="text/javascript"> |
12 | $(document).ready(function(){ |
13 | $(".trigger").click(function(){ |
14 | $(".panel").toggle("fast"); |
15 | $(this).toggleClass("active"); |
This will tell the browser to open and close (toggle) the panel when the trigger button is clicked. It’ll also give a class of ‘
active‘ to our trigger button. This will make the green plus sign switch to a red minus sign.
That was pretty easy, eh?
Download And Demos
Here are the 3 demos again:
You can also download a zip file that contains all 3 demos
(downloaded 12593 times already!)
I hope you enjoyed this tutorial! Please let me know if you have any questions and drop me a line if you end up using it (or a variation) on your own site, I’d love to see it! :)
Note: I haven’t tested the demos in IE6 so they may not work as expected. (which is kind of expected from IE6)
Secure your
1Y0-A17 cert through testking online training. Subscribe for compact training package and pass your
70-290 as well as
70-662 on first attempt.
You can also try checking out
PHP hosting reviews here.
No hay comentarios:
Publicar un comentario