A card-plane folding menu implemented by css3 and jquery, css3jquery

A card-plane folding menu implemented by css3 and jquery, css3jquery

We have already introduced a lot of navigation menus. Today we bring you another card folding menu implemented by css3 and jquery. When the menu is closed, it has the effect of 3D stacking. Let's take a look:

 

Download Online Preview source code

 

Html code:

 <div id="wrapper">        
Css3 code:
   html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video        {            margin: 0;            padding: 0;            border: 0;            font: inherit;            font-size: 100%;            vertical-align: baseline;        }                                ol, ul        {            list-style: none;        }        body        {            background-color: #F2EFE9;            overflow: visible;            padding-top: 40px;            font-family: helvetica, arial, sans-serif;            font-size: 1em;        }                *        {            -webkit-box-sizing: border-box;            -moz-box-sizing: border-box;            box-sizing: border-box;        }                #wrapper        {            width: 680px;            margin: 0 auto;            height: 1000px;        }                h1        {            font-size: 2.5em;            text-align: center;            font-weight: bold;            margin-bottom: 10px;            line-height: 1.4em;            color: #4e6a6a;            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);            font-family: helvetica, arial, sans-serif;        }        h1 span        {            font-weight: lighter;        }                .card-drop        {            max-width: 300px;            position: relative;            margin: 0 auto;            -webkit-perspective: 800px;            -moz-perspective: 800px;            -ms-perspective: 800px;            -o-perspective: 800px;            perspective: 800px;        }        .card-drop a        {            display: block;            width: 100%;            background-color: salmon;            padding: 20px 0 20px 20px;            height: 60px;            text-decoration: none;            color: #1e2929;            background-color: #5f8181;            border-bottom: 1px solid #4e6a6a;            -webkit-transition: all 0.3s ease-out;            -moz-transition: all 0.3s ease-out;            -o-transition: all 0.3s ease-out;            transition: all 0.3s ease-out;        }        .card-drop a i        {            display: inline-block;            width: 20px;        }        .card-drop > a.toggle        {            position: relative;            z-index: 300;            -webkit-backface-visibility: hidden;            -moz-backface-visibility: hidden;            -ms-backface-visibility: hidden;            -o-backface-visibility: hidden;            backface-visibility: hidden;            -webkit-transform-style: preserve-3d;            -moz-transform-style: preserve-3d;            -ms-transform-style: preserve-3d;            -o-transform-style: preserve-3d;            transform-style: preserve-3d;            -webkit-transform-origin: 50% 0%;            -moz-transform-origin: 50% 0%;            -ms-transform-origin: 50% 0%;            -o-transform-origin: 50% 0%;            transform-origin: 50% 0%;            -webkit-transition: 0.1s linear;            -moz-transition: 0.1s linear;            -o-transition: 0.1s linear;            transition: 0.1s linear;            background-color: #729797;        }        .card-drop > a.toggle:active        {            -webkit-transform: rotateX(60deg);            -moz-transform: rotateX(60deg);            -ms-transform: rotateX(60deg);            -o-transform: rotateX(60deg);            transform: rotateX(60deg);        }        .card-drop > a.toggle.active:before        {            content: "\f0d8";        }        .card-drop > a.toggle:before        {            border-left: 1px solid #4E6A6A;            color: #344646;            content: "?";            display: block;            font-family: 'FontAwesome';            font-size: 1.3em;            height: 59px;            line-height: 60px;            position: absolute;            right: 0;            text-align: center;            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);            top: 0;            width: 60px;        }        .card-drop ul        {            position: absolute;            height: 100%;            top: 0;            display: block;            width: 100%;        }        .card-drop ul li        {            margin: 0 auto;            -webkit-transition: all, 0.3s ease-out;            -moz-transition: all, 0.3s ease-out;            -o-transition: all, 0.3s ease-out;            transition: all, 0.3s ease-out;            position: absolute;            top: 0;            z-index: 0;            width: 100%;        }        .card-drop ul li a:hover        {            background-color: #6a9090;            color: #dce5e5;        }        .card-drop ul li.active a        {            color: #95b1b1;            background-color: #547272;            cursor: default;        }        .card-drop ul li.closed a:hover        {            cursor: default;            background-color: #5f8181;        }
Js Code:
  $(document).ready(function () {            (function ($) {                //Author: Brady Sammons                //URL: www.bradysammons.com                /* -------------------------------------------------------- */                /*    //set Global variables                /* -------------------------------------------------------- */                var cards = $(".card-drop"),        toggler = cards.find(".toggle"),        links = cards.find("ul>li>a"),        li = links.parent('li'),        count = links.length,        width = links.outerWidth();                console.info(count);                console.info(width);                console.info(toggler);                console.info(links);                console.info(li);                console.info(cards);                //set z-Index of drop Items                links.parent("li").each(function (i) {                    $(this).css("z-index", count - i); //invert the index values                });                //set top margins & widths of li elements                function setClosed() {                    li.each(function (index) {                        $(this).css("top", index * 2)                         .css("width", width - index * 20)                         .css("margin-left", (index * 20) / 2)                                                .css("margin-left", (index * 20) / 2);                    });                    li.addClass('closed');                    toggler.removeClass("active");                }                setClosed();                /* -------------------------------------------------------- */                /*    Toggler Click handler                /* -------------------------------------------------------- */                toggler.on("mousedown", function () {                    var $this = $(this); //cache $(this)                    //if the menu is active:                    console.info(this);                    if ($this.is(".active")) {                        setClosed();                    } else {                        //if the menu is un-active:                        $this.addClass("active");                        li.removeClass('closed');                        //set top margins                        li.each(function (index) {                            $(this).css("top", 60 * (index + 1))                         .css("width", "70%")                         .css("margin-left", "40px");                        });                    }                });                /* -------------------------------------------------------- */                /*    Links Click handler                /* -------------------------------------------------------- */                links.on("click", function (e) {                    var $this = $(this),            label = $this.data("label");                    icon = $this.children("i").attr("class");                    li.removeClass('active');                    if ($this.parent("li").is("active")) {                        $this.parent('li').removeClass("active");                    } else {                        $this.parent("li").addClass("active");                    }                    toggler.children("span").text(label);                    toggler.children("i").removeClass().addClass(icon);                    setClosed();                    e.preventDefault;                });            })(jQuery);        }); //@ sourceURL=pen.js
Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/6739

Development Prospects of jQuery, HTML5, and CSS3
Well, since you are an intern, it means you still have a lot of time. html css3, this is the basic jsp jq, this is the framework.
It works perfectly if you are both proficient.
With the accumulation of time, you gradually develop from production to planning, that is, the title of director. After all, when you are older, for example, if you are working on the frontend, you will feel a little unable to keep up with the frontend. it's a physical activity.
For the time being, you don't have to worry about what to do. In the background, you just need to accumulate some big projects for the whole site after completing your existing internships, and then choose a better company to develop.
Accumulating your current start point is still a good one. At least it is much better than coming home!

How does html5 + css3 implement this layout?
This is implemented using css.
Jqm has a grid, but it is evenly distributed. For example, if you want two divs of 30% + 70%, you cannot write the layout by yourself.
Jqm is evenly distributed between 50%, 50%, 25%, 25%, and 25%. This is the official grid demo.
Demos.jquerymobile.com/1.4.0/grids/