+3670 7027 517 kapcsolat.sx1@gmail.com

HTML, JS, CSS
SliderBar

Minimal design

Bemutatkozás
Ez a bemutakozás oldala
Eszközök
Ez az eszközök bemutatása oldal
Kapcsolat
Ez a Kapcsolat oldal

Egyedi CSS design

Bemutatkozás
Ez a bemutakozás oldala
Eszközök
Ez az eszközök bemutatása oldal
Kapcsolat
Ez a Kapcsolat oldal

Forráskódok

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
(function($) {
    // -------------- INIT PAGE ----------------
    var sb_slide_time = 500;
    initSliderBar();

    function initSliderBar() {

        $('.sliderbar').each(function(i) {
            var childCount = $(this).children().length;
            var childWidth = Math.round( ( (100 / childCount) + Number.EPSILON) * 1000) / 1000;
            $(this).children().css( {"width": childWidth + "%"} );
            $(this).attr( "id", "square4card_"+i);

            $(this).children().each(function(j) {
                $(this).attr( "id", "sbcard_"+i+"_"+j);
            });
        });

        $('.sliderbar > div').css( "transition-duration", sb_slide_time+"ms" );
        $('.sliderbar > div').append( '<div class="opener"><i class="fas fa-lg fa-chevron-circle-down"></i></div>' );
        $('.sliderbar > div').append( '<div class="closer"><i class="fas fa-lg fa-times-circle"></i></div>' );
        $(".sliderbar > div .closer").hide();
        $('.sliderbar > div .sb_body').hide();

    }

    $(".sliderbar > div .opener").on( "click", function () {

        $(this).closest('.sliderbar').find('.sb_body').hide();
        $(this).closest('.sliderbar').find('.closer').hide();
        $(this).closest('.sliderbar').find('.opener').hide();

        $(this).hide();
        $(this).parent().find(".closer").show();
        $(this).closest('.sliderbar').children().css( {"width": "10%"} );
        $(this).parent().css( {"width": "100%"} );
        $(this).parent().find(".sb_body").show( sb_slide_time );

    });

    $(".sliderbar > div .closer").on( "click", function () {

        $sbcard = $(this).parent();
        $sbcard.find(".sb_body").hide( sb_slide_time );
        $sbcard.find(".closer").hide();
        $(this).closest('.sliderbar').find('.opener').show();
        $sbcard.closest('.sliderbar').each(function(i) {
            var childCount = $(this).children().length;
            var childWidth = Math.round( ( (100 / childCount) + Number.EPSILON) * 1000) / 1000;
            $(this).children().css( {"width": childWidth + "%"} );
        });

    });

})(jQuery);

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.sliderbar {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}
.sliderbar { border: 1px solid #0c5460; }
.sliderbar > div {
    display: inline-block;
    position: relative;
    align-self: stretch;
    transition: width 1s ease-out;
}
.sliderbar > div {
    border: 0px solid #0c5460;
    border-width: 0px 1px 0px 0px;
}
.sliderbar > div:last-child {
    border-width: 0px 0px 0px 0px;
}

.sliderbar .opener,
.sliderbar .closer {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem 8px 0 0;
    cursor: none;
}
.sliderbar .opener:hover,
.sliderbar .closer:hover {
    cursor: pointer;
}
.sliderbar .opener { color: #4b89cc; }
.sliderbar .opener:hover { color: #113f76; }
.sliderbar .closer { color: #de4224; }
.sliderbar .closer:hover { color: #a01f06; }

.sliderbar > div .sb_title {
    padding: 1rem 0.5rem;
    background: rgba(143, 200, 247, 1);
    background: linear-gradient(90deg, rgba(143, 200, 247, 1) 0%, rgba(143, 200, 247, 0) 100%);
    font-size: 1.2rem;
    color: #064486;
}

.sliderbar > div .sb_body {
    padding: 1rem 0.75rem;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="sliderbar">

    <div class="sbcard">
        <div class="sb_title">Bemutatkozás </div>
        <div class="sb_body">Ez a bemutatkozás oldala </div>
    </div>

    <div class="sbcard">
        <div class="sb_title">Eszközök </div>
        <div class="sb_body">Ez az eszközök bemutatása </div>
    </div>

    <div class="sbcard">
        <div class="sb_title">Kapcsolat </div>
        <div class="sb_body">Ez a Kapcsolat oldal </div>
    </div>

</div>

WP SHORTCODE

1
2
3
4
5
6
7
8
9
10
11
[ sx_sliderbar]
    [ sx_sbcard title="Bemutatkozás"]
        Ez a bemutakozás oldala
    [/sx_sbcard]
    [ sx_sbcard title="Eszközök"]
        Ez az eszközök bemutatása oldal
    [/sx_sbcard]
    [ sx_sbcard title="Kapcsolat"]
        Ez a Kapcsolat oldal
    [/sx_sbcard]
[/sx_sliderbar]