Start learning with our library of video tutorials taught by experts. Get started

Create a Sliding Tabbed Panel with jQuery and Dreamweaver

Styling the first and last tabs


From:

Create a Sliding Tabbed Panel with jQuery and Dreamweaver

with Chris Converse

Video: Styling the first and last tabs

So at this point we need to add two CSS rules in that Dreamweaver doesn't have support for in its visual interface, but we can add them into the code. So let's open up the CSS file, go up to the File menu, choose Open. Inside of mySlidingPanels go to includes, open sliding_panels.css. Once in here, let's scroll down to the bottom. I am going to add a few lines down here. And what we want to do is target the first child span, so let's start by typing the .sp, space, .tabs, space, span, colon. That specifies the pseudo-class first-child.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Create a Sliding Tabbed Panel with jQuery and Dreamweaver
1h 6m Intermediate Oct 11, 2012

Viewers: in countries Watching now:

A tabbed panel interface is a classic feature to incorporate in your website design, but they're usually static elements. This course shows how to build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, jQuery, and the tools in Dreamweaver. Author Chris Converse leads you through the process from start to finish, from building the containers to styling the text, tab, and panels, and adding click events to make the tabs interactive. He also shows how to incorporate progressive enhancement techniques, so visitors who don't have JavaScript, for example, can still access the content.

Topics include:
  • Creating the main panel and tab containers
  • Adding content to the containers
  • Adding CSS styles to the text and tabs
  • Adding the jQuery $(document).ready() function
  • Assigning click events to the tabs
  • Setting an autostart on page load
  • Creating custom graphics for the panels
  • Assigning custom classes to the HTML elements
  • Reassigning CSS rules with JavaScript
Subjects:
Developer Web Web Design Projects Web Development
Software:
Dreamweaver jQuery
Author:
Chris Converse

Styling the first and last tabs

So at this point we need to add two CSS rules in that Dreamweaver doesn't have support for in its visual interface, but we can add them into the code. So let's open up the CSS file, go up to the File menu, choose Open. Inside of mySlidingPanels go to includes, open sliding_panels.css. Once in here, let's scroll down to the bottom. I am going to add a few lines down here. And what we want to do is target the first child span, so let's start by typing the .sp, space, .tabs, space, span, colon. That specifies the pseudo-class first-child.

Let's put in our brackets. So for the very first child, or the first tab, what we're going to want to do is set a padding-left, set that to 15 pixels. This will give us little bit more room on the left-hand side of the text for the rounded corner that we're going to put into the top left. Let's hit a return. Next, we're going to do border-left, colon, space, and we're going to use shorthand style here, 1 pixel for the size. Next is the style solid Space, then the color pound, and three 's for medium gray.

I'm going to select this property. Let's copy that to the clipboard, paste it on the next line, and change border-left to border-right. Let's scroll down here again. Next, we're going to specify some CSS3 properties for the rounded corners, and we still need to use some of the rendering engine flags to make sure that this works in browsers like Firefox and Chrome and Safari. So first, we'll type -webkit-border. And if you have a later version of Dreamweaver, CS5 or later, Dreamweaver will actually help you with some CSS3 properties. So we want to come over here and choose border-top-left- radius, then a space, then 12 pixels.

Next line we're going to target Mozilla, so -moz-border -radius-topleft as one word, colon, space, 12 pixels. Now the syntax between Mozilla and WebKit are little different. On the next line, we're going to put the name of the final CSS property, so once the CSS3 specification is finalized, all the browser will support this tag. Type border-top-left-radius 12 pixels.

So now with the first tab defined, let's come up here, copy this entire rule. Let's paste it after, and let's change some of the properties here. So instead of first child, we're going to target last child. Instead of padding-left, we're going to change that to padding-right. And instead of border-top-left-radius, we're going to change that to border-top-right, and the Mozilla, change left to right, and for the final property, we'll change this from left to right as well.

Now, since we're in the Code view let's just add one more final rule. This is going to be for the selected state of the tabs. So I'll type .sp .tabs span.selected. This is the class that we're going to dynamically assign onto the individual spans depending on which item the user clicks on. We'll do that with JavaScript later. Now inside here, what we're going to do is set the color so pound sign and three 9s for a medium gray.

Now in the next line we're going to set border bottom, so border-bottom: 1px solid, and then we're going to set white. This is going to give us the illusion that the bottom border being white is going to look like the tab connecting to the content. Let's save our file. Next, we need to add a CSS rule for IE 7 and 8, since they don't support the CSS3 properties we just added in. So let's come to the File menu.

Let's choose Open. Let's open sliding_panels_ie.css. Now, in here we just simply want to set a border for all four sides. So .sp .tabs span, beginning and ending bracket. And inside of the brackets let's just type border, and if we just the word border that will target all four sides. 1 pixel, solid, and then three Cs for gray and hit Save.

Now to test this let's come back to our index.html file. Let's choose Files > Save All. Now, if you're using a later version of Dreamweaver, you'll have a Live View button here. If you don't have a Live View button, you can go to the File menu, come down to Preview in Browser, and you can pick any browser on your system. I am going to come in here and click Live View inside of Dreamweaver's panel, and I can see that these individual panels now show up with the rules we just created. The first child here, the first span, has around a corner on the top left. The last one has around a corner on the top right.

I have a little bit of extra padding over here on the side of photography and a little bit of extra padding on the left side of iPad. Now you notice that these are spaced out a little bit. One of the thing that's happening here is the hard returns in our code are being rendered as spaces in the browser. So let's come out of Live View. Let's come back into Dreamweaver's HTML file. Let's go into Code view. Let's scroll up in Code view, and let's find the div with the tabs class, right here. And what we're going to here is just remove all the whitespace in here.

So we have each of the spans starting and stopping without any spaces in between. There we go. Let's switch back to Design view. Let's click back into Live view and now the tabs will touch each other. Now, as I mentioned earlier, you can use any HTML element to be your tab. Some people prefer to put divs or anchor tags in here and use float properties; some preferr to use an unordered list. I like to use spans because as long as I don't have any space in the code, they'll line up properly and that's the default behavior of a span.

With some of the other approaches we need do a little bit more in the CSS. And now that we've all our tabs styled, we're going to start styling the panels next.

There are currently no FAQs about Create a Sliding Tabbed Panel with jQuery and Dreamweaver.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create a Sliding Tabbed Panel with jQuery and Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked