MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Create a Sliding Tabbed Panel with jQuery and Dreamweaver

Course Summary

Build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, jQuery, and the tools in Dreamweaver.       


  • +

    Course Syllabus


        Introduction
            Previewing the final project
            About the exercise files
            Beginning the project
        1. Creating the HTML Containers
            Creating the main panel and the tab containers
            Creating the HTML containers for the tabs
            Creating the HTML containers for the panels
            Adding content to the containers
        2. Styling the Tabs and Panels
            Adding CSS styles to the text
            Adding CSS styles to the tabs
            Styling the first and last tabs
            Styling the main container and the panels
        3. Writing the JavaScript and jQuery
            Adding the jQuery document ready
            Lining up the panels in a row
            Assigning click events to the tabs
            Animating the panels based on the tab clicked
            Assigning a selected state to the tab clicked
            Setting an autostart on page load
        4. Creating Custom Graphics
            Creating custom graphics for the panels
        5. Customizing the Panel Styles
            Assigning custom classes to the HTML elements
            Adding CSS rules for the video panel
            Adding CSS rules for remaining panels
        6. Adding Progressive Enhancement Techniques
            Removing CSS rules that hide elements
            Reassigning CSS rules with JavaScript
        Conclusion
            Where to go from here

     


Course Fee:
USD 25

Course Type:

Self-Study

Course Status:

Active

Workload:

2 - 3 hours / week

This course is listed under Development & Implementations Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top